@instructure/ui-calendar 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.4-pr-snapshot-1781695314229](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-pr-snapshot-1781695314229) (2026-06-17)
+
+
+### 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 ([ac11880](https://github.com/instructure/instructure-ui/commit/ac11880013be74f148558671177ed25c9286204f))
+
+
+
+
+
 ## [11.7.3](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3) (2026-05-07)
 
 

package/LICENSE.md

@@ -2,6 +2,7 @@
 title: The MIT License (MIT)
 category: Getting Started
 order: 9
+isWIP: true
 ---
 
 # The MIT License (MIT)

package/{lib/Calendar/v1/Day/props.js → babel.config.cjs}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +22,15 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'selectedLabel', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
+module.exports = {
+  presets: [
+    [
+      require('@instructure/ui-babel-preset'),
+      {
+        esModules: Boolean(process.env.ES_MODULES),
+        removeConsole: process.env.NODE_ENV === 'production',
+        transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+      }
+    ]
+  ]
+}

package/es/Calendar/v1/Day/index.js

@@ -28,9 +28,9 @@ import { View } from '@instructure/ui-view/v11_6';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { omitProps, callRenderProp, getElementType } from '@instructure/ui-react-utils';
 import { withStyle } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import generateComponentTheme from './theme.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -39,7 +39,7 @@ id: Calendar.Day
 ---
  **/
 let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Day extends Component {
-  static displayName = "Day";
+  static displayName = 'Day';
   static componentId = 'Calendar.Day';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Calendar/v1/index.js

@@ -31,10 +31,10 @@ import { logError as error } from '@instructure/console';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { withStyle } from '@instructure/emotion';
 import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import { Day } from "./Day/index.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import generateComponentTheme from './theme.js';
+import { Day } from './Day/index.js';
+import { allowedProps } from './props.js';
 import { IconButton } from '@instructure/ui-buttons/v11_6';
 import { IconArrowOpenStartSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
 import { SimpleSelect } from '@instructure/ui-simple-select/v11_6';
@@ -46,7 +46,7 @@ category: components
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Calendar extends Component {
-  static displayName = "Calendar";
+  static displayName = 'Calendar';
   static componentId = 'Calendar';
   static contextType = ApplyLocaleContext;
   static Day = Day;
@@ -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/Day/index.js

@@ -28,8 +28,8 @@ import { View } from '@instructure/ui-view/latest';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { omitProps, callRenderProp, getElementType } from '@instructure/ui-react-utils';
 import { withStyleNew } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -38,7 +38,7 @@ id: Calendar.Day
 ---
  **/
 let Day = (_dec = withStyleNew(generateStyle), _dec(_class = class Day extends Component {
-  static displayName = "Day";
+  static displayName = 'Day';
   static componentId = 'Calendar.Day';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Calendar/v2/index.js

@@ -31,9 +31,9 @@ import { logError as error } from '@instructure/console';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { withStyleNew } from '@instructure/emotion';
 import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n';
-import generateStyle from "./styles.js";
-import { Day } from "./Day/index.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { Day } from './Day/index.js';
+import { allowedProps } from './props.js';
 import { IconButton } from '@instructure/ui-buttons/latest';
 import { ChevronLeftInstUIIcon, ChevronRightInstUIIcon } from '@instructure/ui-icons';
 import { SimpleSelect } from '@instructure/ui-simple-select/latest';
@@ -45,7 +45,7 @@ category: components
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let Calendar = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle), _dec(_class = _dec2(_class = class Calendar extends Component {
-  static displayName = "Calendar";
+  static displayName = 'Calendar';
   static componentId = 'Calendar';
   static contextType = ApplyLocaleContext;
   static Day = Day;
@@ -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/es/exports/a.js

@@ -21,5 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Calendar } from "../Calendar/v1/index.js";
-export { Day as CalendarDay } from "../Calendar/v1/Day/index.js";
+export { Calendar } from '../Calendar/v1/index.js';
+export { Day as CalendarDay } from '../Calendar/v1/Day/index.js';

package/es/exports/b.js

@@ -21,5 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Calendar } from "../Calendar/v2/index.js";
-export { Day as CalendarDay } from "../Calendar/v2/Day/index.js";
+export { Calendar } from '../Calendar/v2/index.js';
+export { Day as CalendarDay } from '../Calendar/v2/Day/index.js';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "11.7.3",
+  "version": "11.7.4-pr-snapshot-1781695314229",
+  "type": "module",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
-  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/emotion": "11.7.3",
-    "@instructure/shared-types": "11.7.3",
-    "@instructure/console": "11.7.3",
-    "@instructure/ui-buttons": "11.7.3",
-    "@instructure/ui-a11y-content": "11.7.3",
-    "@instructure/ui-react-utils": "11.7.3",
-    "@instructure/ui-simple-select": "11.7.3",
-    "@instructure/ui-themes": "11.7.3",
-    "@instructure/ui-icons": "11.7.3",
-    "@instructure/ui-utils": "11.7.3",
-    "@instructure/ui-view": "11.7.3",
-    "@instructure/uid": "11.7.3",
-    "@instructure/ui-i18n": "11.7.3"
+    "@instructure/console": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/emotion": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-a11y-content": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-buttons": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/shared-types": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-i18n": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-react-utils": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-icons": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-simple-select": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-themes": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-utils": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-view": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/uid": "11.7.4-pr-snapshot-1781695314229"
   },
   "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.3",
-    "@instructure/ui-color-utils": "11.7.3"
+    "@instructure/ui-babel-preset": "11.7.4-pr-snapshot-1781695314229",
+    "@instructure/ui-color-utils": "11.7.4-pr-snapshot-1781695314229"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -45,7 +45,6 @@
   },
   "sideEffects": false,
   "exports": {
-    "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
@@ -54,28 +53,24 @@
       "src": "./src/exports/a.ts",
       "types": "./types/exports/a.d.ts",
       "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
       "default": "./es/exports/a.js"
     },
     "./v11_6": {
       "src": "./src/exports/a.ts",
       "types": "./types/exports/a.d.ts",
       "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
       "src": "./src/exports/b.ts",
       "types": "./types/exports/b.d.ts",
       "import": "./es/exports/b.js",
-      "require": "./lib/exports/b.js",
       "default": "./es/exports/b.js"
     },
     "./latest": {
       "src": "./src/exports/b.ts",
       "types": "./types/exports/b.d.ts",
       "import": "./es/exports/b.js",
-      "require": "./lib/exports/b.js",
       "default": "./es/exports/b.js"
     }
   },
@@ -83,7 +78,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "clean": "ui-scripts clean",
-    "build": "ui-scripts build --modules es,cjs",
+    "build": "ui-scripts build",
     "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
     "build:types": "tsc -p tsconfig.build.json",
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"

package/src/Calendar/v1/Day/index.tsx

@@ -35,10 +35,10 @@ import {
 
 import { withStyle } from '@instructure/emotion'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { CalendarDayProps, CalendarDayStyleProps } from './props'
 
 /**
@@ -49,6 +49,7 @@ id: Calendar.Day
  **/
 @withStyle(generateStyle, generateComponentTheme)
 class Day extends Component<CalendarDayProps> {
+  static displayName = 'Day'
   static readonly componentId = 'Calendar.Day'
 
   static allowedProps = allowedProps

package/src/Calendar/v1/index.tsx

@@ -40,12 +40,12 @@ import { withStyle } from '@instructure/emotion'
 import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n'
 import type { Moment } from '@instructure/ui-i18n'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { Day } from './Day'
+import { Day } from './Day/index.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { CalendarProps, CalendarState } from './props'
 import { Renderable } from '@instructure/shared-types'
 
@@ -65,6 +65,7 @@ category: components
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 class Calendar extends Component<CalendarProps, CalendarState> {
+  static displayName = 'Calendar'
   static readonly componentId = 'Calendar'
 
   declare context: React.ContextType<typeof ApplyLocaleContext>
@@ -175,28 +176,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 +313,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/Day/index.tsx

@@ -35,9 +35,9 @@ import {
 
 import { withStyleNew } from '@instructure/emotion'
 
-import generateStyle from './styles'
+import generateStyle from './styles.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { CalendarDayProps, CalendarDayStyleProps } from './props'
 
 /**
@@ -48,6 +48,7 @@ id: Calendar.Day
  **/
 @withStyleNew(generateStyle)
 class Day extends Component<CalendarDayProps> {
+  static displayName = 'Day'
   static readonly componentId = 'Calendar.Day'
 
   static allowedProps = allowedProps

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".