diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 64384afb4c4..59f320ee62c 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -345,7 +345,9 @@ export const CalendarMonth = ({ tabIndex={isFocused ? 0 : -1} disabled={!isValid} aria-label={ - cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}` + cellAriaLabel + ? cellAriaLabel(date) + : `${dayFormat(date)} ${monthFormat(date)} ${yearFormat(date)}` } {...(isFocused && { ref: focusRef })} > diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx index 7b70b282eda..a5d5214408e 100644 --- a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx +++ b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx @@ -12,7 +12,7 @@ test('Renders the first date in a month when a custom weekStart is passed', () = render(); - const firstDate = screen.queryByRole('button', { name: '1 January 2023' }); + const firstDate = screen.getByRole('button', { name: '1 January 2023' }); expect(firstDate).toBeVisible(); }); @@ -24,6 +24,34 @@ test('Renders the last date in a month when a custom weekStart is passed', () => render(); - const lastDate = screen.queryByRole('button', { name: '31 January 2023' }); + const lastDate = screen.getByRole('button', { name: '31 January 2023' }); expect(lastDate).toBeVisible(); }); + +test('Previous month dates have correct month in aria label', () => { + render(); + + const previousMonthDate = screen.getByRole('button', { name: '31 May 2024' }); + expect(previousMonthDate).toBeVisible(); +}); + +test('Next month dates have correct month in aria label', () => { + render(); + + const nextMonthDate = screen.getByRole('button', { name: '1 August 2024' }); + expect(nextMonthDate).toBeVisible(); +}); + +test('Previous year dates have correct year in aria label', () => { + render(); + + const previousYearDate = screen.getByRole('button', { name: '31 December 2023' }); + expect(previousYearDate).toBeVisible(); +}); + +test('Next year dates have correct year in aria label', () => { + render(); + + const nextYearDate = screen.getByRole('button', { name: '1 January 2025' }); + expect(nextYearDate).toBeVisible(); +});