fix(atomic): actually use alt field value

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',
   },
 };

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') {

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'));
+    });
+  });
+});

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<TestFixture & AxeFixture>({
+  makeAxeBuilder,
+  resultImage: async ({page}, use) => {
+    await use(new ResultImageObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

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');
+  }
+}