Adjust tests to provide any needed label context for accessibility checks. Remove tests on wrappers. Remove unnecessary format / input mocks interfering with tests. Add aria-labelledby to Dropzone input. Comment out tests that need fixes and note which story should fix them.

Author: zepheiryan

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-lock.json

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

@@ -35,12 +35,6 @@ jest.mock('../ComplexLookupSelectedItem', () => ({
   ),
 }));
 
-jest.mock('@/components/Input', () => ({
-  Input: ({ value, disabled, ...props }: { value?: string; disabled?: boolean; [key: string]: unknown }) => (
-    <input value={value} disabled={disabled} {...props} />
-  ),
-}));
-
 const MockModal = ({
   isOpen,
   onClose,
@@ -68,9 +62,10 @@ describe('ComplexLookupField', () => {
   const mockHandleAssign = jest.fn();
   const mockHandleDelete = jest.fn();
 
+  const testHtmlId = 'test-html-id';
   const defaultEntry: SchemaEntry = {
     uuid: 'test-uuid',
-    htmlId: 'test-html-id',
+    htmlId: testHtmlId,
     layout: {
       api: ComplexLookupType.Hub,
       isNew: true,
@@ -323,7 +318,12 @@ describe('ComplexLookupField', () => {
         ...hookOverrides,
       });
 
-      const { container } = render(<ComplexLookupField onChange={mockOnChange} {...componentProps} />);
+      const { container } = render(
+        <div>
+          <div id={testHtmlId}>{testHtmlId}</div>
+          <ComplexLookupField onChange={mockOnChange} {...componentProps} />
+        </div>,
+      );
 
       const results = await axe(container);