@atlaskit/calendar 13.2.1 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/calendar
 
+## 13.3.0
+
+### Minor Changes
+
+- [`26825f14d51`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26825f14d51) - [ux] This adds greater keyboard accessibility to calendar, and removes the feature flag that gated this change.
+
+## 13.2.2
+
+### Patch Changes
+
+- [`ceedd1f27df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ceedd1f27df) - [ux] Ensures month/year does not render as live region until it has changed or has otherwise been interacted with for better usability. Part of feature flag for keyboard accessibility.
+
 ## 13.2.1
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -12,10 +12,8 @@ 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"));
 var _header = _interopRequireDefault(require("./internal/components/header"));
 var _weekDays = _interopRequireDefault(require("./internal/components/week-days"));
 var _weekHeader = _interopRequireDefault(require("./internal/components/week-header"));
@@ -28,8 +26,8 @@ var _useHandleDateChange2 = _interopRequireDefault(require("./internal/hooks/use
 var _useHandleDateSelect2 = _interopRequireDefault(require("./internal/hooks/use-handle-date-select"));
 var _useLocale2 = _interopRequireDefault(require("./internal/hooks/use-locale"));
 var _useUniqueId = _interopRequireDefault(require("./internal/hooks/use-unique-id"));
-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) { (0, _defineProperty2.default)(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 */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var boxStyles = (0, _primitives.xcss)({
   display: 'inline-block',
   userSelect: 'none'
@@ -37,7 +35,7 @@ var boxStyles = (0, _primitives.xcss)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.2.1"
+  packageVersion: "13.3.0"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -178,10 +176,6 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     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 getNextHeading = function getNextHeading() {
     // Next month is (currentMonth - 1) + 1, or just currentMonth in this
     // instance.
@@ -204,19 +198,12 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       style: style,
       onBlur: handleContainerBlur,
       onFocus: handleContainerFocus,
-      onKeyDown: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
       "data-testid": testId && "".concat(testId, "--container"),
       ref: ref
-    }, (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, {
+    }, (0, _react2.jsx)(_primitives.Box, {
       xcss: boxStyles,
       padding: "space.200",
-      "aria-describedby": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
       "aria-label": "calendar",
-      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"
@@ -234,13 +221,13 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
       handleClickPrev: handleClickPrev,
       headerId: headerId,
       mode: mode,
-      tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
+      tabIndex: tabIndex,
       testId: testId
     }), (0, _react2.jsx)(_primitives.Box, {
       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,
+      tabIndex: tabIndex,
+      onKeyDown: handleContainerKeyDown,
+      "aria-labelledby": headerId,
       testId: testId && "".concat(testId, "--calendar-dates")
     }, (0, _react2.jsx)(_weekHeader.default, {
       daysShort: daysShort,

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

@@ -8,7 +8,6 @@ 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 */
@@ -53,7 +52,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
   }, [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) {
+    if (isFocused && shouldSetFocus && focusRef.current) {
       focusRef.current.focus();
     }
   }, [isFocused, shouldSetFocus]);
@@ -74,7 +73,7 @@ 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 (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? (0, _react2.jsx)(_primitives.Grid, {
+  return (0, _react2.jsx)(_primitives.Grid, {
     role: "gridcell",
     alignItems: "center"
   }, (0, _react2.jsx)("button", {
@@ -95,23 +94,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     "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);
+  }, day));
 }));
 Date.displayName = 'Date';
 

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 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"));
@@ -21,7 +21,7 @@ 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 ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month' : _ref$previousMonthLab,
+    previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Previous month' : _ref$previousMonthLab,
     previousHeading = _ref.previousHeading,
     _ref$nextMonthLabel = _ref.nextMonthLabel,
     nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
@@ -32,15 +32,32 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     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));
+
+  // All of this is because `aria-atomic` is not fully supported for different
+  // assistive technologies. We want the value of the current month and year to
+  // be announced, but *only* if that value has been interacted with since
+  // being mounted. This allows us to conditionally apply the `aria-live`
+  // attribute.  Without this, the `aria-live` property is set on mount and
+  // overrides the default input's readout in downstream consumers (e.g.
+  // datetime picker).
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasInteractedWithMonth = _useState2[0],
+    setHasInteractedWithMonth = _useState2[1];
+  var handlePrevMonthInteraction = function handlePrevMonthInteraction(e) {
+    if (!hasInteractedWithMonth) {
+      setHasInteractedWithMonth(true);
+    }
+    handleClickPrev(e);
+  };
+  var handleNextMonthInteraction = function handleNextMonthInteraction(e) {
+    if (!hasInteractedWithMonth) {
+      setHasInteractedWithMonth(true);
+    }
+    handleClickNext(e);
+  };
   return (0, _react2.jsx)(_primitives.Box, {
-    paddingInline: "space.100",
-    "aria-hidden": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
+    paddingInline: "space.100"
   }, (0, _react2.jsx)(_primitives.Inline, {
     space: "space.0",
     alignBlock: "center",
@@ -48,29 +65,32 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
   }, (0, _react2.jsx)(_standardButton.default, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickPrev,
+    tabIndex: tabIndex,
+    onClick: handlePrevMonthInteraction,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: (0, _react2.jsx)(_chevronLeftLarge.default, {
-      label: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(previousMonthLabel, ", ").concat(previousHeading) : previousMonthLabel,
+      label: "".concat(previousMonthLabel, ", ").concat(previousHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), (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",
+  }), (0, _react2.jsx)(_primitives.Box, {
+    "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
-  }, renderedHeading) : renderedHeading, (0, _react2.jsx)(_standardButton.default, {
+  }, (0, _react2.jsx)(_heading.default, {
+    level: "h400",
+    as: "h2",
+    id: headerId,
+    testId: testId && "".concat(testId, "--current-month-year")
+  }, "".concat(monthLongTitle, " ").concat(year))), (0, _react2.jsx)(_standardButton.default, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickNext,
+    tabIndex: tabIndex,
+    onClick: handleNextMonthInteraction,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: (0, _react2.jsx)(_chevronRightLarge.default, {
-      label: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(nextMonthLabel, ", ").concat(nextHeading) : nextMonthLabel,
+      label: "".concat(nextMonthLabel, ", ").concat(nextHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(_colors.N700, ")"),
       testId: testId && "".concat(testId, "--next-month-icon")

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

@@ -8,7 +8,6 @@ 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 */
@@ -30,7 +29,7 @@ var WeekHeader = /*#__PURE__*/(0, _react.memo)(function WeekHeader(_ref) {
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
     return (0, _react2.jsx)(_primitives.Box, {
-      "aria-hidden": (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
+      "aria-hidden": "true",
       padding: "space.100",
       xcss: columnHeaderStyles,
       key: shortDay,

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

@@ -12,8 +12,8 @@ var _dateFns = require("date-fns");
 var _constants = require("../constants");
 var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
 var _getBaseCalendar = _interopRequireDefault(require("../utils/get-base-calendar"));
-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) { (0, _defineProperty2.default)(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; } // eslint-disable-next-line no-restricted-imports
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line no-restricted-imports
 function useGetCalendarWithSixthWeek(calendar, _ref) {
   var month = _ref.month,
     year = _ref.year,

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

@@ -11,8 +11,8 @@ var _react = require("react");
 var _constants = require("../constants");
 var _dateToString = _interopRequireDefault(require("../utils/date-to-string"));
 var _getDaysInMonth = _interopRequireDefault(require("../utils/get-days-in-month"));
-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) { (0, _defineProperty2.default)(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getNextMonth = function getNextMonth(monthValue, yearValue) {
   var month = monthValue;
   var year = yearValue;

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

@@ -1,12 +1,9 @@
 "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, ")"),
@@ -33,11 +30,9 @@ 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 _ref = {
+  return {
     all: 'unset',
     display: 'block',
     padding: "var(--ds-space-050, 4px)".concat(" 9px"),
@@ -78,25 +73,32 @@ var dateCellStyles = function dateCellStyles() {
     '&[data-disabled]': {
       color: "var(--ds-text-disabled, ".concat(_colors.N40, ")"),
       cursor: 'not-allowed'
+    },
+    '&:focus-visible': {
+      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/es2019/calendar.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { forwardRef, memo, useMemo, useState } from 'react';
+import { forwardRef, memo, 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';
 import Header from './internal/components/header';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -27,7 +25,7 @@ const boxStyles = xcss({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.2.1"
+  packageVersion: "13.3.0"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,
@@ -149,8 +147,6 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     daysLong,
     weekStartDay
   });
-  const announceId = useUniqueId('announce');
-  const announcerDate = useMemo(() => new Date(yearValue, monthValue - 1, dayValue).toString(), [dayValue, monthValue, yearValue]);
   const getNextHeading = () => {
     // Next month is (currentMonth - 1) + 1, or just currentMonth in this
     // instance.
@@ -173,19 +169,12 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
       style: style,
       onBlur: handleContainerBlur,
       onFocus: handleContainerFocus,
-      onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
       "data-testid": testId && `${testId}--container`,
       ref: ref
-    }, 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, {
+    }, jsx(Box, {
       xcss: boxStyles,
       padding: "space.200",
-      "aria-describedby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
       "aria-label": "calendar",
-      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
       testId: testId && `${testId}--calendar`
     }, jsx(Stack, {
       space: "space.150"
@@ -203,13 +192,13 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
       handleClickPrev: handleClickPrev,
       headerId: headerId,
       mode: mode,
-      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
+      tabIndex: tabIndex,
       testId: testId
     }), jsx(Box, {
       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,
+      tabIndex: tabIndex,
+      onKeyDown: handleContainerKeyDown,
+      "aria-labelledby": headerId,
       testId: testId && `${testId}--calendar-dates`
     }, jsx(WeekHeaderComponent, {
       daysShort: daysShort,

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

@@ -2,7 +2,6 @@
 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({
@@ -39,7 +38,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
   }, [day, month, year, isDisabled]);
   const focusRef = useRef(null);
   useEffect(() => {
-    if (getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
+    if (isFocused && shouldSetFocus && focusRef.current) {
       focusRef.current.focus();
     }
   }, [isFocused, shouldSetFocus]);
@@ -59,7 +58,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     }
   }, [onClick]);
   const dateCellStyles = useMemo(() => css(getDateCellStyles(mode)), [mode]);
-  return getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? jsx(Grid, {
+  return jsx(Grid, {
     role: "gridcell",
     alignItems: "center"
   }, jsx("button", {
@@ -80,23 +79,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
     "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);
+  }, day));
 }));
 Date.displayName = 'Date';
 

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

@@ -1,18 +1,17 @@
 /** @jsx jsx */
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
 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 = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month',
+  previousMonthLabel = 'Previous month',
   previousHeading,
   nextMonthLabel = 'Next month',
   nextHeading,
@@ -23,15 +22,29 @@ const Header = /*#__PURE__*/memo(function Header({
   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}`);
+
+  // All of this is because `aria-atomic` is not fully supported for different
+  // assistive technologies. We want the value of the current month and year to
+  // be announced, but *only* if that value has been interacted with since
+  // being mounted. This allows us to conditionally apply the `aria-live`
+  // attribute.  Without this, the `aria-live` property is set on mount and
+  // overrides the default input's readout in downstream consumers (e.g.
+  // datetime picker).
+  const [hasInteractedWithMonth, setHasInteractedWithMonth] = useState(false);
+  const handlePrevMonthInteraction = e => {
+    if (!hasInteractedWithMonth) {
+      setHasInteractedWithMonth(true);
+    }
+    handleClickPrev(e);
+  };
+  const handleNextMonthInteraction = e => {
+    if (!hasInteractedWithMonth) {
+      setHasInteractedWithMonth(true);
+    }
+    handleClickNext(e);
+  };
   return jsx(Box, {
-    paddingInline: "space.100",
-    "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
+    paddingInline: "space.100"
   }, jsx(Inline, {
     space: "space.0",
     alignBlock: "center",
@@ -39,29 +52,32 @@ const Header = /*#__PURE__*/memo(function Header({
   }, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickPrev,
+    tabIndex: tabIndex,
+    onClick: handlePrevMonthInteraction,
     testId: testId && `${testId}--previous-month`,
     iconBefore: jsx(ArrowleftIcon, {
-      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${previousMonthLabel}, ${previousHeading}` : previousMonthLabel,
+      label: `${previousMonthLabel}, ${previousHeading}`,
       size: "medium",
       primaryColor: `var(--ds-icon, ${N700})`,
       testId: testId && `${testId}--previous-month-icon`
     })
-  }), 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",
+  }), jsx(Box, {
+    "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && `${testId}--current-month-year--container`
-  }, renderedHeading) : renderedHeading, jsx(Button, {
+  }, jsx(Heading, {
+    level: "h400",
+    as: "h2",
+    id: headerId,
+    testId: testId && `${testId}--current-month-year`
+  }, `${monthLongTitle} ${year}`)), jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickNext,
+    tabIndex: tabIndex,
+    onClick: handleNextMonthInteraction,
     testId: testId && `${testId}--next-month`,
     iconBefore: jsx(ArrowrightIcon, {
-      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${nextMonthLabel}, ${nextHeading}` : nextMonthLabel,
+      label: `${nextMonthLabel}, ${nextHeading}`,
       size: "medium",
       primaryColor: `var(--ds-icon, ${N700})`,
       testId: testId && `${testId}--next-month-icon`

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

@@ -2,7 +2,6 @@
 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({
@@ -22,7 +21,7 @@ const WeekHeader = /*#__PURE__*/memo(function WeekHeader({
   return jsx(WeekDayGrid, {
     testId: testId && `${testId}--column-headers`
   }, daysShort.map(shortDay => jsx(Box, {
-    "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
+    "aria-hidden": "true",
     padding: "space.100",
     xcss: columnHeaderStyles,
     key: shortDay,

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

@@ -1,4 +1,3 @@
-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})`,
@@ -25,7 +24,6 @@ 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',
@@ -68,7 +66,7 @@ export const dateCellStyles = (mode = 'light') => ({
     color: `var(--ds-text-disabled, ${N40})`,
     cursor: 'not-allowed'
   },
-  [focusBorderSelector]: {
+  '&:focus-visible': {
     border: `2px solid ${borderColorFocused[mode]}`
   },
   '&:hover': {

package/dist/esm/calendar.js

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
-import { forwardRef, memo, useMemo, useState } from 'react';
+import { forwardRef, memo, 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';
 import Header from './internal/components/header';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -31,7 +29,7 @@ var boxStyles = xcss({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.2.1"
+  packageVersion: "13.3.0"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
@@ -172,10 +170,6 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     daysLong: daysLong,
     weekStartDay: weekStartDay
   });
-  var announceId = useUniqueId('announce');
-  var announcerDate = useMemo(function () {
-    return new Date(yearValue, monthValue - 1, dayValue).toString();
-  }, [dayValue, monthValue, yearValue]);
   var getNextHeading = function getNextHeading() {
     // Next month is (currentMonth - 1) + 1, or just currentMonth in this
     // instance.
@@ -198,19 +192,12 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       style: style,
       onBlur: handleContainerBlur,
       onFocus: handleContainerFocus,
-      onKeyDown: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : handleContainerKeyDown,
       "data-testid": testId && "".concat(testId, "--container"),
       ref: ref
-    }, 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, {
+    }, jsx(Box, {
       xcss: boxStyles,
       padding: "space.200",
-      "aria-describedby": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : announceId,
       "aria-label": "calendar",
-      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : tabIndex,
       testId: testId && "".concat(testId, "--calendar")
     }, jsx(Stack, {
       space: "space.150"
@@ -228,13 +215,13 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
       handleClickPrev: handleClickPrev,
       headerId: headerId,
       mode: mode,
-      tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : undefined,
+      tabIndex: tabIndex,
       testId: testId
     }), jsx(Box, {
       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,
+      tabIndex: tabIndex,
+      onKeyDown: handleContainerKeyDown,
+      "aria-labelledby": headerId,
       testId: testId && "".concat(testId, "--calendar-dates")
     }, jsx(WeekHeaderComponent, {
       daysShort: daysShort,

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

@@ -2,7 +2,6 @@
 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';
 var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
@@ -45,7 +44,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
   }, [day, month, year, isDisabled]);
   var focusRef = useRef(null);
   useEffect(function () {
-    if (getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') && isFocused && shouldSetFocus && focusRef.current) {
+    if (isFocused && shouldSetFocus && focusRef.current) {
       focusRef.current.focus();
     }
   }, [isFocused, shouldSetFocus]);
@@ -66,7 +65,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
   var dateCellStyles = useMemo(function () {
     return css(getDateCellStyles(mode));
   }, [mode]);
-  return getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? jsx(Grid, {
+  return jsx(Grid, {
     role: "gridcell",
     alignItems: "center"
   }, jsx("button", {
@@ -87,23 +86,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
     "data-sibling": isSibling || undefined,
     "data-today": isToday || undefined,
     "data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(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 ? "".concat(testId, "--selected-day") : "".concat(testId, "--day"))
-  }, day);
+  }, day));
 }));
 Date.displayName = 'Date';
 

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

@@ -1,11 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
 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';
@@ -13,7 +13,7 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
   var monthLongTitle = _ref.monthLongTitle,
     year = _ref.year,
     _ref$previousMonthLab = _ref.previousMonthLabel,
-    previousMonthLabel = _ref$previousMonthLab === void 0 ? getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'Previous month' : 'Last month' : _ref$previousMonthLab,
+    previousMonthLabel = _ref$previousMonthLab === void 0 ? 'Previous month' : _ref$previousMonthLab,
     previousHeading = _ref.previousHeading,
     _ref$nextMonthLabel = _ref.nextMonthLabel,
     nextMonthLabel = _ref$nextMonthLabel === void 0 ? 'Next month' : _ref$nextMonthLabel,
@@ -24,15 +24,32 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
     tabIndex = _ref.tabIndex,
     testId = _ref.testId;
   var announceId = useUniqueId('month-year-announce');
-  var 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 && "".concat(testId, "--current-month-year")
-  }, "".concat(monthLongTitle, " ").concat(year));
+
+  // All of this is because `aria-atomic` is not fully supported for different
+  // assistive technologies. We want the value of the current month and year to
+  // be announced, but *only* if that value has been interacted with since
+  // being mounted. This allows us to conditionally apply the `aria-live`
+  // attribute.  Without this, the `aria-live` property is set on mount and
+  // overrides the default input's readout in downstream consumers (e.g.
+  // datetime picker).
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasInteractedWithMonth = _useState2[0],
+    setHasInteractedWithMonth = _useState2[1];
+  var handlePrevMonthInteraction = function handlePrevMonthInteraction(e) {
+    if (!hasInteractedWithMonth) {
+      setHasInteractedWithMonth(true);
+    }
+    handleClickPrev(e);
+  };
+  var handleNextMonthInteraction = function handleNextMonthInteraction(e) {
+    if (!hasInteractedWithMonth) {
+      setHasInteractedWithMonth(true);
+    }
+    handleClickNext(e);
+  };
   return jsx(Box, {
-    paddingInline: "space.100",
-    "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? undefined : 'true'
+    paddingInline: "space.100"
   }, jsx(Inline, {
     space: "space.0",
     alignBlock: "center",
@@ -40,29 +57,32 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
   }, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickPrev,
+    tabIndex: tabIndex,
+    onClick: handlePrevMonthInteraction,
     testId: testId && "".concat(testId, "--previous-month"),
     iconBefore: jsx(ArrowleftIcon, {
-      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(previousMonthLabel, ", ").concat(previousHeading) : previousMonthLabel,
+      label: "".concat(previousMonthLabel, ", ").concat(previousHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(N700, ")"),
       testId: testId && "".concat(testId, "--previous-month-icon")
     })
-  }), 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",
+  }), jsx(Box, {
+    "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
-  }, renderedHeading) : renderedHeading, jsx(Button, {
+  }, jsx(Heading, {
+    level: "h400",
+    as: "h2",
+    id: headerId,
+    testId: testId && "".concat(testId, "--current-month-year")
+  }, "".concat(monthLongTitle, " ").concat(year))), jsx(Button, {
     appearance: "subtle",
     spacing: "none",
-    tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickNext,
+    tabIndex: tabIndex,
+    onClick: handleNextMonthInteraction,
     testId: testId && "".concat(testId, "--next-month"),
     iconBefore: jsx(ArrowrightIcon, {
-      label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? "".concat(nextMonthLabel, ", ").concat(nextHeading) : nextMonthLabel,
+      label: "".concat(nextMonthLabel, ", ").concat(nextHeading),
       size: "medium",
       primaryColor: "var(--ds-icon, ".concat(N700, ")"),
       testId: testId && "".concat(testId, "--next-month-icon")

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

@@ -2,7 +2,6 @@
 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';
 var columnHeaderStyles = xcss({
@@ -22,7 +21,7 @@ var WeekHeader = /*#__PURE__*/memo(function WeekHeader(_ref) {
     testId: testId && "".concat(testId, "--column-headers")
   }, daysShort.map(function (shortDay) {
     return jsx(Box, {
-      "aria-hidden": getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'true' : undefined,
+      "aria-hidden": "true",
       padding: "space.100",
       xcss: columnHeaderStyles,
       key: shortDay,

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useMemo } from 'react';
 
 // eslint-disable-next-line no-restricted-imports

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useEffect, useRef } from 'react';
 import { daysPerWeek, monthsPerYear } from '../constants';
 import dateToString from '../utils/date-to-string';

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

@@ -1,5 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
 var textColor = {
   light: "var(--ds-text, ".concat(N900, ")"),
@@ -26,11 +24,9 @@ var borderColorFocused = {
   light: "var(--ds-border-focused, ".concat(B200, ")"),
   dark: "var(--ds-border-focused, ".concat(B100, ")")
 };
-var focusBorderSelector = getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? '&:focus-visible' : '&[data-focused]';
 export var dateCellStyles = function dateCellStyles() {
-  var _ref;
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  return _ref = {
+  return {
     all: 'unset',
     display: 'block',
     padding: "var(--ds-space-050, 4px)".concat(" 9px"),
@@ -71,24 +67,31 @@ export var dateCellStyles = function dateCellStyles() {
     '&[data-disabled]': {
       color: "var(--ds-text-disabled, ".concat(N40, ")"),
       cursor: 'not-allowed'
+    },
+    '&:focus-visible': {
+      border: "2px solid ".concat(borderColorFocused[mode])
+    },
+    '&:hover': {
+      backgroundColor: hoverBackground[mode],
+      color: textColor[mode]
+    },
+    '&:active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
+      color: textColor[mode]
+    },
+    '&[data-selected]:hover': {
+      backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
+      color: "var(--ds-text-selected, ".concat(N600, ")")
+    },
+    '&[data-prev-selected]:hover': {
+      color: textColorMedium
+    },
+    '&[data-sibling]:hover': {
+      color: "var(--ds-text-subtlest, ".concat(N200, ")")
+    },
+    '&[data-disabled]:hover': {
+      backgroundColor: 'transparent',
+      color: "var(--ds-text-disabled, ".concat(N40, ")")
     }
-  }, _defineProperty(_ref, focusBorderSelector, {
-    border: "2px solid ".concat(borderColorFocused[mode])
-  }), _defineProperty(_ref, '&:hover', {
-    backgroundColor: hoverBackground[mode],
-    color: textColor[mode]
-  }), _defineProperty(_ref, '&:active', {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
-    color: textColor[mode]
-  }), _defineProperty(_ref, '&[data-selected]:hover', {
-    backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
-    color: "var(--ds-text-selected, ".concat(N600, ")")
-  }), _defineProperty(_ref, '&[data-prev-selected]:hover', {
-    color: textColorMedium
-  }), _defineProperty(_ref, '&[data-sibling]:hover', {
-    color: "var(--ds-text-subtlest, ".concat(N200, ")")
-  }), _defineProperty(_ref, '&[data-disabled]:hover', {
-    backgroundColor: 'transparent',
-    color: "var(--ds-text-disabled, ".concat(N40, ")")
-  }), _ref;
+  };
 };

package/dist/types/internal/components/header.d.ts

@@ -8,8 +8,8 @@ interface HeaderProps {
     previousHeading: string;
     nextMonthLabel?: string;
     nextHeading: string;
-    handleClickNext?: () => void;
-    handleClickPrev?: () => void;
+    handleClickNext: (e: React.MouseEvent<HTMLElement>) => void;
+    handleClickPrev: (e: React.MouseEvent<HTMLElement>) => void;
     mode?: ThemeModes;
     headerId: string;
     tabIndex?: TabIndex;

package/dist/types-ts4.5/internal/components/header.d.ts

@@ -8,8 +8,8 @@ interface HeaderProps {
     previousHeading: string;
     nextMonthLabel?: string;
     nextHeading: string;
-    handleClickNext?: () => void;
-    handleClickPrev?: () => void;
+    handleClickNext: (e: React.MouseEvent<HTMLElement>) => void;
+    handleClickPrev: (e: React.MouseEvent<HTMLElement>) => void;
     mode?: ThemeModes;
     headerId: string;
     tabIndex?: TabIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "13.2.1",
+  "version": "13.3.0",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -38,11 +30,9 @@
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/locale": "^2.5.0",
-    "@atlaskit/platform-feature-flags": "*",
     "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
-    "@atlaskit/visually-hidden": "^1.2.0",
+    "@atlaskit/tokens": "^1.18.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
@@ -53,11 +43,11 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "jest-in-case": "^1.0.2",
@@ -91,9 +81,12 @@
       ]
     }
   },
-  "platform-feature-flags": {
-    "platform.design-system-team.calendar-keyboard-accessibility_967h1": {
-      "type": "boolean"
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
     }
   },
   "af:exports": {