UILD-841: Incorporate jest-axe tests into components for accessibility checks

Author: zepheiryan

package.json

@@ -61,6 +61,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/jest": "^30.0.0",
+    "@types/jest-axe": "^3.5.9",
     "@types/lodash": "^4.17.14",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.2",
@@ -82,6 +83,7 @@
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.3.0",
+    "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.3.0",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^16.4.0",

src/features/comparison/components/Comparison/Comparison.test.tsx

@@ -6,6 +6,7 @@ import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { Fragment } from 'react/jsx-runtime';
 
 import { fireEvent, render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { useComparisonData } from '@/features/comparison/hooks';
 
@@ -165,4 +166,17 @@ describe('Comparison', () => {
 
     expect(getAllByText(1)[0]).toBeInTheDocument();
   });
+
+  describe('accessibility', () => {
+    test.each([
+      ['no comparison items are selected', [] as StoreWithState[], []],
+      ['only one resource is selected', baseMockState, undefined],
+    ])('has no accessibility violations when %s', async (_description, stateArgs, comparisonItems) => {
+      const { container } = renderWithState(stateArgs, comparisonItems);
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });

src/features/complexLookup/components/ComplexLookupField/ComplexLookupField.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { ComplexLookupType } from '@/features/complexLookup/constants/complexLookup.constants';
 
@@ -277,4 +278,56 @@ describe('ComplexLookupField', () => {
       );
     });
   });
+
+  describe('accessibility', () => {
+    const twoValues = [
+      { id: '1', label: 'Item 1', meta: {} },
+      { id: '2', label: 'Item 2', meta: {} },
+    ];
+
+    test.each([
+      [
+        'read-only input when isNew is false',
+        { entry: { ...defaultEntry, layout: { ...defaultEntry.layout, isNew: false } } },
+        {},
+      ],
+      [
+        'read-only input with formatted value',
+        {
+          entry: { ...defaultEntry, layout: { ...defaultEntry.layout, isNew: false } },
+          value: twoValues,
+        },
+        { localValue: twoValues },
+      ],
+      ['interactive field with button', { entry: defaultEntry }, {}],
+      [
+        'selected items when value exists',
+        { entry: defaultEntry, value: twoValues },
+        { localValue: twoValues, buttonLabelId: 'ld.change' },
+      ],
+      ['modal open', { entry: defaultEntry }, { isModalOpen: true }],
+      [
+        'modal open with initialQuery',
+        { entry: defaultEntry, value: [{ id: '1', label: 'Test Query', meta: {} }] },
+        { localValue: [{ id: '1', label: 'Test Query', meta: {} }], isModalOpen: true },
+      ],
+      ['modalConfig is null', { entry: defaultEntry }, { modalConfig: null, isModalOpen: true }],
+      [
+        'lookupType is undefined',
+        { entry: { ...defaultEntry, layout: { ...defaultEntry.layout, api: undefined } } },
+        {},
+      ],
+    ])('has no accessibility violations when %s', async (_description, componentProps, hookOverrides) => {
+      (ComplexLookupHooks.useComplexLookupField as jest.Mock).mockReturnValue({
+        ...defaultHookReturn,
+        ...hookOverrides,
+      });
+
+      const { container } = render(<ComplexLookupField onChange={mockOnChange} {...componentProps} />);
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });

src/features/complexLookup/components/ComplexLookupSelectedItem/ComplexLookupSelectedItem.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { ComplexLookupSelectedItem } from './ComplexLookupSelectedItem';
 
@@ -56,4 +57,17 @@ describe('ComplexLookupSelectedItem', () => {
     expect(container).toHaveClass('complex-lookup-selected-withWarning');
     expect(container).not.toHaveClass('complex-lookup-selected-embedded');
   });
+
+  describe('accessibility', () => {
+    test.each([
+      ['default props', {}],
+      ['noWarningValue is false', { noWarningValue: false }],
+    ])('has no accessibility violations when %s', async (_description, overrides) => {
+      const { container } = renderComponent(overrides);
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });

src/features/complexLookup/components/HubPreview/HubPreview.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { SOURCE_TYPES } from '@/common/constants/lookup.constants';
 
@@ -263,4 +264,29 @@ describe('HubPreview', () => {
       expect(screen.getByTestId('preview')).toBeInTheDocument();
     });
   });
+
+  describe('accessibility', () => {
+    const emptyPreviewData = { id: 'hub_2', resource: {} as HubResourceData };
+
+    test.each([
+      [
+        'title from meta and assign button',
+        { previewData: mockPreviewData, previewMeta: mockPreviewMeta, onAssign: mockOnAssign },
+      ],
+      ['meta is null', { previewData: mockPreviewData, previewMeta: null }],
+      ['onAssign is not provided', { previewData: mockPreviewData, previewMeta: mockPreviewMeta }],
+      [
+        'preview resource is empty object and onAssign is provided',
+        { previewData: emptyPreviewData, previewMeta: mockPreviewMeta, onAssign: mockOnAssign },
+      ],
+      ['preview resource is empty object', { previewData: emptyPreviewData, previewMeta: mockPreviewMeta }],
+      ['preview data is null', { previewData: null, previewMeta: mockPreviewMeta }],
+    ])('has no accessibility violations when %s', async (_description, overrides) => {
+      const { container } = render(<HubPreview onClose={mockOnClose} {...overrides} />);
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });

src/features/complexLookup/components/LookupModal/LookupModal.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { LookupModal } from './LookupModal';
 
@@ -101,4 +102,22 @@ describe('LookupModal', () => {
       expect(mockOnClose).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('accessibility', () => {
+    test.each([
+      ['open with string title', { isOpen: true, title: 'Test Title' }],
+      ['closed', { isOpen: false, title: 'Test Title' }],
+      ['open with ReactElement title', { isOpen: true, title: <span data-testid="custom-title">Custom Title</span> }],
+    ])('has no accessibility violations when %s', async (_description, overrides) => {
+      const { container } = render(
+        <LookupModal onClose={mockOnClose} {...overrides}>
+          <div>Test Content</div>
+        </LookupModal>,
+      );
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });

src/features/complexLookup/components/MarcPreview/MarcPreview.test.tsx

@@ -3,6 +3,7 @@ import { setInitialGlobalState } from '@/test/__mocks__/store';
 import { IntlProvider } from 'react-intl';
 
 import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { useMarcPreviewStore, useUIStore } from '@/store';
 
@@ -186,4 +187,33 @@ describe('MarcPreview', () => {
       expect(assignButton).not.toBeDisabled();
     });
   });
+
+  describe('accessibility', () => {
+    beforeEach(() => {
+      mockCheckFailedId.mockReturnValue(true);
+    });
+
+    test.each([
+      ['open with marc data and metadata', true, marcPreviewData, marcPreviewMetadata, {}],
+      ['isMarcPreviewOpen is false', false, marcPreviewData, marcPreviewMetadata, {}],
+      ['marcPreviewData is null', true, null, marcPreviewMetadata, {}],
+      ['assign button is provided', true, marcPreviewData, marcPreviewMetadata, { onAssign: mockOnAssign }],
+      [
+        'assign button is disabled via checkFailedId',
+        true,
+        marcPreviewData,
+        marcPreviewMetadata,
+        { onAssign: mockOnAssign, checkFailedId: mockCheckFailedId },
+      ],
+    ])(
+      'has no accessibility violations when %s',
+      async (_description, isMarcPreviewOpen, marcData, metadata, props) => {
+        const { container } = renderComponent(isMarcPreviewOpen, marcData, metadata, props);
+
+        const results = await axe(container);
+
+        expect(results).toHaveNoViolations();
+      },
+    );
+  });
 });

src/features/complexLookup/components/content/AuthoritiesContent.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { AuthoritiesContent } from './AuthoritiesContent';
 
@@ -310,4 +311,30 @@ describe('AuthoritiesContent', () => {
       expect(screen.queryByTestId('content-container')).not.toBeInTheDocument();
     });
   });
+
+  describe('accessibility', () => {
+    const baseProps = {
+      isMarcPreviewOpen: false,
+      isMarcLoading: false,
+      handleAuthoritiesAssign: mockHandleAuthoritiesAssign,
+      handleTitleClick: mockHandleTitleClick,
+      handleCloseMarcPreview: mockHandleCloseMarcPreview,
+    };
+
+    test.each([
+      ['result list view', {}],
+      ['result list view with checkFailedId', { checkFailedId: mockCheckFailedId }],
+      ['result list view with notSpecifiedLabel', { notSpecifiedLabel: 'Localized fallback' }],
+      ['MARC preview is loading', { isMarcPreviewOpen: true, isMarcLoading: true }],
+      ['MARC preview is open', { isMarcPreviewOpen: true }],
+      ['MARC preview is open without complex flow', { isMarcPreviewOpen: true, hasComplexFlow: false }],
+      ['MARC preview is open with checkFailedId', { isMarcPreviewOpen: true, checkFailedId: mockCheckFailedId }],
+    ])('has no accessibility violations when %s', async (_description, overrides) => {
+      const { container } = render(<AuthoritiesContent {...baseProps} {...overrides} />);
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });

src/features/complexLookup/components/content/HubsContent.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { HubsContent } from './HubsContent';
 
@@ -102,4 +103,18 @@ describe('HubsContent', () => {
       expect(screen.getByTestId('hubs-lookup-result-list')).toBeInTheDocument();
     });
   });
+
+  describe('accessibility', () => {
+    test.each([
+      ['default', {}],
+      ['handleHubTitleClick provided', { handleHubTitleClick: mockHandleHubTitleClick }],
+      ['isAssigning is true', { isAssigning: true }],
+    ])('has no accessibility violations when %s', async (_description, overrides) => {
+      const { container } = render(<HubsContent {...overrides} />);
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });

src/features/complexLookup/components/modals/AuthoritiesModal/AuthoritiesModal.test.tsx

@@ -1,6 +1,7 @@
 import { setInitialGlobalState } from '@/test/__mocks__/store';
 
 import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
 
 import { useSchemaPipeline } from '@/common/hooks/useSchemaPipeline';
 
@@ -471,4 +472,57 @@ describe('AuthoritiesModal', () => {
       });
     });
   });
+
+  describe('accessibility', () => {
+    const baseAuthoritiesModalLogicReturn = {
+      isMarcPreviewOpen: false,
+      isMarcLoading: false,
+      authoritiesData: {
+        onSegmentEnter: mockOnSegmentEnter,
+      },
+      handleTitleClick: mockHandleTitleClick,
+      handleAuthoritiesAssign: mockHandleAuthoritiesAssign,
+      handleCloseMarcPreview: mockHandleCloseMarcPreview,
+      handleResetMarcPreview: jest.fn(),
+      checkFailedId: undefined,
+      cleanup: {
+        setIsMarcPreviewOpen: mockSetIsMarcPreviewOpen,
+        resetPreview: mockResetPreview,
+        resetMarcPreviewData: mockResetComplexValue,
+        resetMarcPreviewMetadata: mockResetMetadata,
+      },
+    };
+
+    test.each([
+      ['modal open with search results', {}, {}],
+      ['modal closed', { isOpen: false }, {}],
+      ['MARC preview is open', {}, { isMarcPreviewOpen: true, isMarcLoading: false }],
+      ['MARC preview is loading', {}, { isMarcPreviewOpen: true, isMarcLoading: true }],
+      [
+        'modal config with notSpecified label',
+        {
+          modalConfig: {
+            labels: {
+              button: { base: 'ld.assignAuthority', change: 'ld.change' },
+              notSpecified: 'ld.notSpecified',
+            },
+          } as unknown as ModalConfig,
+        },
+        {},
+      ],
+    ])('has no accessibility violations when %s', async (_description, componentProps, hookOverrides) => {
+      (ComplexLookupHooks.useAuthoritiesModalLogic as jest.Mock).mockReturnValue({
+        ...baseAuthoritiesModalLogicReturn,
+        ...hookOverrides,
+      });
+
+      const { container } = render(
+        <AuthoritiesModal isOpen={true} onClose={mockOnClose} onAssign={mockOnAssign} {...componentProps} />,
+      );
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });