@atlaskit/color-picker 3.2.17 → 3.2.18

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/color-picker
 
+## 3.2.18
+
+### Patch Changes
+
+- [#112744](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112744)
+  [`1fc633df8a651`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1fc633df8a651) -
+  excluded aria-decribedby from tooltipProps for color option in ColorCard component
+- Updated dependencies
+
 ## 3.2.17
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../constants");
 var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _messages = _interopRequireDefault(require("../messages"));
+var _useCallbackRef = require("use-callback-ref");
 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 && Object.prototype.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; }
 /** @jsx jsx */
@@ -32,8 +32,6 @@ var ColorCard = function ColorCard(props) {
     onClick = props.onClick,
     onKeyDown = props.onKeyDown;
   var ref = (0, _react.useRef)(null);
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -68,14 +66,39 @@ var ColorCard = function ColorCard(props) {
   }, []);
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
-  }, (0, _react2.jsx)("div", {
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? function (tooltipProps) {
+    delete tooltipProps['aria-describedby'];
+    return (0, _react2.jsx)("div", (0, _extends2.default)({}, tooltipProps, {
+      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      onKeyDown: handleKeyDown,
+      role: "radio",
+      "aria-checked": selected,
+      "aria-label": label,
+      tabIndex: 0,
+      ref: (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref])
+    }), (0, _react2.jsx)("div", {
+      css: colorCardWrapperStyles
+    }, (0, _react2.jsx)("div", {
+      css: colorCardContentStyles,
+      style: {
+        background: value || 'transparent'
+      }
+    }, selected && (0, _react2.jsx)("div", {
+      css: colorCardContentCheckMarkStyles
+    }, (0, _react2.jsx)(_done.default, {
+      primaryColor: checkMarkColor,
+      label: ""
+    })))));
+  } : (0, _react2.jsx)("div", {
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
     "aria-checked": selected,
-    "aria-label": (0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? formatMessage(_messages.default.colorCardRadioItemLabel) : label,
+    "aria-label": label,
     tabIndex: 0,
     ref: ref
   }, (0, _react2.jsx)("div", {

package/dist/cjs/components/ColorPaletteMenu.js

@@ -36,7 +36,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.17"
+          packageVersion: "3.2.18"
         }
       })(createAnalyticsEvent);
     }
@@ -83,7 +83,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.17"
+  packageVersion: "3.2.18"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -39,7 +39,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.17";
+var packageVersion = "3.2.18";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/cjs/messages.js

@@ -10,10 +10,5 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
     id: 'jira.color-picker.src.color-picker-aria-label',
     defaultMessage: '{color} selected, {message}',
     description: 'This text is used as aria-label text in color picker component'
-  },
-  colorCardRadioItemLabel: {
-    id: 'jira.color-picker.src.color-card-radio-item-label',
-    defaultMessage: 'color option',
-    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

package/dist/es2019/components/ColorCard.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
@@ -5,10 +6,9 @@ import Tooltip from '@atlaskit/tooltip';
 import { KEY_ENTER, KEY_SPACE } from '../constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import messages from '../messages';
+import { mergeRefs } from 'use-callback-ref';
 const ColorCard = props => {
   const {
     value,
@@ -21,9 +21,6 @@ const ColorCard = props => {
     onKeyDown
   } = props;
   const ref = useRef(null);
-  const {
-    formatMessage
-  } = useIntl();
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
   }, []);
@@ -60,14 +57,39 @@ const ColorCard = props => {
   }, []);
   return jsx(Tooltip, {
     content: label
-  }, jsx("div", {
+  }, getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? tooltipProps => {
+    delete tooltipProps['aria-describedby'];
+    return jsx("div", _extends({}, tooltipProps, {
+      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      onKeyDown: handleKeyDown,
+      role: "radio",
+      "aria-checked": selected,
+      "aria-label": label,
+      tabIndex: 0,
+      ref: mergeRefs([ref, tooltipProps.ref])
+    }), jsx("div", {
+      css: colorCardWrapperStyles
+    }, jsx("div", {
+      css: colorCardContentStyles,
+      style: {
+        background: value || 'transparent'
+      }
+    }, selected && jsx("div", {
+      css: colorCardContentCheckMarkStyles
+    }, jsx(EditorDoneIcon, {
+      primaryColor: checkMarkColor,
+      label: ""
+    })))));
+  } : jsx("div", {
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
     "aria-checked": selected,
-    "aria-label": getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? formatMessage(messages.colorCardRadioItemLabel) : label,
+    "aria-label": label,
     tabIndex: 0,
     ref: ref
   }, jsx("div", {

package/dist/es2019/components/ColorPaletteMenu.js

@@ -25,7 +25,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.17"
+          packageVersion: "3.2.18"
         }
       })(createAnalyticsEvent);
     }
@@ -72,7 +72,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.17"
+  packageVersion: "3.2.18"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -23,7 +23,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.17";
+const packageVersion = "3.2.18";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/messages.js

@@ -4,10 +4,5 @@ export default defineMessages({
     id: 'jira.color-picker.src.color-picker-aria-label',
     defaultMessage: '{color} selected, {message}',
     description: 'This text is used as aria-label text in color picker component'
-  },
-  colorCardRadioItemLabel: {
-    id: 'jira.color-picker.src.color-card-radio-item-label',
-    defaultMessage: 'color option',
-    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

package/dist/esm/components/ColorCard.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
@@ -5,10 +6,9 @@ import Tooltip from '@atlaskit/tooltip';
 import { KEY_ENTER, KEY_SPACE } from '../constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import messages from '../messages';
+import { mergeRefs } from 'use-callback-ref';
 var ColorCard = function ColorCard(props) {
   var value = props.value,
     label = props.label,
@@ -20,8 +20,6 @@ var ColorCard = function ColorCard(props) {
     onClick = props.onClick,
     onKeyDown = props.onKeyDown;
   var ref = useRef(null);
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -56,14 +54,39 @@ var ColorCard = function ColorCard(props) {
   }, []);
   return jsx(Tooltip, {
     content: label
-  }, jsx("div", {
+  }, getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? function (tooltipProps) {
+    delete tooltipProps['aria-describedby'];
+    return jsx("div", _extends({}, tooltipProps, {
+      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      onKeyDown: handleKeyDown,
+      role: "radio",
+      "aria-checked": selected,
+      "aria-label": label,
+      tabIndex: 0,
+      ref: mergeRefs([ref, tooltipProps.ref])
+    }), jsx("div", {
+      css: colorCardWrapperStyles
+    }, jsx("div", {
+      css: colorCardContentStyles,
+      style: {
+        background: value || 'transparent'
+      }
+    }, selected && jsx("div", {
+      css: colorCardContentCheckMarkStyles
+    }, jsx(EditorDoneIcon, {
+      primaryColor: checkMarkColor,
+      label: ""
+    })))));
+  } : jsx("div", {
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
     "aria-checked": selected,
-    "aria-label": getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? formatMessage(messages.colorCardRadioItemLabel) : label,
+    "aria-label": label,
     tabIndex: 0,
     ref: ref
   }, jsx("div", {

package/dist/esm/components/ColorPaletteMenu.js

@@ -27,7 +27,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.17"
+          packageVersion: "3.2.18"
         }
       })(createAnalyticsEvent);
     }
@@ -74,7 +74,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.17"
+  packageVersion: "3.2.18"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -31,7 +31,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.17";
+var packageVersion = "3.2.18";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/esm/messages.js

@@ -4,10 +4,5 @@ export default defineMessages({
     id: 'jira.color-picker.src.color-picker-aria-label',
     defaultMessage: '{color} selected, {message}',
     description: 'This text is used as aria-label text in color picker component'
-  },
-  colorCardRadioItemLabel: {
-    id: 'jira.color-picker.src.color-card-radio-item-label',
-    defaultMessage: 'color option',
-    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

package/dist/types/messages.d.ts

@@ -4,10 +4,5 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
-    colorCardRadioItemLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };
 export default _default;

package/dist/types-ts4.5/messages.d.ts

@@ -4,10 +4,5 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
-    colorCardRadioItemLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.2.17",
+	"version": "3.2.18",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,20 +36,21 @@
 		"@atlaskit/icon": "^22.4.0",
 		"@atlaskit/platform-feature-flags": "^0.2.5",
 		"@atlaskit/select": "^17.11.0",
-		"@atlaskit/theme": "^12.10.0",
-		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/theme": "^12.11.0",
+		"@atlaskit/tokens": "^1.52.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"memoize-one": "^6.0.0",
-		"react-intl-next": "npm:react-intl@^5.18.1"
+		"react-intl-next": "npm:react-intl@^5.18.1",
+		"use-callback-ref": "^1.2.3"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0"
 	},
 	"devDependencies": {
 		"@af/visual-regression": "*",
-		"@atlaskit/primitives": "^7.4.0",
+		"@atlaskit/primitives": "^8.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/user-event": "^14.4.3",