From ed38155dc686adc6cb64ed4f5543a792578a8678 Mon Sep 17 00:00:00 2001 From: Louis Bompart Date: Wed, 20 Nov 2024 14:15:53 -0500 Subject: [PATCH 1/2] fix(atomic): actually use alt field value https://coveord.atlassian.net/browse/KIT-3747 --- .../atomic-result-image/atomic-result-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.tsx b/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.tsx index 81ed1996d5f..d5fbec80ed7 100644 --- a/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.tsx +++ b/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.tsx @@ -53,7 +53,7 @@ export class AtomicResultImage implements InitializableComponent { if (this.imageAltField) { const value = ResultTemplatesHelpers.getResultProperty( this.result, - this.field + this.imageAltField ); if (Array.isArray(value) && typeof value[0] === 'string') { From e4d895ca7487bec86d54ad5ecd206841150ba66c Mon Sep 17 00:00:00 2001 From: Louis Bompart Date: Wed, 20 Nov 2024 14:47:45 -0500 Subject: [PATCH 2/2] fix(atomic): ensure we use alt-field w/ atomic-result-image https://coveord.atlassian.net/browse/KIT-3747 --- .../atomic-result-image.new.stories.tsx | 18 +++++++++++---- .../e2e/atomic-result-image.e2e.ts | 22 +++++++++++++++++++ .../atomic-result-image/e2e/fixture.ts | 19 ++++++++++++++++ .../atomic-result-image/e2e/page-object.ts | 8 +++++++ 4 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/atomic-result-image.e2e.ts create mode 100644 packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/fixture.ts create mode 100644 packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/page-object.ts diff --git a/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.new.stories.tsx b/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.new.stories.tsx index 461aef70ee0..6f0cfab16a5 100644 --- a/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.new.stories.tsx +++ b/packages/atomic/src/components/search/result-template-components/atomic-result-image/atomic-result-image.new.stories.tsx @@ -7,9 +7,10 @@ import type {Meta, StoryObj as Story} from '@storybook/web-components'; const {decorator: resultDecorator, engineConfig} = wrapInResult({ search: { preprocessSearchResponseMiddleware: (res) => { - res.body.results.forEach( - (r) => (r.raw['randomimage'] = 'https://picsum.photos/200') - ); + res.body.results.forEach((r) => { + r.raw['randomimage'] = 'https://picsum.photos/200'; + r.raw['someAltField'] = 'Some alt value'; + }); return res; }, }, @@ -32,6 +33,15 @@ export default meta; export const Default: Story = { name: 'atomic-result-image', args: { - field: 'randomimage', + 'attributes-field': 'randomimage', + }, +}; + +export const withAnAltTextField: Story = { + name: 'With an alt text field', + args: { + 'attributes-field': 'invalid', + 'attributes-fallback': 'invalid', + 'attributes-image-alt-field': 'someAltField', }, }; diff --git a/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/atomic-result-image.e2e.ts b/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/atomic-result-image.e2e.ts new file mode 100644 index 00000000000..bab6232dff6 --- /dev/null +++ b/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/atomic-result-image.e2e.ts @@ -0,0 +1,22 @@ +/* eslint-disable @cspell/spellchecker */ +import {test, expect} from './fixture'; + +test.describe('with an alt text field', async () => { + test.describe('when imageAltField is a valid string & the image is not found', () => { + test.beforeEach(async ({resultImage}) => { + await resultImage.load({ + story: 'with-an-alt-text-field', + }); + await resultImage.hydrated.waitFor(); + }); + + test('should be accessible', async ({makeAxeBuilder}) => { + const accessibilityResults = await makeAxeBuilder().analyze(); + expect(accessibilityResults.violations.length).toEqual(0); + }); + + test('should use the alt text', async ({resultImage}) => { + expect(resultImage.hydrated.first().getByAltText('Some alt value')); + }); + }); +}); diff --git a/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/fixture.ts b/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/fixture.ts new file mode 100644 index 00000000000..48236fb699d --- /dev/null +++ b/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/fixture.ts @@ -0,0 +1,19 @@ +import {test as base} from '@playwright/test'; +import { + AxeFixture, + makeAxeBuilder, +} from '../../../../../../playwright-utils/base-fixture'; +import {ResultImageObject} from './page-object'; + +interface TestFixture { + resultImage: ResultImageObject; +} + +export const test = base.extend({ + makeAxeBuilder, + resultImage: async ({page}, use) => { + await use(new ResultImageObject(page)); + }, +}); + +export {expect} from '@playwright/test'; diff --git a/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/page-object.ts b/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/page-object.ts new file mode 100644 index 00000000000..f5008057af5 --- /dev/null +++ b/packages/atomic/src/components/search/result-template-components/atomic-result-image/e2e/page-object.ts @@ -0,0 +1,8 @@ +import type {Page} from '@playwright/test'; +import {BasePageObject} from '../../../../../../playwright-utils/base-page-object'; + +export class ResultImageObject extends BasePageObject<'atomic-result-image'> { + constructor(page: Page) { + super(page, 'atomic-result-image'); + } +}