From ae0e36298eeab85ae6c89165ca9b14db41a34e5b Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Fri, 26 Jan 2024 14:31:33 -0500 Subject: [PATCH] LG-3878: Date Picker add current year/month selection to aria-label (#2183) * add current selection to aria label * add changeset * fix tests * address comments --------- Co-authored-by: Brooke Scarlett Yalof --- .changeset/tough-goats-jam.md | 5 +++ .../src/DatePicker/DatePicker.testutils.tsx | 16 ++++++-- .../DatePickerMenu/DatePickerMenu.spec.tsx | 23 ++++------- .../DatePickerMenu/DatePickerMenu.stories.tsx | 8 +++- .../DatePickerMenuHeader.spec.tsx | 40 ++++++++++++++----- .../DatePickerMenuHeader.tsx | 8 +++- .../DateInputBox/DateInputBox.spec.tsx | 22 ++++++---- 7 files changed, 81 insertions(+), 41 deletions(-) create mode 100644 .changeset/tough-goats-jam.md diff --git a/.changeset/tough-goats-jam.md b/.changeset/tough-goats-jam.md new file mode 100644 index 0000000000..4d88f58c0c --- /dev/null +++ b/.changeset/tough-goats-jam.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/date-picker': patch +--- + +Dynamically update the `aria-label` for the year/month select to include the current selection, enabling screen readers to announce the current selection. diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx index d8309869d5..bc54b2d64a 100644 --- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx +++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx @@ -120,10 +120,18 @@ export const renderDatePicker = ( const rightChevron = withinElement(menuContainerEl)?.queryByLabelText('Next month') || withinElement(menuContainerEl)?.queryByLabelText('Next valid month'); - const monthSelect = - withinElement(menuContainerEl)?.queryByLabelText('Select month'); - const yearSelect = - withinElement(menuContainerEl)?.queryByLabelText('Select year'); + const monthSelect = withinElement(menuContainerEl)?.queryByLabelText( + 'Select month', + { + exact: false, + }, + ); + const yearSelect = withinElement(menuContainerEl)?.queryByLabelText( + 'Select year', + { + exact: false, + }, + ); const queryCellByDate = (date: Date): HTMLTableCellElement | null => { const cell = calendarGrid?.querySelector( diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx index 088c4e73f7..95eb72ad56 100644 --- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx @@ -91,8 +91,8 @@ const renderDatePickerMenu = ( const rightChevron = result.queryByLabelText('Next month') || result.queryByLabelText('Next valid month'); - const monthSelect = result.queryByLabelText('Select month'); - const yearSelect = result.queryByLabelText('Select year'); + const monthSelect = result.queryByLabelText('Select month', { exact: false }); + const yearSelect = result.queryByLabelText('Select year', { exact: false }); return { ...result, @@ -127,23 +127,19 @@ describe('packages/date-picker/date-picker-menu', () => { expect(grid).toHaveAttribute('aria-label', 'September 2023'); }); test('chevrons have aria labels', () => { - const result = renderDatePickerMenu(); - const leftChevron = result.getByLabelText('Previous month'); - const rightChevron = result.getByLabelText('Next month'); + const { getByLabelText } = renderDatePickerMenu(); + const leftChevron = getByLabelText('Previous month'); + const rightChevron = getByLabelText('Next month'); expect(leftChevron).toBeInTheDocument(); expect(rightChevron).toBeInTheDocument(); }); test('select menu triggers have aria labels', () => { - const result = renderDatePickerMenu(); - const monthSelect = result.getByLabelText('Select month'); - const yearSelect = result.getByLabelText('Select year'); + const { monthSelect, yearSelect } = renderDatePickerMenu(); expect(monthSelect).toBeInTheDocument(); expect(yearSelect).toBeInTheDocument(); }); test('select menus have correct values', () => { - const result = renderDatePickerMenu(); - const monthSelect = result.getByLabelText('Select month'); - const yearSelect = result.getByLabelText('Select year'); + const { monthSelect, yearSelect } = renderDatePickerMenu(); expect(monthSelect).toHaveValue(Month.September.toString()); expect(yearSelect).toHaveValue('2023'); }); @@ -169,14 +165,11 @@ describe('packages/date-picker/date-picker-menu', () => { expect(grid).toHaveAttribute('aria-label', 'March 2024'); }); test('select menus have correct values', () => { - const { getByLabelText, rerenderDatePickerMenu } = + const { rerenderDatePickerMenu, monthSelect, yearSelect } = renderDatePickerMenu(); rerenderDatePickerMenu(null, { value: newUTC(2024, Month.March, 10), }); - - const monthSelect = getByLabelText('Select month'); - const yearSelect = getByLabelText('Select year'); expect(monthSelect).toHaveValue(Month.March.toString()); expect(yearSelect).toHaveValue('2024'); }); diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx index b17a0eddec..c499cbef62 100644 --- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx @@ -221,7 +221,9 @@ export const OpenMonthMenu: DatePickerMenuInteractionTestType = { play: async ctx => { const canvas = within(ctx.canvasElement.parentElement!); await canvas.findByRole('listbox'); - const monthMenu = await canvas.findByLabelText('Select month'); + const monthMenu = await canvas.findByLabelText('Select month', { + exact: false, + }); userEvent.click(monthMenu); }, }; @@ -242,7 +244,9 @@ export const OpenYearMenu: DatePickerMenuInteractionTestType = { play: async ctx => { const canvas = within(ctx.canvasElement.parentElement!); await canvas.findByRole('listbox'); - const monthMenu = await canvas.findByLabelText('Select year'); + const monthMenu = await canvas.findByLabelText('Select year', { + exact: false, + }); userEvent.click(monthMenu); }, }; diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx index 7224921344..1165f8dd6a 100644 --- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.spec.tsx @@ -50,7 +50,9 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); userEvent.click(monthSelect); @@ -87,7 +89,9 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); userEvent.click(monthSelect); @@ -125,7 +129,9 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); userEvent.click(monthSelect); @@ -161,7 +167,9 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); userEvent.click(monthSelect); @@ -196,8 +204,12 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); - const yearSelect = getByLabelText('Select year'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); + const yearSelect = getByLabelText('Select year', { + exact: false, + }); expect(monthSelect).toHaveTextContent('Jul'); expect(yearSelect).toHaveTextContent('2025'); @@ -227,7 +239,9 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); userEvent.click(monthSelect); @@ -262,8 +276,12 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); - const yearSelect = getByLabelText('Select year'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); + const yearSelect = getByLabelText('Select year', { + exact: false, + }); expect(monthSelect).toHaveTextContent('Jul'); expect(yearSelect).toHaveTextContent('2021'); @@ -317,7 +335,9 @@ describe('packages/date-picker/menu/header', () => { , ); - const monthSelect = getByLabelText('Select month'); + const monthSelect = getByLabelText('Select month', { + exact: false, + }); userEvent.click(monthSelect); await waitFor(() => { jest.advanceTimersByTime(transitionDuration.default); diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx index b4ed2b53cf..70a6023f9b 100644 --- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx @@ -123,7 +123,9 @@ export const DatePickerMenuHeader = forwardRef<