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();
+});