@instructure/ui-calendar 11.7.4-snapshot-0 → 11.7.4-snapshot-3

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-0) (2026-05-08)
+## [11.7.4-snapshot-3](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-3) (2026-05-12)
 
-**Note:** Version bump only for package @instructure/ui-calendar
+
+### Bug Fixes
+
+* **ui-dialog,ui-date-input,ui-calendar:** add aria-live to calendar header, descriptive nav button labels with target month, aria-modal on focused dialogs ([8de1026](https://github.com/instructure/instructure-ui/commit/8de102636517415d2905bb40b914147f330aaed1))
 
 
 

package/es/Calendar/v1/index.js

@@ -115,24 +115,37 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       renderNextMonthButton,
       renderPrevMonthButton
     } = this.props;
+    const {
+      visibleMonth
+    } = this.state;
+    const prevMonthName = visibleMonth.clone().subtract({
+      months: 1
+    }).format('MMMM YYYY');
+    const nextMonthName = visibleMonth.clone().add({
+      months: 1
+    }).format('MMMM YYYY');
     return {
-      prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton) : _jsx(IconButton, {
+      prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton, {
+        targetMonthSrLabel: prevMonthName
+      }) : _jsx(IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: _jsx(IconArrowOpenStartSolid, {
           color: "primary"
         }),
-        screenReaderLabel: "Previous month"
+        screenReaderLabel: `Previous month, ${prevMonthName}`
       }),
-      nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _jsx(IconButton, {
+      nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton, {
+        targetMonthSrLabel: nextMonthName
+      }) : _jsx(IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: _jsx(IconArrowOpenEndSolid, {
           color: "primary"
         }),
-        screenReaderLabel: "Next month"
+        screenReaderLabel: `Next month, ${nextMonthName}`
       })
     };
   };
@@ -225,7 +238,9 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return _jsxs("div", {
       children: [_jsxs("div", {
         css: style,
-        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : _jsxs("span", {
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : _jsxs("div", {
+          "aria-live": "polite",
+          "aria-atomic": "true",
           children: [_jsx("div", {
             children: visibleMonth.format('MMMM')
           }), !withYearPicker ? _jsx("div", {

package/es/Calendar/v2/index.js

@@ -114,24 +114,37 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
       renderNextMonthButton,
       renderPrevMonthButton
     } = this.props;
+    const {
+      visibleMonth
+    } = this.state;
+    const prevMonthName = visibleMonth.clone().subtract({
+      months: 1
+    }).format('MMMM YYYY');
+    const nextMonthName = visibleMonth.clone().add({
+      months: 1
+    }).format('MMMM YYYY');
     return {
-      prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton) : _jsx(IconButton, {
+      prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton, {
+        targetMonthSrLabel: prevMonthName
+      }) : _jsx(IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: _jsx(ChevronLeftInstUIIcon, {
           color: "baseColor"
         }),
-        screenReaderLabel: "Previous month"
+        screenReaderLabel: `Previous month, ${prevMonthName}`
       }),
-      nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _jsx(IconButton, {
+      nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton, {
+        targetMonthSrLabel: nextMonthName
+      }) : _jsx(IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: _jsx(ChevronRightInstUIIcon, {
           color: "baseColor"
         }),
-        screenReaderLabel: "Next month"
+        screenReaderLabel: `Next month, ${nextMonthName}`
       })
     };
   };
@@ -224,17 +237,20 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
     return _jsxs("div", {
       children: [_jsxs("div", {
         css: style,
-        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : _jsxs("span", {
-          children: [_jsx("div", {
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : _jsxs("h2", {
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          css: styles?.navigationLabel,
+          children: [_jsx("span", {
             children: visibleMonth.format('MMMM')
-          }), !withYearPicker ? _jsx("div", {
+          }), !withYearPicker ? _jsx("span", {
             children: visibleMonth.format('YYYY')
           }) : null]
         }), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))]
       }), withYearPicker ? _jsx("div", {
         css: styles?.yearPicker,
         children: _jsx(SimpleSelect, {
-          width: "90px",
+          width: "95px",
           renderLabel: "",
           placeholder: "--",
           assistiveText: withYearPicker.screenReaderLabel,

package/es/Calendar/v2/styles.js

@@ -57,6 +57,15 @@ const generateStyle = (componentTheme, props) => {
       maxWidth: componentTheme.maxHeaderWidth,
       lineHeight: componentTheme.lineHeight
     },
+    navigationLabel: {
+      label: 'calendar__navigation-label',
+      margin: 0,
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
+      '& span': {
+        display: 'block'
+      }
+    },
     yearPicker: {
       display: 'flex',
       justifyContent: 'center',

package/lib/Calendar/v1/index.js

@@ -126,24 +126,37 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
       renderNextMonthButton,
       renderPrevMonthButton
     } = this.props;
+    const {
+      visibleMonth
+    } = this.state;
+    const prevMonthName = visibleMonth.clone().subtract({
+      months: 1
+    }).format('MMMM YYYY');
+    const nextMonthName = visibleMonth.clone().add({
+      months: 1
+    }).format('MMMM YYYY');
     return {
-      prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton) : (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
+      prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton, {
+        targetMonthSrLabel: prevMonthName
+      }) : (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: (0, _jsxRuntime.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
           color: "primary"
         }),
-        screenReaderLabel: "Previous month"
+        screenReaderLabel: `Previous month, ${prevMonthName}`
       }),
-      nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton) : (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
+      nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton, {
+        targetMonthSrLabel: nextMonthName
+      }) : (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
           color: "primary"
         }),
-        screenReaderLabel: "Next month"
+        screenReaderLabel: `Next month, ${nextMonthName}`
       })
     };
   };
@@ -236,7 +249,9 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
     return (0, _jsxRuntime.jsxs)("div", {
       children: [(0, _jsxRuntime.jsxs)("div", {
         css: style,
-        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("span", {
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("div", {
+          "aria-live": "polite",
+          "aria-atomic": "true",
           children: [(0, _jsxRuntime.jsx)("div", {
             children: visibleMonth.format('MMMM')
           }), !withYearPicker ? (0, _jsxRuntime.jsx)("div", {

package/lib/Calendar/v2/index.js

@@ -124,24 +124,37 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
       renderNextMonthButton,
       renderPrevMonthButton
     } = this.props;
+    const {
+      visibleMonth
+    } = this.state;
+    const prevMonthName = visibleMonth.clone().subtract({
+      months: 1
+    }).format('MMMM YYYY');
+    const nextMonthName = visibleMonth.clone().add({
+      months: 1
+    }).format('MMMM YYYY');
     return {
-      prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton) : (0, _jsxRuntime.jsx)(_latest2.IconButton, {
+      prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton, {
+        targetMonthSrLabel: prevMonthName
+      }) : (0, _jsxRuntime.jsx)(_latest2.IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: (0, _jsxRuntime.jsx)(_uiIcons.ChevronLeftInstUIIcon, {
           color: "baseColor"
         }),
-        screenReaderLabel: "Previous month"
+        screenReaderLabel: `Previous month, ${prevMonthName}`
       }),
-      nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton) : (0, _jsxRuntime.jsx)(_latest2.IconButton, {
+      nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton, {
+        targetMonthSrLabel: nextMonthName
+      }) : (0, _jsxRuntime.jsx)(_latest2.IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         renderIcon: (0, _jsxRuntime.jsx)(_uiIcons.ChevronRightInstUIIcon, {
           color: "baseColor"
         }),
-        screenReaderLabel: "Next month"
+        screenReaderLabel: `Next month, ${nextMonthName}`
       })
     };
   };
@@ -234,17 +247,20 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
     return (0, _jsxRuntime.jsxs)("div", {
       children: [(0, _jsxRuntime.jsxs)("div", {
         css: style,
-        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("span", {
-          children: [(0, _jsxRuntime.jsx)("div", {
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("h2", {
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          css: styles?.navigationLabel,
+          children: [(0, _jsxRuntime.jsx)("span", {
             children: visibleMonth.format('MMMM')
-          }), !withYearPicker ? (0, _jsxRuntime.jsx)("div", {
+          }), !withYearPicker ? (0, _jsxRuntime.jsx)("span", {
             children: visibleMonth.format('YYYY')
           }) : null]
         }), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))]
       }), withYearPicker ? (0, _jsxRuntime.jsx)("div", {
         css: styles?.yearPicker,
         children: (0, _jsxRuntime.jsx)(_latest3.SimpleSelect, {
-          width: "90px",
+          width: "95px",
           renderLabel: "",
           placeholder: "--",
           assistiveText: withYearPicker.screenReaderLabel,

package/lib/Calendar/v2/styles.js

@@ -63,6 +63,15 @@ const generateStyle = (componentTheme, props) => {
       maxWidth: componentTheme.maxHeaderWidth,
       lineHeight: componentTheme.lineHeight
     },
+    navigationLabel: {
+      label: 'calendar__navigation-label',
+      margin: 0,
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
+      '& span': {
+        display: 'block'
+      }
+    },
     yearPicker: {
       display: 'flex',
       justifyContent: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "11.7.4-snapshot-0",
+  "version": "11.7.4-snapshot-3",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.4-snapshot-0",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-0",
-    "@instructure/shared-types": "11.7.4-snapshot-0",
-    "@instructure/ui-buttons": "11.7.4-snapshot-0",
-    "@instructure/emotion": "11.7.4-snapshot-0",
-    "@instructure/ui-i18n": "11.7.4-snapshot-0",
-    "@instructure/ui-icons": "11.7.4-snapshot-0",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-0",
-    "@instructure/ui-simple-select": "11.7.4-snapshot-0",
-    "@instructure/ui-themes": "11.7.4-snapshot-0",
-    "@instructure/ui-utils": "11.7.4-snapshot-0",
-    "@instructure/ui-view": "11.7.4-snapshot-0",
-    "@instructure/uid": "11.7.4-snapshot-0"
+    "@instructure/console": "11.7.4-snapshot-3",
+    "@instructure/shared-types": "11.7.4-snapshot-3",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-3",
+    "@instructure/ui-buttons": "11.7.4-snapshot-3",
+    "@instructure/ui-i18n": "11.7.4-snapshot-3",
+    "@instructure/emotion": "11.7.4-snapshot-3",
+    "@instructure/ui-icons": "11.7.4-snapshot-3",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-3",
+    "@instructure/ui-simple-select": "11.7.4-snapshot-3",
+    "@instructure/ui-themes": "11.7.4-snapshot-3",
+    "@instructure/ui-view": "11.7.4-snapshot-3",
+    "@instructure/ui-utils": "11.7.4-snapshot-3",
+    "@instructure/uid": "11.7.4-snapshot-3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-0",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-0"
+    "@instructure/ui-color-utils": "11.7.4-snapshot-3",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-3"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Calendar/v1/index.tsx

@@ -175,28 +175,41 @@ class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderMonthNavigationButtons = () => {
     const { renderNextMonthButton, renderPrevMonthButton } = this.props
+    const { visibleMonth } = this.state
+    const prevMonthName = visibleMonth
+      .clone()
+      .subtract({ months: 1 })
+      .format('MMMM YYYY')
+    const nextMonthName = visibleMonth
+      .clone()
+      .add({ months: 1 })
+      .format('MMMM YYYY')
 
     return {
       prevButton: renderPrevMonthButton ? (
-        callRenderProp(renderPrevMonthButton)
+        callRenderProp(renderPrevMonthButton, {
+          targetMonthSrLabel: prevMonthName
+        })
       ) : (
         <IconButton
           size="small"
           withBackground={false}
           withBorder={false}
           renderIcon={<IconArrowOpenStartSolid color="primary" />}
-          screenReaderLabel="Previous month"
+          screenReaderLabel={`Previous month, ${prevMonthName}`}
         />
       ),
       nextButton: renderNextMonthButton ? (
-        callRenderProp(renderNextMonthButton)
+        callRenderProp(renderNextMonthButton, {
+          targetMonthSrLabel: nextMonthName
+        })
       ) : (
         <IconButton
           size="small"
           withBackground={false}
           withBorder={false}
           renderIcon={<IconArrowOpenEndSolid color="primary" />}
-          screenReaderLabel="Next month"
+          screenReaderLabel={`Next month, ${nextMonthName}`}
         />
       )
     }
@@ -299,12 +312,12 @@ class Calendar extends Component<CalendarProps, CalendarState> {
           {renderNavigationLabel ? (
             callRenderProp(renderNavigationLabel)
           ) : (
-            <span>
+            <div aria-live="polite" aria-atomic="true">
               <div>{visibleMonth.format('MMMM')}</div>
               {!withYearPicker ? (
                 <div>{visibleMonth.format('YYYY')}</div>
               ) : null}
-            </span>
+            </div>
           )}
           {nextButton &&
             cloneButton(nextButton, this.handleMonthChange('next'))}

package/src/Calendar/v1/props.ts

@@ -98,19 +98,23 @@ type CalendarOwnProps = {
    */
   renderNavigationLabel?: Renderable
   /**
-   * A button to render in the navigation header. The recommendation is to
-   * compose it with the [IconButton](IconButton) component by setting the `size`
-   * prop to `small`, `withBorder` and `withBackground` to `false`, and setting
-   * `renderIcon` to [IconArrowOpenEnd](icons).
-   */
-  renderNextMonthButton?: Renderable
-  /**
-   * A button to render in the navigation header. The recommendation is to
-   * compose it with the [IconButton](Button) component by setting the `size`
-   * prop to `small`, `withBorder` and `withBackground` to `false`, and setting
-   * `renderIcon` to [IconArrowOpenStart](icons).
-   */
-  renderPrevMonthButton?: Renderable
+   * A button to render in the navigation header.
+   * When passed as a function, receives `{ targetMonthSrLabel }` —
+   * a pre-formatted screen reader label for the target month (e.g. "November 2023").
+   * The recommendation is to compose it with the [IconButton](Button) component
+   * by setting the `size` prop to `small`, `withBorder` and `withBackground` to `false`,
+   * and setting `renderIcon` to [IconArrowOpenStart](icons).
+   */
+  renderNextMonthButton?: Renderable<{ targetMonthSrLabel: string }>
+  /**
+   * A button to render in the navigation header.
+   * When passed as a function, receives `{ targetMonthSrLabel }` —
+   * a pre-formatted screen reader label for the target month (e.g. "November 2023").
+   * The recommendation is to compose it with the [IconButton](Button) component
+   * by setting the `size` prop to `small`, `withBorder` and `withBackground` to `false`,
+   * and setting `renderIcon` to [IconArrowOpenStart](icons).
+   */
+  renderPrevMonthButton?: Renderable<{ targetMonthSrLabel: string }>
   /**
    * An array of labels containing the name of each day of the week. The visible
    * portion of the label should be abbreviated (no longer than three characters).

package/src/Calendar/v2/README.md

@@ -174,23 +174,26 @@ type: example
 
     const date = parseDate(renderedDate)
 
-    const buttonProps = (type = 'prev') => ({
-      size: 'small',
-      withBackground: false,
-      withBorder: false,
-      renderIcon:
-        type === 'prev' ? (
-          <ChevronLeftInstUIIcon color="baseColor" />
-        ) : (
-          <ChevronRightInstUIIcon color="baseColor" />
-        ),
-      screenReaderLabel: type === 'prev' ? 'Previous month' : 'Next month'
-    })
+    const renderMonthButton = (type = 'prev') => ({ targetMonthSrLabel }) => (
+      <IconButton
+        size="small"
+        withBackground={false}
+        withBorder={false}
+        renderIcon={
+          type === 'prev' ? (
+            <ChevronLeftInstUIIcon color="baseColor" />
+          ) : (
+            <ChevronRightInstUIIcon color="baseColor" />
+          )
+        }
+        screenReaderLabel={`${type === 'prev' ? 'Previous month' : 'Next month'}, ${targetMonthSrLabel}`}
+      />
+    )
 
     return (
       <Calendar
-        renderPrevMonthButton={<IconButton {...buttonProps('prev')} />}
-        renderNextMonthButton={<IconButton {...buttonProps('next')} />}
+        renderPrevMonthButton={renderMonthButton('prev')}
+        renderNextMonthButton={renderMonthButton('next')}
         renderNavigationLabel={
           <span>
             <div>{date.format('MMMM')}</div>
@@ -251,7 +254,4 @@ the abbreviation. ex. `[<AccessibleContent alt="Sunday">Sun</AccessibleContent>,
 
 #### Rendering next and previous month buttons
 
-The `renderNextMonthButton` and `renderPrevMonthButton` can be supplied using the
-[IconButton](IconButton) component with the `size` prop set to
-`small`, the `withBackground` and `withBorder` props both set to `false`, and the `renderIcon` prop set to `ChevronLeftInstUIIcon` or
-`ChevronRightInstUIIcon`.
+The `renderNextMonthButton` and `renderPrevMonthButton` can be supplied as a function that receives `{ targetMonthSrLabel }` — a pre-formatted screen reader label for the target month (e.g. "November 2023"). Use this to compose an [IconButton](IconButton) component with the `size` prop set to `small`, the `withBackground` and `withBorder` props both set to `false`, and the `renderIcon` prop set to `ChevronLeftInstUIIcon` or `ChevronRightInstUIIcon`. The `screenReaderLabel` should include the target month for better accessibility: e.g. "Previous month, November 2023".

package/src/Calendar/v2/index.tsx

@@ -174,28 +174,41 @@ class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderMonthNavigationButtons = () => {
     const { renderNextMonthButton, renderPrevMonthButton } = this.props
+    const { visibleMonth } = this.state
+    const prevMonthName = visibleMonth
+      .clone()
+      .subtract({ months: 1 })
+      .format('MMMM YYYY')
+    const nextMonthName = visibleMonth
+      .clone()
+      .add({ months: 1 })
+      .format('MMMM YYYY')
 
     return {
       prevButton: renderPrevMonthButton ? (
-        callRenderProp(renderPrevMonthButton)
+        callRenderProp(renderPrevMonthButton, {
+          targetMonthSrLabel: prevMonthName
+        })
       ) : (
         <IconButton
           size="small"
           withBackground={false}
           withBorder={false}
           renderIcon={<ChevronLeftInstUIIcon color="baseColor" />}
-          screenReaderLabel="Previous month"
+          screenReaderLabel={`Previous month, ${prevMonthName}`}
         />
       ),
       nextButton: renderNextMonthButton ? (
-        callRenderProp(renderNextMonthButton)
+        callRenderProp(renderNextMonthButton, {
+          targetMonthSrLabel: nextMonthName
+        })
       ) : (
         <IconButton
           size="small"
           withBackground={false}
           withBorder={false}
           renderIcon={<ChevronRightInstUIIcon color="baseColor" />}
-          screenReaderLabel="Next month"
+          screenReaderLabel={`Next month, ${nextMonthName}`}
         />
       )
     }
@@ -298,12 +311,16 @@ class Calendar extends Component<CalendarProps, CalendarState> {
           {renderNavigationLabel ? (
             callRenderProp(renderNavigationLabel)
           ) : (
-            <span>
-              <div>{visibleMonth.format('MMMM')}</div>
+            <h2
+              aria-live="polite"
+              aria-atomic="true"
+              css={styles?.navigationLabel}
+            >
+              <span>{visibleMonth.format('MMMM')}</span>
               {!withYearPicker ? (
-                <div>{visibleMonth.format('YYYY')}</div>
+                <span>{visibleMonth.format('YYYY')}</span>
               ) : null}
-            </span>
+            </h2>
           )}
           {nextButton &&
             cloneButton(nextButton, this.handleMonthChange('next'))}
@@ -312,7 +329,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
         {withYearPicker ? (
           <div css={styles?.yearPicker}>
             <SimpleSelect
-              width="90px"
+              width="95px"
               renderLabel=""
               placeholder="--"
               assistiveText={withYearPicker.screenReaderLabel}

package/src/Calendar/v2/props.ts

@@ -98,19 +98,23 @@ type CalendarOwnProps = {
    */
   renderNavigationLabel?: Renderable
   /**
-   * A button to render in the navigation header. The recommendation is to
-   * compose it with the [IconButton](IconButton) component by setting the `size`
-   * prop to `small`, `withBorder` and `withBackground` to `false`, and setting
-   * `renderIcon` to [IconArrowOpenEnd](icons).
+   * A button to render in the navigation header.
+   * When passed as a function, receives `{ targetMonthSrLabel }` —
+   * a pre-formatted screen reader label for the target month (e.g. "January 2024").
+   * The recommendation is to compose it with the [IconButton](Button) component
+   * by setting the `size` prop to `small`, `withBorder` and `withBackground` to `false`,
+   * and setting `renderIcon` to [IconArrowOpenEnd](icons).
    */
-  renderNextMonthButton?: Renderable
+  renderNextMonthButton?: Renderable<{ targetMonthSrLabel: string }>
   /**
-   * A button to render in the navigation header. The recommendation is to
-   * compose it with the [IconButton](Button) component by setting the `size`
-   * prop to `small`, `withBorder` and `withBackground` to `false`, and setting
-   * `renderIcon` to [IconArrowOpenStart](icons).
+   * A button to render in the navigation header.
+   * When passed as a function, receives `{ targetMonthSrLabel }` —
+   * a pre-formatted screen reader label for the target month (e.g. "November 2023").
+   * The recommendation is to compose it with the [IconButton](Button) component
+   * by setting the `size` prop to `small`, `withBorder` and `withBackground` to `false`,
+   * and setting `renderIcon` to [IconArrowOpenStart](icons).
    */
-  renderPrevMonthButton?: Renderable
+  renderPrevMonthButton?: Renderable<{ targetMonthSrLabel: string }>
   /**
    * An array of labels containing the name of each day of the week. The visible
    * portion of the label should be abbreviated (no longer than three characters).
@@ -182,7 +186,11 @@ type CalendarProps = CalendarOwnProps &
   WithDeterministicIdProps
 
 type CalendarStyle = ComponentStyle<
-  'navigation' | 'navigationWithButtons' | 'weekdayHeader' | 'yearPicker'
+  | 'navigation'
+  | 'navigationWithButtons'
+  | 'navigationLabel'
+  | 'weekdayHeader'
+  | 'yearPicker'
 >
 const allowedProps: AllowedPropKeys = [
   'as',

package/src/Calendar/v2/styles.ts

@@ -63,6 +63,15 @@ const generateStyle = (
       maxWidth: componentTheme.maxHeaderWidth,
       lineHeight: componentTheme.lineHeight
     },
+    navigationLabel: {
+      label: 'calendar__navigation-label',
+      margin: 0,
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
+      '& span': {
+        display: 'block'
+      }
+    },
     yearPicker: {
       display: 'flex',
       justifyContent: 'center',