@atlaskit/calendar 13.2.0 → 13.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/calendar
 
+## 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
+
+- [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
+- Updated dependencies
+
 ## 13.2.0
 
 ### Minor Changes

package/dist/cjs/calendar.js

@@ -37,7 +37,7 @@ var boxStyles = (0, _primitives.xcss)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.2.0"
+  packageVersion: "13.2.2"
 };
 var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,

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

@@ -5,6 +5,7 @@ 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"));
@@ -32,6 +33,30 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     tabIndex = _ref.tabIndex,
     testId = _ref.testId;
   var announceId = (0, _useUniqueId.default)('month-year-announce');
+
+  // 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);
+  };
   var renderedHeading = (0, _react2.jsx)(_heading.default, {
     level: "h400",
     as: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
@@ -49,7 +74,7 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
     appearance: "subtle",
     spacing: "none",
     tabIndex: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickPrev,
+    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,
@@ -60,14 +85,14 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
   }), (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",
+    "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
   }, renderedHeading) : renderedHeading, (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,
+    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,

package/dist/es2019/calendar.js

@@ -27,7 +27,7 @@ const boxStyles = xcss({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.2.0"
+  packageVersion: "13.2.2"
 };
 const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   day,

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

@@ -1,5 +1,5 @@
 /** @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';
@@ -23,6 +23,27 @@ const Header = /*#__PURE__*/memo(function Header({
   testId
 }) {
   const announceId = useUniqueId('month-year-announce');
+
+  // 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);
+  };
   const renderedHeading = jsx(Heading, {
     level: "h400",
     as: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
@@ -40,7 +61,7 @@ const Header = /*#__PURE__*/memo(function Header({
     appearance: "subtle",
     spacing: "none",
     tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickPrev,
+    onClick: handlePrevMonthInteraction,
     testId: testId && `${testId}--previous-month`,
     iconBefore: jsx(ArrowleftIcon, {
       label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${previousMonthLabel}, ${previousHeading}` : previousMonthLabel,
@@ -51,14 +72,14 @@ const Header = /*#__PURE__*/memo(function Header({
   }), 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",
+    "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && `${testId}--current-month-year--container`
   }, renderedHeading) : renderedHeading, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickNext,
+    onClick: handleNextMonthInteraction,
     testId: testId && `${testId}--next-month`,
     iconBefore: jsx(ArrowrightIcon, {
       label: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? `${nextMonthLabel}, ${nextHeading}` : nextMonthLabel,

package/dist/esm/calendar.js

@@ -31,7 +31,7 @@ var boxStyles = xcss({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.2.0"
+  packageVersion: "13.2.2"
 };
 var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,

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

@@ -1,5 +1,6 @@
+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';
@@ -24,6 +25,30 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
     tabIndex = _ref.tabIndex,
     testId = _ref.testId;
   var announceId = useUniqueId('month-year-announce');
+
+  // 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);
+  };
   var renderedHeading = jsx(Heading, {
     level: "h400",
     as: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? 'h2' : 'div',
@@ -41,7 +66,7 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
     appearance: "subtle",
     spacing: "none",
     tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickPrev,
+    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,
@@ -52,14 +77,14 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
   }), 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",
+    "aria-live": hasInteractedWithMonth ? 'polite' : undefined,
     id: announceId,
     testId: testId && "".concat(testId, "--current-month-year--container")
   }, renderedHeading) : renderedHeading, jsx(Button, {
     appearance: "subtle",
     spacing: "none",
     tabIndex: getBooleanFF('platform.design-system-team.calendar-keyboard-accessibility_967h1') ? tabIndex : -1,
-    onClick: handleClickNext,
+    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,

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.0",
+  "version": "13.2.2",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/platform-feature-flags": "*",
     "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.15.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -52,6 +52,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@af/accessibility-testing": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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