From 11ef93c5aed833f0382588f6af35003dd922bd42 Mon Sep 17 00:00:00 2001 From: Ryan Lee Date: Fri, 7 Aug 2026 21:35:29 +0000 Subject: [PATCH] UILD-855: Add accessibility labels to buttons --- CHANGELOG.md | 2 ++ src/components/Dropzone/DropzoneFile.tsx | 9 ++++++++- .../EditSection/ProfileSettingsSelector.test.tsx | 5 +---- .../EditSection/ProfileSettingsSelector.tsx | 1 + .../components/ProfileSettings/ProfileSettings.tsx | 10 ++++++++-- src/test/__tests__/components/Dropzone.test.tsx | 12 ++++-------- .../ManageProfileSettings.test.tsx | 2 -- src/views/Root/components/CommonStatus.test.tsx | 5 +---- src/views/Root/components/CommonStatus.tsx | 7 ++++++- translations/ui-linked-data/en.json | 6 +++++- 10 files changed, 36 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 09fbefb1..3aeeb169 100644 --- a/CHANGELOG.md +++ b/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]. diff --git a/src/components/Dropzone/DropzoneFile.tsx b/src/components/Dropzone/DropzoneFile.tsx index d3f135c4..18842bc3 100644 --- a/src/components/Dropzone/DropzoneFile.tsx +++ b/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 = ({ file, onRemoveFile }) => { + const { formatMessage } = useIntl(); const formatTimestamp = (timestamp: number) => { return new Date(timestamp).toLocaleDateString(); }; @@ -26,7 +28,12 @@ export const DropzoneFile: FC = ({ file, onRemoveFile }) => { {formatTimestamp(file.lastModified)} - diff --git a/src/features/edit/components/EditSection/ProfileSettingsSelector.test.tsx b/src/features/edit/components/EditSection/ProfileSettingsSelector.test.tsx index 063c619b..10deb443 100644 --- a/src/features/edit/components/EditSection/ProfileSettingsSelector.test.tsx +++ b/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(); }); }); - */ }); diff --git a/src/features/edit/components/EditSection/ProfileSettingsSelector.tsx b/src/features/edit/components/EditSection/ProfileSettingsSelector.tsx index e6218486..7b90d9f2 100644 --- a/src/features/edit/components/EditSection/ProfileSettingsSelector.tsx +++ b/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} > diff --git a/src/features/manageProfileSettings/components/ProfileSettings/ProfileSettings.tsx b/src/features/manageProfileSettings/components/ProfileSettings/ProfileSettings.tsx index c60c464a..a4a8ebaf 100644 --- a/src/features/manageProfileSettings/components/ProfileSettings/ProfileSettings.tsx +++ b/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 = () => {
{isManageProfileSettingsBelowBreakpoint && ( - )} diff --git a/src/test/__tests__/components/Dropzone.test.tsx b/src/test/__tests__/components/Dropzone.test.tsx index 06638b10..73013774 100644 --- a/src/test/__tests__/components/Dropzone.test.tsx +++ b/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['rerender']; + let rerender: ReturnType['rerender']; const setFiles = (f: File[]) => { files = f; rerender(); }; - // ({ rerender, container } = render()); - const { rerender } = render(); + ({ rerender, container } = render()); }); test('renders dropzone', () => { @@ -61,7 +59,6 @@ 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); @@ -69,5 +66,4 @@ describe('Dropzone', () => { expect(results).toHaveNoViolations(); }); }); - */ }); diff --git a/src/views/ManageProfileSettings/ManageProfileSettings.test.tsx b/src/views/ManageProfileSettings/ManageProfileSettings.test.tsx index ade2ff4c..1c485f80 100644 --- a/src/views/ManageProfileSettings/ManageProfileSettings.test.tsx +++ b/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(); }); - */ }); }); diff --git a/src/views/Root/components/CommonStatus.test.tsx b/src/views/Root/components/CommonStatus.test.tsx index 87018e2f..a5f6ac42 100644 --- a/src/views/Root/components/CommonStatus.test.tsx +++ b/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(); }); }); - */ }); diff --git a/src/views/Root/components/CommonStatus.tsx b/src/views/Root/components/CommonStatus.tsx index 2add4927..0366d8e4 100644 --- a/src/views/Root/components/CommonStatus.tsx +++ b/src/views/Root/components/CommonStatus.tsx @@ -80,7 +80,12 @@ export const CommonStatus: FC = () => { - diff --git a/translations/ui-linked-data/en.json b/translations/ui-linked-data/en.json index b098a046..91eb1612 100644 --- a/translations/ui-linked-data/en.json +++ b/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" }