UILD-855: Add accessibility labels to buttons

CHANGELOG.md

@@ -14,6 +14,7 @@
 * Update language used for importing works/instances. Refs [UILD-839].
 * Fix multiple settings per profile. Refs [UILD-780].
 * Add accessibility tests. Refs [UILD-841].
+* Add accessible labels to buttons. Refs [UILD-855].
 
 [UILD-744]:https://folio-org.atlassian.net/browse/UILD-744
 [UILD-816]:https://folio-org.atlassian.net/browse/UILD-816
@@ -25,6 +26,7 @@
 [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
+[UILD-855]:https://folio-org.atlassian.net/browse/UILD-855
 
 ## 2.0.4 (2026-06-03)
 * Fix default profile type persistence across edit form and profile settings. Fixes [UILD-820].

src/components/Dropzone/DropzoneFile.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { useIntl } from 'react-intl';
 
 import { Button, ButtonType } from '@/components/Button';
 
@@ -13,6 +14,7 @@ interface Props {
 }
 
 export const DropzoneFile: FC<Props> = ({ file, onRemoveFile }) => {
+  const { formatMessage } = useIntl();
   const formatTimestamp = (timestamp: number) => {
     return new Date(timestamp).toLocaleDateString();
   };
@@ -26,7 +28,12 @@ export const DropzoneFile: FC<Props> = ({ file, onRemoveFile }) => {
         </span>
         <span className="date">{formatTimestamp(file.lastModified)}</span>
       </span>
-      <Button type={ButtonType.Icon} onClick={() => onRemoveFile(file)} data-testid="dropzone-file-remove">
+      <Button
+        type={ButtonType.Icon}
+        onClick={() => onRemoveFile(file)}
+        data-testid="dropzone-file-remove"
+        ariaLabel={formatMessage({ id: 'ld.dropzoneFileRemove' }, { filename: file.name })}
+      >
         <Trash16 />
       </Button>
     </div>

src/features/edit/components/EditSection/ProfileSettingsSelector.test.tsx

@@ -4,8 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-
-//import { axe } from 'jest-axe';
+import { axe } from 'jest-axe';
 
 import { useProfileStore } from '@/store';
 
@@ -131,7 +130,6 @@ describe('ProfileSettingsSelector', () => {
     });
   });
 
-  /* UILD-846: Dropdown toggle button profile-settings-selector-button requires an aria-label
   describe('accessibility', () => {
     test('has no accessibility violations when closed', async () => {
       mockGetRecordProfileId.mockReturnValue(mockProfileId);
@@ -155,5 +153,4 @@ describe('ProfileSettingsSelector', () => {
       expect(results).toHaveNoViolations();
     });
   });
-  */
 });

src/features/edit/components/EditSection/ProfileSettingsSelector.tsx

@@ -91,6 +91,7 @@ export const ProfileSettingsSelector = () => {
         data-testid="profile-settings-selector-button"
         ariaHaspopup="menu"
         ariaExpanded={isMenuEnabled}
+        ariaLabel={formatMessage({ id: 'ld.toggleProfileSettingsSelection' })}
         onClick={toggleIsMenuEnabled}
       >
         <Settings />

src/features/manageProfileSettings/components/ProfileSettings/ProfileSettings.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
@@ -22,6 +22,7 @@ import { ProfileSettingsList } from '../ProfileSettingsList';
 import './ProfileSettings.scss';
 
 export const ProfileSettings = () => {
+  const { formatMessage } = useIntl();
   const { setIsLoading } = useLoadingState();
   const { loadProfile } = useLoadProfile();
   const { loadProfileSettings } = useLoadProfileSettings();
@@ -106,7 +107,12 @@ export const ProfileSettings = () => {
       <div className="nav">
         <div className="nav-block nav-block-fixed-height">
           {isManageProfileSettingsBelowBreakpoint && (
-            <Button data-testid="back-to-profiles-list" type={ButtonType.Icon} onClick={handleBack}>
+            <Button
+              data-testid="back-to-profiles-list"
+              type={ButtonType.Icon}
+              onClick={handleBack}
+              ariaLabel={formatMessage({ id: 'ld.backToProfilesList' })}
+            >
               <ArrowLeftIcon />
             </Button>
           )}

src/test/__tests__/components/Dropzone.test.tsx

@@ -1,7 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-
-// import { axe } from 'jest-axe';
+import { axe } from 'jest-axe';
 
 import { Dropzone } from '@/components/Dropzone';
 
@@ -10,17 +9,16 @@ describe('Dropzone', () => {
   const acceptableFile = new File(['{}'], 'resources.json', { type: 'application/json' });
   const rejectableFile = new File([''], 'not-json.txt', { type: 'text/plain' });
 
-  // let container: HTMLElement;
+  let container: HTMLElement;
 
   beforeEach(() => {
     let files: File[] = [];
-    //let rerender: ReturnType<typeof render>['rerender'];
+    let rerender: ReturnType<typeof render>['rerender'];
     const setFiles = (f: File[]) => {
       files = f;
       rerender(<Dropzone {...{ files, setFiles }} />);
     };
-    // ({ rerender, container } = render(<Dropzone {...{ files, setFiles }} />));
-    const { rerender } = render(<Dropzone {...{ files, setFiles }} />);
+    ({ rerender, container } = render(<Dropzone {...{ files, setFiles }} />));
   });
 
   test('renders dropzone', () => {
@@ -61,13 +59,11 @@ describe('Dropzone', () => {
     expect(screen.queryByTestId('dropzone-file')).not.toBeInTheDocument();
   });
 
-  /* UILD-844: DropzoneFile remove button requires an aria-label
   describe('accessibility', () => {
     test('has no accessibility violations', async () => {
       const results = await axe(container);
 
       expect(results).toHaveNoViolations();
     });
   });
-  */
 });

src/views/ManageProfileSettings/ManageProfileSettings.test.tsx

@@ -414,7 +414,6 @@ describe('ManageProfileSettings', () => {
       expect(results).toHaveNoViolations();
     });
 
-    /* UILD-847: ProfileSettings button requires aria-label
     test('settings render has no accessibility violations', async () => {
       fireEvent.click(screen.getAllByTestId('resource-profile-item')[0]);
 
@@ -432,6 +431,5 @@ describe('ManageProfileSettings', () => {
 
       expect(results).toHaveNoViolations();
     });
-    */
   });
 });

src/views/Root/components/CommonStatus.test.tsx

@@ -3,8 +3,7 @@ import { setInitialGlobalState } from '@/test/__mocks__/store';
 import { MemoryRouter } from 'react-router-dom';
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-
-// import { axe } from 'jest-axe';
+import { axe } from 'jest-axe';
 
 import { StatusType } from '@/common/constants/status.constants';
 
@@ -123,7 +122,6 @@ describe('CommonStatus', () => {
     expect(screen.getByText('ld.rdUpdateSuccess')).toBeInTheDocument();
   });
 
-  /* // UILD-845: Message close button requires aria-label
   describe('accessibility', () => {
     test.each([
       ['no status messages', []],
@@ -143,5 +141,4 @@ describe('CommonStatus', () => {
       expect(results).toHaveNoViolations();
     });
   });
-  */
 });

src/views/Root/components/CommonStatus.tsx

@@ -80,7 +80,12 @@ export const CommonStatus: FC = () => {
           <span className="status-message-text">
             <FormattedMessage id={message as string} defaultMessage={message as string} />
           </span>
-          <Button className="status-message-close" type={ButtonType.Icon} onClick={() => deleteMessage(id)}>
+          <Button
+            className="status-message-close"
+            type={ButtonType.Icon}
+            onClick={() => deleteMessage(id)}
+            ariaLabel={formatMessage({ id: 'ld.dismissNotification' })}
+          >
             <CloseIcon />
           </Button>
         </output>

translations/ui-linked-data/en.json

@@ -294,6 +294,7 @@
   "ld.importTryAgain": "Try again",
   "ld.importTimedout": "Import failed to complete in time",
   "ld.importDefaultWorkType": "Default work type if none found",
+  "ld.dropzoneFileRemove": "Remove file {filename} from upload list",
   "ld.resourceProfile": "Resource profile",
   "ld.newType": "New {type}",
   "ld.changeTypeProfile": "Change {type} profile",
@@ -390,5 +391,8 @@
   "ld.types.books": "Books",
   "ld.types.continuingResources": "Serials Work",
   "ld.profileDefaults": "Profile Defaults",
-  "ld.preferred": "preferred"
+  "ld.preferred": "preferred",
+  "ld.dismissNotification": "Dismiss notification",
+  "ld.toggleProfileSettingsSelection": "Toggle custom profile settings selection menu",
+  "ld.backToProfilesList": "Back to profiles list"
 }