@atlaskit/calendar 13.1.17 → 13.2.1

package/dist/es2019/calendar.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
 import GlobalTheme from '@atlaskit/theme/components';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -26,7 +27,7 @@ const boxStyles = xcss({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.17"
+  packageVersion: "13.2.1"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -80,6 +81,7 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     previouslySelected,
     defaultPreviouslySelected
   });
+  const [shouldSetFocus, setShouldSetFocus] = useState(false);
   const onChangeWithAnalytics = usePlatformLeafEventHandler({
     fn: onChange,
     action: 'changed',
@@ -94,6 +96,7 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     day: [dayValue, setDayValue],
     month: [monthValue, setMonthValue],
     year: [yearValue, setYearValue],
+    shouldSetFocus: [shouldSetFocus, setShouldSetFocus],
     onChange: onChangeWithAnalytics
   });
   const onSelectWithAnalytics = usePlatformLeafEventHandler({
@@ -124,6 +127,14 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   useCalendarRef(calendarRef, {
     navigate
   });
+  const {
+    monthsLong,
+    daysShort,
+    daysLong
+  } = useLocale({
+    locale,
+    weekStartDay
+  });
   const weeks = useGetWeeks({
     day: dayValue,
     month: monthValue,
@@ -135,17 +146,26 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     disabledDateFilter,
     minDate,
     maxDate,
+    daysLong,
     weekStartDay
   });
   const announceId = useUniqueId('announce');
   const announcerDate = useMemo(() => new Date(yearValue, monthValue - 1, dayValue).toString(), [dayValue, monthValue, yearValue]);
-  const {
-    monthsLong,
-    daysShort
-  } = useLocale({
-    locale,
-    weekStartDay
-  });
+  const getNextHeading = () => {
+    // Next month is (currentMonth - 1) + 1, or just currentMonth in this
+    // instance.
+    const nextMonth = monthValue % 12;
+    const showNextYear = monthValue === 12;
+    return `${monthsLong[nextMonth]} ${showNextYear ? yearValue + 1 : yearValue}`;
+  };
+  const getPreviousHeading = () => {
+    // Previous month is (monthValue - 1) - 1. Need to add 12 so the modulo
+    // works as expected and stays positive.
+    const previousMonth = (monthValue + 12 - 2) % 12;
+    const showPreviousYear = monthValue === 1;
+    return `${monthsLong[previousMonth]} ${showPreviousYear ? yearValue - 1 : yearValue}`;
+  };
+  const headerId = useUniqueId('month-year-header');
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions
     jsx("div", {
@@ -153,19 +173,19 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
       style: style,
       onBlur: handleContainerBlur,
       onFocus: handleContainerFocus,
-      onKeyDown: handleContainerKeyDown,
+      onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
       "data-testid": testId && `${testId}--container`,
       ref: ref
-    }, jsx(VisuallyHidden, null, jsx("span", {
+    }, getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? null : jsx(VisuallyHidden, null, jsx("span", {
       id: announceId,
       "aria-live": "assertive",
       "aria-relevant": "text"
     }, announcerDate)), jsx(Box, {
       xcss: boxStyles,
       padding: "space.200",
-      "aria-describedby": announceId,
+      "aria-describedby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
       "aria-label": "calendar",
-      tabIndex: tabIndex,
+      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
       testId: testId && `${testId}--calendar`
     }, jsx(Stack, {
       space: "space.150"
@@ -177,12 +197,20 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
       year: yearValue,
       nextMonthLabel: nextMonthLabel,
       previousMonthLabel: previousMonthLabel,
+      nextHeading: getNextHeading(),
+      previousHeading: getPreviousHeading(),
       handleClickNext: handleClickNext,
       handleClickPrev: handleClickPrev,
+      headerId: headerId,
       mode: mode,
+      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
       testId: testId
     }), jsx(Box, {
-      role: "grid"
+      role: "grid",
+      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
+      onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? handleContainerKeyDown : undefined,
+      "aria-labelledby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
+      testId: testId && `${testId}--calendar-dates`
     }, jsx(WeekHeaderComponent, {
       daysShort: daysShort,
       mode: mode,
@@ -191,6 +219,9 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
       weeks: weeks,
       handleClickDay: handleClickDay,
       mode: mode,
+      monthsLong: monthsLong,
+      shouldSetFocus: shouldSetFocus,
+      tabIndex: tabIndex,
       testId: testId
     })))))
   );

package/dist/es2019/internal/components/date.js

@@ -2,19 +2,25 @@
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Grid } from '@atlaskit/primitives';
 import { dateCellStyles as getDateCellStyles } from '../styles/date';
 const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
   children: day,
   isDisabled = false,
   isFocused = false,
   isToday = false,
+  dayLong,
   month,
+  monthLong,
   onClick = noop,
   isPreviouslySelected = false,
   isSelected = false,
   isSibling = false,
   year,
   mode,
+  shouldSetFocus,
+  tabIndex,
   testId
 }, ref) {
   const dateRef = useRef({
@@ -31,6 +37,12 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
       isDisabled
     };
   }, [day, month, year, isDisabled]);
+  const focusRef = useRef(null);
+  useEffect(() => {
+    if (getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
+      focusRef.current.focus();
+    }
+  }, [isFocused, shouldSetFocus]);
   const handleClick = useCallback(() => {
     const {
       day: dayValue,
@@ -47,28 +59,44 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     }
   }, [onClick]);
   const dateCellStyles = useMemo(() => css(getDateCellStyles(mode)), [mode]);
-  return (
-    // TODO: Determine if there is a better way to render the button (should
-    // be fixed with introduction of keyboard accessibility of Calendar in
-    // DSP-9939) (DSP-11588)
-    jsx("button", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css: dateCellStyles,
-      "aria-selected": isSelected ? 'true' : 'false',
-      tabIndex: isSelected ? 0 : -1,
-      type: "button",
-      role: "gridcell",
-      onClick: handleClick,
-      ref: ref,
-      "data-disabled": isDisabled || undefined,
-      "data-focused": isFocused || undefined,
-      "data-prev-selected": isPreviouslySelected || undefined,
-      "data-selected": isSelected || undefined,
-      "data-sibling": isSibling || undefined,
-      "data-today": isToday || undefined,
-      "data-testid": testId && isSelected ? `${testId}--selected-day` : undefined
-    }, day)
-  );
+  return getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? jsx(Grid, {
+    role: "gridcell",
+    alignItems: "center"
+  }, jsx("button", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: dateCellStyles,
+    "aria-current": isToday ? 'date' : undefined,
+    "aria-disabled": isDisabled || undefined,
+    "aria-label": `${day}, ${dayLong} ${monthLong} ${year}`,
+    "aria-pressed": isSelected ? 'true' : 'false',
+    tabIndex: isFocused ? tabIndex : -1,
+    type: "button",
+    onClick: handleClick,
+    ref: focusRef,
+    "data-disabled": isDisabled || undefined,
+    "data-focused": isFocused || undefined,
+    "data-prev-selected": isPreviouslySelected || undefined,
+    "data-selected": isSelected || undefined,
+    "data-sibling": isSibling || undefined,
+    "data-today": isToday || undefined,
+    "data-testid": testId && (isSelected ? `${testId}--selected-day` : `${testId}--day`)
+  }, day)) : jsx("button", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: dateCellStyles,
+    "aria-selected": isSelected ? 'true' : 'false',
+    tabIndex: isSelected ? 0 : -1,
+    type: "button",
+    role: "gridcell",
+    onClick: handleClick,
+    ref: ref,
+    "data-disabled": isDisabled || undefined,
+    "data-focused": isFocused || undefined,
+    "data-prev-selected": isPreviouslySelected || undefined,
+    "data-selected": isSelected || undefined,
+    "data-sibling": isSibling || undefined,
+    "data-today": isToday || undefined,
+    "data-testid": testId && (isSelected ? `${testId}--selected-day` : `${testId}--day`)
+  }, day);
 }));
 Date.displayName = 'Date';
 

package/dist/es2019/internal/components/header.js

@@ -5,20 +5,33 @@ import Button from '@atlaskit/button/standard-button';
 import Heading from '@atlaskit/heading';
 import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, Inline } from '@atlaskit/primitives';
 import { N700 } from '@atlaskit/theme/colors';
+import useUniqueId from '../../internal/hooks/use-unique-id';
 const Header = /*#__PURE__*/memo(function Header({
   monthLongTitle,
   year,
-  previousMonthLabel = 'Last month',
+  previousMonthLabel = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month',
+  previousHeading,
   nextMonthLabel = 'Next month',
+  nextHeading,
   handleClickPrev,
   handleClickNext,
+  headerId,
+  tabIndex,
   testId
 }) {
+  const announceId = useUniqueId('month-year-announce');
+  const renderedHeading = jsx(Heading, {
+    level: "h400",
+    as: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
+    id: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
+    testId: testId && `${testId}--current-month-year`
+  }, `${monthLongTitle} ${year}`);
   return jsx(Box, {
     paddingInline: "space.100",
-    "aria-hidden": "true"
+    "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
   }, jsx(Inline, {
     space: "space.0",
     alignBlock: "center",
@@ -26,27 +39,29 @@ const Header = /*#__PURE__*/memo(function Header({
   }, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: -1,
+    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
     onClick: handleClickPrev,
     testId: testId && `${testId}--previous-month`,
     iconBefore: jsx(ArrowleftIcon, {
-      label: previousMonthLabel,
+      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${previousMonthLabel}, ${previousHeading}` : previousMonthLabel,
       size: "medium",
       primaryColor: `var(--ds-icon, ${N700})`,
       testId: testId && `${testId}--previous-month-icon`
     })
-  }), jsx(Heading, {
-    level: "h400",
-    as: "div",
-    testId: testId && `${testId}--current-month-year`
-  }, `${monthLongTitle} ${year}`), jsx(Button, {
+  }), getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ?
+  // This is required to ensure that the new month/year is announced when the previous/next month buttons are activated
+  jsx(Box, {
+    "aria-live": "polite",
+    id: announceId,
+    testId: testId && `${testId}--current-month-year--container`
+  }, renderedHeading) : renderedHeading, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: -1,
+    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
     onClick: handleClickNext,
     testId: testId && `${testId}--next-month`,
     iconBefore: jsx(ArrowrightIcon, {
-      label: nextMonthLabel,
+      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${nextMonthLabel}, ${nextHeading}` : nextMonthLabel,
       size: "medium",
       primaryColor: `var(--ds-icon, ${N700})`,
       testId: testId && `${testId}--next-month-icon`

package/dist/es2019/internal/components/week-days.js

@@ -8,6 +8,9 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
   weeks,
   handleClickDay,
   mode,
+  monthsLong,
+  shouldSetFocus,
+  tabIndex,
   testId
 }) {
   return (
@@ -25,13 +28,17 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
       isDisabled: weekDay.isDisabled,
       isFocused: weekDay.isFocused,
       isToday: weekDay.isToday,
+      dayLong: weekDay.weekDayName,
       month: weekDay.month,
+      monthLong: monthsLong[weekDay.month - 1],
       onClick: handleClickDay,
       isPreviouslySelected: weekDay.isPreviouslySelected,
       isSelected: weekDay.isSelected,
       isSibling: weekDay.isSiblingMonth,
       year: weekDay.year,
       mode: mode,
+      shouldSetFocus: shouldSetFocus,
+      tabIndex: tabIndex,
       testId: testId
     }, weekDay.day)))))
   );

package/dist/es2019/internal/components/week-header.js

@@ -2,6 +2,7 @@
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
 import Text from '@atlaskit/ds-explorations/text';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import WeekDayGrid from './week-day-grid';
 const columnHeaderStyles = xcss({
@@ -20,15 +21,13 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
 }) {
   return jsx(WeekDayGrid, {
     testId: testId && `${testId}--column-headers`
-  }, daysShort.map(shortDay =>
-  // TODO: Determine if there is a better way to render the button
-  // (should be fixed with introduction of keyboard accessibility of
-  // Calendar in DSP-9939) (DSP-11588)
-  jsx(Box, {
+  }, daysShort.map(shortDay => jsx(Box, {
+    "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
     padding: "space.100",
     xcss: columnHeaderStyles,
     key: shortDay,
-    role: "columnheader"
+    role: "columnheader",
+    testId: testId && `${testId}--column-header`
   }, jsx(Text, {
     fontWeight: "bold",
     fontSize: "size.050",

package/dist/es2019/internal/hooks/use-get-weeks.js

@@ -32,6 +32,7 @@ function useGetCalendarWithSixthWeek(calendar, {
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useGetWeeks({
   day,
+  daysLong,
   month,
   year,
   today,
@@ -74,8 +75,10 @@ export default function useGetWeeks({
       } else {
         week = weeks[weeks.length - 1];
       }
+      const weekDayOffset = (date.weekDay - weekStartDay) % 7;
 
       // Define a bunch of `const`s
+      const weekDayName = daysLong[weekDayOffset];
       const isDisabledByArray = disabled ? disabled.indexOf(dateAsString) > -1 : false;
       const isDisabledByFilter = disabledDateFilter ? disabledDateFilter(dateAsString) : false;
       const isDisabledByMin = minDate && JSDate ? JSDate < minDate : false;
@@ -96,9 +99,10 @@ export default function useGetWeeks({
         isSelected,
         isSiblingMonth,
         year: date.year,
-        day: date.day
+        day: date.day,
+        weekDayName
       });
     });
     return weeks;
-  }, [calendar, day, disabled, disabledDateFilter, minDate, maxDate, needJsDate, previouslySelected, selected, today, weekStartDay]);
+  }, [calendar, day, disabled, disabledDateFilter, minDate, maxDate, needJsDate, previouslySelected, selected, today, weekStartDay, daysLong]);
 }

package/dist/es2019/internal/hooks/use-handle-date-change.js

@@ -36,6 +36,7 @@ export default function useHandleDateChange({
   day: [dayValue, setDayValue],
   month: [monthValue, setMonthValue],
   year: [yearValue, setYearValue],
+  shouldSetFocus: [shouldSetFocus, setShouldSetFocus],
   onChange
 }) {
   const dateRef = useRef({
@@ -61,6 +62,7 @@ export default function useHandleDateChange({
       month,
       day
     });
+    const isFocusableType = ['up', 'down', 'left', 'right'].includes(type);
     onChange({
       day,
       month,
@@ -71,7 +73,8 @@ export default function useHandleDateChange({
     setDayValue(day);
     setMonthValue(month);
     setYearValue(year);
-  }, [onChange, setDayValue, setMonthValue, setYearValue]);
+    setShouldSetFocus(isFocusableType);
+  }, [onChange, setDayValue, setMonthValue, setYearValue, setShouldSetFocus]);
   const navigate = useCallback(type => {
     const {
       day,

package/dist/es2019/internal/hooks/use-locale.js

@@ -8,8 +8,10 @@ export default function useLocale({
   const l10n = useMemo(() => createLocalizationProvider(locale), [locale]);
   const monthsLong = useMemo(() => l10n.getMonthsLong(), [l10n]);
   const daysShort = useMemo(() => l10n.getDaysShort(weekStartDay), [l10n, weekStartDay]);
+  const daysLong = useMemo(() => l10n.getDaysLong(weekStartDay), [l10n, weekStartDay]);
   return {
     monthsLong,
-    daysShort
+    daysShort,
+    daysLong
   };
 }

package/dist/es2019/internal/styles/date.js

@@ -1,3 +1,4 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B100, B200, B400, B50, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
 const textColor = {
   light: `var(--ds-text, ${N900})`,
@@ -24,6 +25,7 @@ const borderColorFocused = {
   light: `var(--ds-border-focused, ${B200})`,
   dark: `var(--ds-border-focused, ${B100})`
 };
+const focusBorderSelector = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? '&:focus-visible' : '&[data-focused]';
 export const dateCellStyles = (mode = 'light') => ({
   all: 'unset',
   display: 'block',
@@ -66,7 +68,7 @@ export const dateCellStyles = (mode = 'light') => ({
     color: `var(--ds-text-disabled, ${N40})`,
     cursor: 'not-allowed'
   },
-  '&[data-focused]': {
+  [focusBorderSelector]: {
     border: `2px solid ${borderColorFocused[mode]}`
   },
   '&:hover': {

package/dist/esm/calendar.js

@@ -4,10 +4,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
 import GlobalTheme from '@atlaskit/theme/components';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -30,7 +31,7 @@ var boxStyles = xcss({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.17"
+  packageVersion: "13.2.1"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -106,6 +107,10 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     _useControlledDateSta7 = _slicedToArray(_useControlledDateSta.previous, 2),
     previouslySelectedValue = _useControlledDateSta7[0],
     setPreviouslySelectedValue = _useControlledDateSta7[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldSetFocus = _useState2[0],
+    setShouldSetFocus = _useState2[1];
   var onChangeWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
     fn: onChange,
     action: 'changed',
@@ -115,6 +120,7 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       day: [dayValue, setDayValue],
       month: [monthValue, setMonthValue],
       year: [yearValue, setYearValue],
+      shouldSetFocus: [shouldSetFocus, setShouldSetFocus],
       onChange: onChangeWithAnalytics
     }),
     navigate = _useHandleDateChange.navigate,
@@ -145,6 +151,13 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   useCalendarRef(calendarRef, {
     navigate: navigate
   });
+  var _useLocale = useLocale({
+      locale: locale,
+      weekStartDay: weekStartDay
+    }),
+    monthsLong = _useLocale.monthsLong,
+    daysShort = _useLocale.daysShort,
+    daysLong = _useLocale.daysLong;
   var weeks = useGetWeeks({
     day: dayValue,
     month: monthValue,
@@ -156,18 +169,28 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     disabledDateFilter: disabledDateFilter,
     minDate: minDate,
     maxDate: maxDate,
+    daysLong: daysLong,
     weekStartDay: weekStartDay
   });
   var announceId = useUniqueId('announce');
   var announcerDate = useMemo(function () {
     return new Date(yearValue, monthValue - 1, dayValue).toString();
   }, [dayValue, monthValue, yearValue]);
-  var _useLocale = useLocale({
-      locale: locale,
-      weekStartDay: weekStartDay
-    }),
-    monthsLong = _useLocale.monthsLong,
-    daysShort = _useLocale.daysShort;
+  var getNextHeading = function getNextHeading() {
+    // Next month is (currentMonth - 1) + 1, or just currentMonth in this
+    // instance.
+    var nextMonth = monthValue % 12;
+    var showNextYear = monthValue === 12;
+    return "".concat(monthsLong[nextMonth], " ").concat(showNextYear ? yearValue + 1 : yearValue);
+  };
+  var getPreviousHeading = function getPreviousHeading() {
+    // Previous month is (monthValue - 1) - 1. Need to add 12 so the modulo
+    // works as expected and stays positive.
+    var previousMonth = (monthValue + 12 - 2) % 12;
+    var showPreviousYear = monthValue === 1;
+    return "".concat(monthsLong[previousMonth], " ").concat(showPreviousYear ? yearValue - 1 : yearValue);
+  };
+  var headerId = useUniqueId('month-year-header');
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions
     jsx("div", {
@@ -175,19 +198,19 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       style: style,
       onBlur: handleContainerBlur,
       onFocus: handleContainerFocus,
-      onKeyDown: handleContainerKeyDown,
+      onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
       "data-testid": testId && "".concat(testId, "--container"),
       ref: ref
-    }, jsx(VisuallyHidden, null, jsx("span", {
+    }, getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? null : jsx(VisuallyHidden, null, jsx("span", {
       id: announceId,
       "aria-live": "assertive",
       "aria-relevant": "text"
     }, announcerDate)), jsx(Box, {
       xcss: boxStyles,
       padding: "space.200",
-      "aria-describedby": announceId,
+      "aria-describedby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
       "aria-label": "calendar",
-      tabIndex: tabIndex,
+      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
       testId: testId && "".concat(testId, "--calendar")
     }, jsx(Stack, {
       space: "space.150"
@@ -199,12 +222,20 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       year: yearValue,
       nextMonthLabel: nextMonthLabel,
       previousMonthLabel: previousMonthLabel,
+      nextHeading: getNextHeading(),
+      previousHeading: getPreviousHeading(),
       handleClickNext: handleClickNext,
       handleClickPrev: handleClickPrev,
+      headerId: headerId,
       mode: mode,
+      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
       testId: testId
     }), jsx(Box, {
-      role: "grid"
+      role: "grid",
+      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
+      onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? handleContainerKeyDown : undefined,
+      "aria-labelledby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
+      testId: testId && "".concat(testId, "--calendar-dates")
     }, jsx(WeekHeaderComponent, {
       daysShort: daysShort,
       mode: mode,
@@ -213,6 +244,9 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       weeks: weeks,
       handleClickDay: handleClickDay,
       mode: mode,
+      monthsLong: monthsLong,
+      shouldSetFocus: shouldSetFocus,
+      tabIndex: tabIndex,
       testId: testId
     })))))
   );