@atlaskit/calendar 13.1.17 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/calendar
 
+## 13.2.0
+
+### Minor Changes
+
+- [`b5716b91b31`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5716b91b31) - [ux] We are testing adding keyboard accessibility for Calendar behind a feature flag. This will add more affordances for users of assistive technologies to use the calendar, and updates the `tabIndex` prop to only use recommended values. If this fix is successful it will be available in a later release.
+
 ## 13.1.17
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
@@ -36,7 +37,7 @@ var boxStyles = (0, _primitives.xcss)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.1.17"
+  packageVersion: "13.2.0"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -112,6 +113,10 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     _useControlledDateSta7 = (0, _slicedToArray2.default)(_useControlledDateSta.previous, 2),
     previouslySelectedValue = _useControlledDateSta7[0],
     setPreviouslySelectedValue = _useControlledDateSta7[1];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    shouldSetFocus = _useState2[0],
+    setShouldSetFocus = _useState2[1];
   var onChangeWithAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
     fn: onChange,
     action: 'changed',
@@ -121,6 +126,7 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       day: [dayValue, setDayValue],
       month: [monthValue, setMonthValue],
       year: [yearValue, setYearValue],
+      shouldSetFocus: [shouldSetFocus, setShouldSetFocus],
       onChange: onChangeWithAnalytics
     }),
     navigate = _useHandleDateChange.navigate,
@@ -151,6 +157,13 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
   (0, _useCalendarRef.default)(calendarRef, {
     navigate: navigate
   });
+  var _useLocale = (0, _useLocale2.default)({
+      locale: locale,
+      weekStartDay: weekStartDay
+    }),
+    monthsLong = _useLocale.monthsLong,
+    daysShort = _useLocale.daysShort,
+    daysLong = _useLocale.daysLong;
   var weeks = (0, _useGetWeeks.default)({
     day: dayValue,
     month: monthValue,
@@ -162,18 +175,28 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     disabledDateFilter: disabledDateFilter,
     minDate: minDate,
     maxDate: maxDate,
+    daysLong: daysLong,
     weekStartDay: weekStartDay
   });
   var announceId = (0, _useUniqueId.default)('announce');
   var announcerDate = (0, _react.useMemo)(function () {
     return new Date(yearValue, monthValue - 1, dayValue).toString();
   }, [dayValue, monthValue, yearValue]);
-  var _useLocale = (0, _useLocale2.default)({
-      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 = (0, _useUniqueId.default)('month-year-header');
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions
     (0, _react2.jsx)("div", {
@@ -181,19 +204,19 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       style: style,
       onBlur: handleContainerBlur,
       onFocus: handleContainerFocus,
-      onKeyDown: handleContainerKeyDown,
+      onKeyDown: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
       "data-testid": testId && "".concat(testId, "--container"),
       ref: ref
-    }, (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
+    }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? null : (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
       id: announceId,
       "aria-live": "assertive",
       "aria-relevant": "text"
     }, announcerDate)), (0, _react2.jsx)(_primitives.Box, {
       xcss: boxStyles,
       padding: "space.200",
-      "aria-describedby": announceId,
+      "aria-describedby": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
       "aria-label": "calendar",
-      tabIndex: tabIndex,
+      tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
       testId: testId && "".concat(testId, "--calendar")
     }, (0, _react2.jsx)(_primitives.Stack, {
       space: "space.150"
@@ -205,12 +228,20 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       year: yearValue,
       nextMonthLabel: nextMonthLabel,
       previousMonthLabel: previousMonthLabel,
+      nextHeading: getNextHeading(),
+      previousHeading: getPreviousHeading(),
       handleClickNext: handleClickNext,
       handleClickPrev: handleClickPrev,
+      headerId: headerId,
       mode: mode,
+      tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
       testId: testId
     }), (0, _react2.jsx)(_primitives.Box, {
-      role: "grid"
+      role: "grid",
+      tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
+      onKeyDown: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? handleContainerKeyDown : undefined,
+      "aria-labelledby": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
+      testId: testId && "".concat(testId, "--calendar-dates")
     }, (0, _react2.jsx)(_weekHeader.default, {
       daysShort: daysShort,
       mode: mode,
@@ -219,6 +250,9 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       weeks: weeks,
       handleClickDay: handleClickDay,
       mode: mode,
+      monthsLong: monthsLong,
+      shouldSetFocus: shouldSetFocus,
+      tabIndex: tabIndex,
       testId: testId
     })))))
   );

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

@@ -8,6 +8,8 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _date = require("../styles/date");
 /** @jsx jsx */
 
@@ -19,7 +21,9 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
     _ref$isToday = _ref.isToday,
     isToday = _ref$isToday === void 0 ? false : _ref$isToday,
+    dayLong = _ref.dayLong,
     month = _ref.month,
+    monthLong = _ref.monthLong,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
     _ref$isPreviouslySele = _ref.isPreviouslySelected,
@@ -30,6 +34,8 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     isSibling = _ref$isSibling === void 0 ? false : _ref$isSibling,
     year = _ref.year,
     mode = _ref.mode,
+    shouldSetFocus = _ref.shouldSetFocus,
+    tabIndex = _ref.tabIndex,
     testId = _ref.testId;
   var dateRef = (0, _react.useRef)({
     day: day,
@@ -45,6 +51,12 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
       isDisabled: isDisabled
     };
   }, [day, month, year, isDisabled]);
+  var focusRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
+      focusRef.current.focus();
+    }
+  }, [isFocused, shouldSetFocus]);
   var handleClick = (0, _react.useCallback)(function () {
     var _dateRef$current = dateRef.current,
       dayValue = _dateRef$current.day,
@@ -62,28 +74,44 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
   var dateCellStyles = (0, _react.useMemo)(function () {
     return (0, _react2.css)((0, _date.dateCellStyles)(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)
-    (0, _react2.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 ? "".concat(testId, "--selected-day") : undefined
-    }, day)
-  );
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? (0, _react2.jsx)(_primitives.Grid, {
+    role: "gridcell",
+    alignItems: "center"
+  }, (0, _react2.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": "".concat(day, ", ").concat(dayLong, " ").concat(monthLong, " ").concat(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 ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
+  }, day)) : (0, _react2.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 ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
+  }, day);
 }));
 Date.displayName = 'Date';
 

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

@@ -11,23 +11,36 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
 var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
+var _useUniqueId = _interopRequireDefault(require("../../internal/hooks/use-unique-id"));
 /** @jsx jsx */
 
 var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
     year = _ref.year,
     _ref$previousMonthLab = _ref.previousMonthLabel,
-    previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Last month' : _ref$previousMonthLab,
+    previousMonthLabel = _ref$previousMonthLab === void 0 ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month' : _ref$previousMonthLab,
+    previousHeading = _ref.previousHeading,
     _ref$nextMonthLabel = _ref.nextMonthLabel,
     nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
+    nextHeading = _ref.nextHeading,
     handleClickPrev = _ref.handleClickPrev,
     handleClickNext = _ref.handleClickNext,
+    headerId = _ref.headerId,
+    tabIndex = _ref.tabIndex,
     testId = _ref.testId;
+  var announceId = (0, _useUniqueId.default)('month-year-announce');
+  var renderedHeading = (0, _react2.jsx)(_heading.default, {
+    level: "h400",
+    as: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
+    id: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? headerId : undefined,
+    testId: testId && "".concat(testId, "--current-month-year")
+  }, "".concat(monthLongTitle, " ").concat(year));
   return (0, _react2.jsx)(_primitives.Box, {
     paddingInline: "space.100",
-    "aria-hidden": "true"
+    "aria-hidden": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
   }, (0, _react2.jsx)(_primitives.Inline, {
     space: "space.0",
     alignBlock: "center",
@@ -35,27 +48,29 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
   }, (0, _react2.jsx)(_standardButton.default, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: -1,
+    tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
     onClick: handleClickPrev,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: (0, _react2.jsx)(_chevronLeftLarge.default, {
-      label: previousMonthLabel,
+      label: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(previousMonthLabel, ", ").concat(previousHeading) : previousMonthLabel,
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), (0, _react2.jsx)(_heading.default, {
-    level: "h400",
-    as: "div",
-    testId: testId && "".concat(testId, "--current-month-year")
-  }, "".concat(monthLongTitle, " ").concat(year)), (0, _react2.jsx)(_standardButton.default, {
+  }), (0, _platformFeatureFlags.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
+  (0, _react2.jsx)(_primitives.Box, {
+    "aria-live": "polite",
+    id: announceId,
+    testId: testId && "".concat(testId, "--current-month-year--container")
+  }, renderedHeading) : renderedHeading, (0, _react2.jsx)(_standardButton.default, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: -1,
+    tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
     onClick: handleClickNext,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: (0, _react2.jsx)(_chevronRightLarge.default, {
-      label: nextMonthLabel,
+      label: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(nextMonthLabel, ", ").concat(nextHeading) : nextMonthLabel,
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),
       testId: testId && "".concat(testId, "--next-month-icon")

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

@@ -16,6 +16,9 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
   var weeks = _ref.weeks,
     handleClickDay = _ref.handleClickDay,
     mode = _ref.mode,
+    monthsLong = _ref.monthsLong,
+    shouldSetFocus = _ref.shouldSetFocus,
+    tabIndex = _ref.tabIndex,
     testId = _ref.testId;
   return (
     // TODO: Determine if there is a better way to render the button (should be
@@ -34,13 +37,17 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
           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/cjs/internal/components/week-header.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
 /** @jsx jsx */
@@ -28,22 +29,19 @@ var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
   return (0, _react2.jsx)(_weekDayGrid.default, {
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
-    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)
-      (0, _react2.jsx)(_primitives.Box, {
-        padding: "space.100",
-        xcss: columnHeaderStyles,
-        key: shortDay,
-        role: "columnheader"
-      }, (0, _react2.jsx)(_text.default, {
-        fontWeight: "bold",
-        fontSize: "size.050",
-        verticalAlign: "middle",
-        textTransform: "uppercase"
-      }, shortDay))
-    );
+    return (0, _react2.jsx)(_primitives.Box, {
+      "aria-hidden": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
+      padding: "space.100",
+      xcss: columnHeaderStyles,
+      key: shortDay,
+      role: "columnheader",
+      testId: testId && "".concat(testId, "--column-header")
+    }, (0, _react2.jsx)(_text.default, {
+      fontWeight: "bold",
+      fontSize: "size.050",
+      verticalAlign: "middle",
+      textTransform: "uppercase"
+    }, shortDay));
   }));
 });
 WeekHeader.displayName = 'WeekHeader';

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

@@ -41,6 +41,7 @@ function useGetCalendarWithSixthWeek(calendar, _ref) {
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useGetWeeks(_ref2) {
   var day = _ref2.day,
+    daysLong = _ref2.daysLong,
     month = _ref2.month,
     year = _ref2.year,
     today = _ref2.today,
@@ -84,8 +85,10 @@ function useGetWeeks(_ref2) {
       } else {
         week = weeks[weeks.length - 1];
       }
+      var weekDayOffset = (date.weekDay - weekStartDay) % 7;
 
       // Define a bunch of `const`s
+      var weekDayName = daysLong[weekDayOffset];
       var isDisabledByArray = disabled ? disabled.indexOf(dateAsString) > -1 : false;
       var isDisabledByFilter = disabledDateFilter ? disabledDateFilter(dateAsString) : false;
       var isDisabledByMin = minDate && JSDate ? JSDate < minDate : false;
@@ -106,9 +109,10 @@ function useGetWeeks(_ref2) {
         isSelected: isSelected,
         isSiblingMonth: isSiblingMonth,
         year: date.year,
-        day: date.day
+        day: date.day,
+        weekDayName: 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/cjs/internal/hooks/use-handle-date-change.js

@@ -53,6 +53,9 @@ function useHandleDateChange(_ref) {
     _ref$year = (0, _slicedToArray2.default)(_ref.year, 2),
     yearValue = _ref$year[0],
     setYearValue = _ref$year[1],
+    _ref$shouldSetFocus = (0, _slicedToArray2.default)(_ref.shouldSetFocus, 2),
+    shouldSetFocus = _ref$shouldSetFocus[0],
+    setShouldSetFocus = _ref$shouldSetFocus[1],
     onChange = _ref.onChange;
   var dateRef = (0, _react.useRef)({
     day: dayValue,
@@ -76,6 +79,7 @@ function useHandleDateChange(_ref) {
       month: month,
       day: day
     });
+    var isFocusableType = ['up', 'down', 'left', 'right'].includes(type);
     onChange({
       day: day,
       month: month,
@@ -86,7 +90,8 @@ function useHandleDateChange(_ref) {
     setDayValue(day);
     setMonthValue(month);
     setYearValue(year);
-  }, [onChange, setDayValue, setMonthValue, setYearValue]);
+    setShouldSetFocus(isFocusableType);
+  }, [onChange, setDayValue, setMonthValue, setYearValue, setShouldSetFocus]);
   var navigate = (0, _react.useCallback)(function (type) {
     var _dateRef$current = dateRef.current,
       day = _dateRef$current.day,

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

@@ -19,8 +19,12 @@ function useLocale(_ref) {
   var daysShort = (0, _react.useMemo)(function () {
     return l10n.getDaysShort(weekStartDay);
   }, [l10n, weekStartDay]);
+  var daysLong = (0, _react.useMemo)(function () {
+    return l10n.getDaysLong(weekStartDay);
+  }, [l10n, weekStartDay]);
   return {
     monthsLong: monthsLong,
-    daysShort: daysShort
+    daysShort: daysShort,
+    daysLong: daysLong
   };
 }

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

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dateCellStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var textColor = {
   light: "var(--ds-text, ".concat(_colors.N900, ")"),
@@ -30,9 +33,11 @@ var borderColorFocused = {
   light: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
   dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
 };
+var focusBorderSelector = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? '&:focus-visible' : '&[data-focused]';
 var dateCellStyles = function dateCellStyles() {
+  var _ref;
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  return {
+  return _ref = {
     all: 'unset',
     display: 'block',
     padding: "var(--ds-space-050, 4px)".concat(" 9px"),
@@ -73,32 +78,25 @@ var dateCellStyles = function dateCellStyles() {
     '&[data-disabled]': {
       color: "var(--ds-text-disabled, ".concat(_colors.N40, ")"),
       cursor: 'not-allowed'
-    },
-    '&[data-focused]': {
-      border: "2px solid ".concat(borderColorFocused[mode])
-    },
-    '&:hover': {
-      backgroundColor: hoverBackground[mode],
-      color: textColor[mode]
-    },
-    '&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"),
-      color: textColor[mode]
-    },
-    '&[data-selected]:hover': {
-      backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")"),
-      color: "var(--ds-text-selected, ".concat(_colors.N600, ")")
-    },
-    '&[data-prev-selected]:hover': {
-      color: textColorMedium
-    },
-    '&[data-sibling]:hover': {
-      color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-    },
-    '&[data-disabled]:hover': {
-      backgroundColor: 'transparent',
-      color: "var(--ds-text-disabled, ".concat(_colors.N40, ")")
     }
-  };
+  }, (0, _defineProperty2.default)(_ref, focusBorderSelector, {
+    border: "2px solid ".concat(borderColorFocused[mode])
+  }), (0, _defineProperty2.default)(_ref, '&:hover', {
+    backgroundColor: hoverBackground[mode],
+    color: textColor[mode]
+  }), (0, _defineProperty2.default)(_ref, '&:active', {
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"),
+    color: textColor[mode]
+  }), (0, _defineProperty2.default)(_ref, '&[data-selected]:hover', {
+    backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")"),
+    color: "var(--ds-text-selected, ".concat(_colors.N600, ")")
+  }), (0, _defineProperty2.default)(_ref, '&[data-prev-selected]:hover', {
+    color: textColorMedium
+  }), (0, _defineProperty2.default)(_ref, '&[data-sibling]:hover', {
+    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+  }), (0, _defineProperty2.default)(_ref, '&[data-disabled]:hover', {
+    backgroundColor: 'transparent',
+    color: "var(--ds-text-disabled, ".concat(_colors.N40, ")")
+  }), _ref;
 };
 exports.dateCellStyles = dateCellStyles;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/calendar",
-	"version": "13.1.17",
+	"version": "13.2.0",
 	"sideEffects": false
 }