@atlaskit/flag 15.8.6 → 15.8.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/flag
 
+## 15.8.8
+
+### Patch Changes
+
+- [#162319](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162319)
+  [`2ac6ec33aa35a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ac6ec33aa35a) -
+  Added aria-hidden to title and description when delayAnnouncement enabled to avoid duplicate
+  announcement. Also removed condition for role alert
+
+## 15.8.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.8.6
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.8.6";
+var packageVersion = "15.8.8";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag.js

@@ -57,7 +57,7 @@ var flagWrapperStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.8.6"
+  packageVersion: "15.8.8"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,
@@ -163,11 +163,9 @@ var Flag = function Flag(props) {
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
   // when delayAnnouncement is available we will use a hidden content for announcement
-  var delayedAnnouncement = delayAnnouncement ? (0, _react2.jsx)(_visuallyHidden.default, {
-    role: "alert"
-  }, title, description) : undefined;
+  var delayedAnnouncement = delayAnnouncement ? (0, _react2.jsx)(_visuallyHidden.default, null, title, description) : undefined;
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    role: delayAnnouncement ? undefined : 'alert',
+    role: "alert",
     css: flagWrapperStyles,
     "data-testid": testId
   }, autoDismissProps), (0, _react2.jsx)(_primitives.Box, {
@@ -198,7 +196,10 @@ var Flag = function Flag(props) {
     as: "h".concat(headingLevel),
     size: "xsmall",
     color: textColor
-  }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _react2.jsx)(_internal.DismissButton, {
+  }, (0, _react2.jsx)("span", {
+    /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */
+    "aria-hidden": isDelayToAnnounce
+  }, title))), isDismissable ? !(isBold && !description && !actions.length) && (0, _react2.jsx)(_internal.DismissButton, {
     testId: testId,
     appearance: appearance,
     isBold: isBold,
@@ -214,6 +215,8 @@ var Flag = function Flag(props) {
     },
     css: descriptionStyles,
     "data-testid": testId && "".concat(testId, "-description")
+    /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */,
+    "aria-hidden": isDelayToAnnounce
   }, description), (0, _react2.jsx)(_flagActions.default, {
     actions: actions,
     appearance: appearance,

package/dist/cjs/internal/dismiss-button.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
 var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
-var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _primitives = require("@atlaskit/primitives");
 var _theme = require("../theme");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -47,9 +47,10 @@ var DismissButtonComponent = function DismissButtonComponent(_ref) {
     xcss: buttonStyles,
     onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    testId: buttonTestId
+    testId: buttonTestId,
+    "aria-label": buttonLabel
   }, /*#__PURE__*/_react.default.createElement(ButtonIcon, {
-    label: buttonLabel,
+    label: "",
     size: size,
     primaryColor: _theme.flagTextColorToken[appearance]
   }));

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "15.8.6";
+const packageVersion = "15.8.8";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag.js

@@ -49,7 +49,7 @@ const flagWrapperStyles = css({
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.8.6"
+  packageVersion: "15.8.8"
 };
 const transitionStyles = css({
   flexGrow: 1,
@@ -147,11 +147,9 @@ const Flag = props => {
   const isDismissable = isBold || isDismissAllowed;
   const shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
   // when delayAnnouncement is available we will use a hidden content for announcement
-  const delayedAnnouncement = delayAnnouncement ? jsx(VisuallyHidden, {
-    role: "alert"
-  }, title, description) : undefined;
+  const delayedAnnouncement = delayAnnouncement ? jsx(VisuallyHidden, null, title, description) : undefined;
   return jsx("div", _extends({
-    role: delayAnnouncement ? undefined : 'alert',
+    role: "alert",
     css: flagWrapperStyles,
     "data-testid": testId
   }, autoDismissProps), jsx(Box, {
@@ -184,7 +182,10 @@ const Flag = props => {
     as: `h${headingLevel}`,
     size: "xsmall",
     color: textColor
-  }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
+  }, jsx("span", {
+    /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */
+    "aria-hidden": isDelayToAnnounce
+  }, title))), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
     isBold: isBold,
@@ -200,6 +201,8 @@ const Flag = props => {
     },
     css: descriptionStyles,
     "data-testid": testId && `${testId}-description`
+    /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */,
+    "aria-hidden": isDelayToAnnounce
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,

package/dist/es2019/internal/dismiss-button.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { flagTextColorToken } from '../theme';
 const buttonStyles = xcss({
@@ -38,9 +38,10 @@ const DismissButtonComponent = ({
     xcss: buttonStyles,
     onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    testId: buttonTestId
+    testId: buttonTestId,
+    "aria-label": buttonLabel
   }, /*#__PURE__*/React.createElement(ButtonIcon, {
-    label: buttonLabel,
+    label: "",
     size: size,
     primaryColor: flagTextColorToken[appearance]
   }));

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.8.6";
+var packageVersion = "15.8.8";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag.js

@@ -53,7 +53,7 @@ var flagWrapperStyles = css({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.8.6"
+  packageVersion: "15.8.8"
 };
 var transitionStyles = css({
   flexGrow: 1,
@@ -159,11 +159,9 @@ var Flag = function Flag(props) {
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
   // when delayAnnouncement is available we will use a hidden content for announcement
-  var delayedAnnouncement = delayAnnouncement ? jsx(VisuallyHidden, {
-    role: "alert"
-  }, title, description) : undefined;
+  var delayedAnnouncement = delayAnnouncement ? jsx(VisuallyHidden, null, title, description) : undefined;
   return jsx("div", _extends({
-    role: delayAnnouncement ? undefined : 'alert',
+    role: "alert",
     css: flagWrapperStyles,
     "data-testid": testId
   }, autoDismissProps), jsx(Box, {
@@ -194,7 +192,10 @@ var Flag = function Flag(props) {
     as: "h".concat(headingLevel),
     size: "xsmall",
     color: textColor
-  }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
+  }, jsx("span", {
+    /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */
+    "aria-hidden": isDelayToAnnounce
+  }, title))), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
     isBold: isBold,
@@ -210,6 +211,8 @@ var Flag = function Flag(props) {
     },
     css: descriptionStyles,
     "data-testid": testId && "".concat(testId, "-description")
+    /* if isDelayToAnnounce is true, we will hide the content form screen reader to avoid duplicate announcement */,
+    "aria-hidden": isDelayToAnnounce
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,

package/dist/esm/internal/dismiss-button.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { flagTextColorToken } from '../theme';
 var buttonStyles = xcss({
@@ -37,9 +37,10 @@ var DismissButtonComponent = function DismissButtonComponent(_ref) {
     xcss: buttonStyles,
     onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    testId: buttonTestId
+    testId: buttonTestId,
+    "aria-label": buttonLabel
   }, /*#__PURE__*/React.createElement(ButtonIcon, {
-    label: buttonLabel,
+    label: "",
     size: size,
     primaryColor: flagTextColorToken[appearance]
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.8.6",
+	"version": "15.8.8",
 	"description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,15 +43,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/button": "^20.3.0",
+		"@atlaskit/ds-lib": "^3.2.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/portal": "^4.9.0",
-		"@atlaskit/primitives": "^12.2.0",
+		"@atlaskit/primitives": "^13.1.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"