UILD-841: Add jest-axe for base accessibility tests

CHANGELOG.md

@@ -13,6 +13,7 @@
 * Fix field collision in the record generation. Fixes [UILD-838].
 * Update language used for importing works/instances. Refs [UILD-839].
 * Fix multiple settings per profile. Refs [UILD-780].
+* Add accessibility tests. Refs [UILD-841].
 
 [UILD-744]:https://folio-org.atlassian.net/browse/UILD-744
 [UILD-816]:https://folio-org.atlassian.net/browse/UILD-816
@@ -23,6 +24,7 @@
 [UILD-838]:https://folio-org.atlassian.net/browse/UILD-838
 [UILD-839]:https://folio-org.atlassian.net/browse/UILD-839
 [UILD-780]:https://folio-org.atlassian.net/browse/UILD-780
+[UILD-841]:https://folio-org.atlassian.net/browse/UILD-841
 
 ## 2.0.4 (2026-06-03)
 * Fix default profile type persistence across edit form and profile settings. Fixes [UILD-820].

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/components/Dropzone/Drop.tsx

@@ -19,13 +19,13 @@ export const Drop: FC<Props> = ({ getRootProps, getInputProps, isDragActive }) =
       {...getRootProps()}
       data-testid="dropzone"
     >
-      <input {...getInputProps()} data-testid="dropzone-file-input" />
+      <input {...getInputProps()} data-testid="dropzone-file-input" aria-labelledby="import-instructions" />
       {isDragActive ? (
         <div>
           <FormattedMessage id="ld.importFileDrop" />
         </div>
       ) : (
-        <div>
+        <div id="import-instructions">
           <FormattedMessage id="ld.importFileInstructions" />
           <div className="choose">
             <Button type={ButtonType.Highlighted} onClick={() => {}}>

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,27 @@ 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();
+    });
+
+    test('has no accessibility violations when clicking dropdown', async () => {
+      const { container, getByTestId } = renderWithState(baseMockState);
+
+      fireEvent.click(getByTestId('preview-actions-dropdown'));
+
+      const results = await axe(container);
+
+      expect(results).toHaveNoViolations();
+    });
+  });
 });