@atlaskit/color-picker 3.4.1 → 3.4.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/color-picker
 
+## 3.4.3
+
+### Patch Changes
+
+- [#153070](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153070)
+  [`f04b3abac1315`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f04b3abac1315) -
+  Removed FG to expose color palette event
+
+## 3.4.2
+
+### Patch Changes
+
+- [#150969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150969)
+  [`a15fc4e53f226`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a15fc4e53f226) -
+  Fixed a11y violations in ColorPicker and ColorPaletteMenu
+
 ## 3.4.1
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -39,7 +39,6 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     checkMarkColor = _props$checkMarkColor === void 0 ? _colors.N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
-    onClickOld = props.onClickOld,
     onKeyDown = props.onKeyDown;
   var ref = (0, _react.useRef)(null);
   var isInitialFocus = (0, _react.useRef)(true);
@@ -48,27 +47,18 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     event.preventDefault();
   }, []);
   var handleClick = (0, _react.useCallback)(function (event) {
-    if ((0, _platformFeatureFlags.fg)('platform_color_palette-expose-event')) {
-      if (onClick) {
-        event.preventDefault();
-        onClick(event, value);
-      }
-    } else {
-      if (onClickOld) {
-        event.preventDefault();
-        onClickOld(value);
-      }
+    if (onClick) {
+      event.preventDefault();
+      onClick(event, value);
     }
-  }, [onClick, onClickOld, value]);
+  }, [onClick, value]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if ((isColorPaletteMenu || isTabbing === undefined || isTabbing) && (onClickOld && !(0, _platformFeatureFlags.fg)('platform_color_palette-expose-event') || onClick && (0, _platformFeatureFlags.fg)('platform_color_palette-expose-event')) && (event.key === _constants.KEY_ENTER || event.key === _constants.KEY_SPACE)) {
+    if ((isColorPaletteMenu || isTabbing === undefined || isTabbing) && onClick && (event.key === _constants.KEY_ENTER || event.key === _constants.KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
-
-      // Remove optional call on FG cleanup platform_color_palette-expose-event
-      (0, _platformFeatureFlags.fg)('platform_color_palette-expose-event') ? onClick === null || onClick === void 0 ? void 0 : onClick(event, value) : onClickOld === null || onClickOld === void 0 ? void 0 : onClickOld(value);
+      onClick(event, value);
     }
     if (isColorPaletteMenu) {
       onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
@@ -76,7 +66,7 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
       event.preventDefault();
       event.stopPropagation();
     }
-  }, [isColorPaletteMenu, isTabbing, value, onClick, onClickOld, onKeyDown]);
+  }, [isColorPaletteMenu, isTabbing, value, onClick, onKeyDown]);
   (0, _react.useImperativeHandle)(componentRef, function () {
     return {
       focus: function focus() {
@@ -93,16 +83,20 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
       }
     };
   }, [autoFocus, isColorPaletteMenu, initialFocusRef]);
+  var isInsideMenuRole = isInsideMenu ? 'menuitemradio' : 'radio';
+  var role = isColorPaletteMenu ? isInsideMenuRole : 'presentation';
+  var ariaChecked = isColorPaletteMenu ? selected : undefined;
+  var ariaLabel = isColorPaletteMenu ? label : undefined;
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, function (tooltipProps) {
     delete tooltipProps['aria-describedby'];
     return (0, _react2.jsx)("div", (0, _extends2.default)({}, tooltipProps, {
       ref: initialFocusRef ? (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref, initialFocusRef]) : (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref]),
-      role: isInsideMenu ? 'menuitemradio' : 'radio',
+      role: (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? role : isInsideMenuRole,
       tabIndex: selected ? 0 : -1,
-      "aria-checked": selected,
-      "aria-label": label,
+      "aria-checked": (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? ariaChecked : selected,
+      "aria-label": (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? ariaLabel : label,
       css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,

package/dist/cjs/components/ColorPaletteMenu.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ColorPaletteMenuWithoutAnalytics = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _types = require("../types");
@@ -32,7 +31,6 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     isInsideMenu = _ref$isInsideMenu === void 0 ? true : _ref$isInsideMenu,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
-    onChangeOld = _ref.onChangeOld,
     palette = _ref.palette,
     selectedColor = _ref.selectedColor,
     checkMarkColor = _ref.checkMarkColor,
@@ -64,7 +62,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.4.1"
+          packageVersion: "3.4.3"
         }
       })(createAnalyticsEvent);
     }
@@ -73,12 +71,8 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
   var colorCardRefs = (0, _react.useMemo)(function () {
     return [];
   }, []);
-  var handleChangeOld = function handleChangeOld(value) {
-    onChangeOld === null || onChangeOld === void 0 || onChangeOld(value, changeAnalyticsCaller());
-  };
   var handleChange = function handleChange(event, value) {
-    // Set to required on FG cleanup platform_color_palette-expose-event
-    onChange === null || onChange === void 0 || onChange(event, value, changeAnalyticsCaller());
+    onChange(event, value, changeAnalyticsCaller());
   };
   (0, _react.useEffect)(function () {
     var _colorCardRefs$focuse;
@@ -112,9 +106,11 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         break;
     }
   }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
+  var isInsideMenuRole = (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? 'menu' : 'group';
+  var role = isInsideMenu ? isInsideMenuRole : 'radiogroup';
   return (0, _react2.jsx)("div", {
     "aria-label": fullLabel,
-    role: isInsideMenu ? 'group' : 'radiogroup'
+    role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: [colorPaletteMenuStyles, mode === _types.Mode.Standard && colorPaletteMenuStandardStyles],
@@ -132,18 +128,14 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     return (0, _react2.jsx)("div", {
       css: colorCardWrapperStyles,
       key: value
-    }, (0, _react2.jsx)(_ColorCard.default, (0, _extends2.default)({
+    }, (0, _react2.jsx)(_ColorCard.default, {
       type: _constants.COLOR_PALETTE_MENU,
       label: label,
       value: value,
       checkMarkColor: checkMarkColor,
       isOption: true,
-      selected: value === selectedValue.value
-    }, (0, _platformFeatureFlags.fg)('platform_color_palette-expose-event') ? {
-      onClick: handleChange
-    } : {
-      onClickOld: handleChangeOld
-    }, {
+      selected: value === selectedValue.value,
+      onClick: handleChange,
       ref: function ref(_ref4) {
         colorCardRefs[index] = _ref4;
       },
@@ -151,13 +143,13 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       isInsideMenu: isInsideMenu,
       onKeyDown: handleKeyDown
-    })));
+    }));
   })));
 };
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.4.1"
+  packageVersion: "3.4.3"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

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

package/dist/cjs/components/components.js

@@ -10,6 +10,9 @@ var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
 var _react = require("@emotion/react");
 var _constants = require("../constants");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _reactIntlNext = require("react-intl-next");
+var _messages = _interopRequireDefault(require("../messages"));
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -21,9 +24,14 @@ var MenuList = exports.MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
     innerRef = props.innerRef,
     children = props.children;
-  return (0, _react.jsx)("div", {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return (0, _react.jsx)("div", (0, _extends2.default)({
     css: colorPaletteContainerStyles,
-    role: "group",
+    role: (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? 'listbox' : 'group'
+  }, (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? {
+    'aria-label': formatMessage(_messages.default.menuListAriaLabel)
+  } : {}, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? (0, _utils.getWidth)(cols) : undefined
@@ -31,7 +39,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
     //@ts-ignore react-select unsupported props
     ,
     ref: innerRef
-  }, children);
+  }), children);
 };
 var Option = exports.Option = function Option(props) {
   var _props$data = props.data,
@@ -46,7 +54,9 @@ var Option = exports.Option = function Option(props) {
     innerProps = props.innerProps;
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: colorCardWrapperStyles
-  }, innerProps), (0, _react.jsx)(_ColorCard.default, {
+  }, innerProps, (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? {
+    'aria-label': label
+  } : {}), (0, _react.jsx)(_ColorCard.default, {
     type: _constants.COLOR_PICKER,
     label: label,
     value: value,

package/dist/cjs/messages.js

@@ -10,5 +10,10 @@ 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'
+  },
+  menuListAriaLabel: {
+    id: 'jira.color-picker.src.menu-list-aria-label',
+    defaultMessage: 'Color picker list',
+    description: 'This text is used as aria-label text for the listbox element in color picker component'
   }
 });

package/dist/es2019/components/ColorCard.js

@@ -25,7 +25,6 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     checkMarkColor = N0,
     isTabbing,
     onClick,
-    onClickOld,
     onKeyDown
   } = props;
   const ref = useRef(null);
@@ -35,27 +34,18 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     event.preventDefault();
   }, []);
   const handleClick = useCallback(event => {
-    if (fg('platform_color_palette-expose-event')) {
-      if (onClick) {
-        event.preventDefault();
-        onClick(event, value);
-      }
-    } else {
-      if (onClickOld) {
-        event.preventDefault();
-        onClickOld(value);
-      }
+    if (onClick) {
+      event.preventDefault();
+      onClick(event, value);
     }
-  }, [onClick, onClickOld, value]);
+  }, [onClick, value]);
   const handleKeyDown = useCallback(event => {
-    if ((isColorPaletteMenu || isTabbing === undefined || isTabbing) && (onClickOld && !fg('platform_color_palette-expose-event') || onClick && fg('platform_color_palette-expose-event')) && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
+    if ((isColorPaletteMenu || isTabbing === undefined || isTabbing) && onClick && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
-
-      // Remove optional call on FG cleanup platform_color_palette-expose-event
-      fg('platform_color_palette-expose-event') ? onClick === null || onClick === void 0 ? void 0 : onClick(event, value) : onClickOld === null || onClickOld === void 0 ? void 0 : onClickOld(value);
+      onClick(event, value);
     }
     if (isColorPaletteMenu) {
       onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
@@ -63,7 +53,7 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
       event.preventDefault();
       event.stopPropagation();
     }
-  }, [isColorPaletteMenu, isTabbing, value, onClick, onClickOld, onKeyDown]);
+  }, [isColorPaletteMenu, isTabbing, value, onClick, onKeyDown]);
   useImperativeHandle(componentRef, () => ({
     focus: () => {
       if (isColorPaletteMenu) {
@@ -78,16 +68,20 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
       }
     }
   }), [autoFocus, isColorPaletteMenu, initialFocusRef]);
+  const isInsideMenuRole = isInsideMenu ? 'menuitemradio' : 'radio';
+  const role = isColorPaletteMenu ? isInsideMenuRole : 'presentation';
+  const ariaChecked = isColorPaletteMenu ? selected : undefined;
+  const ariaLabel = isColorPaletteMenu ? label : undefined;
   return jsx(Tooltip, {
     content: label
   }, tooltipProps => {
     delete tooltipProps['aria-describedby'];
     return jsx("div", _extends({}, tooltipProps, {
       ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
-      role: isInsideMenu ? 'menuitemradio' : 'radio',
+      role: fg('platform_color_picker-fix-a11y-violations') ? role : isInsideMenuRole,
       tabIndex: selected ? 0 : -1,
-      "aria-checked": selected,
-      "aria-label": label,
+      "aria-checked": fg('platform_color_picker-fix-a11y-violations') ? ariaChecked : selected,
+      "aria-label": fg('platform_color_picker-fix-a11y-violations') ? ariaLabel : label,
       css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,

package/dist/es2019/components/ColorPaletteMenu.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -19,7 +18,6 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   isInsideMenu = true,
   createAnalyticsEvent,
   onChange,
-  onChangeOld,
   palette,
   selectedColor,
   checkMarkColor,
@@ -46,19 +44,15 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.4.1"
+          packageVersion: "3.4.3"
         }
       })(createAnalyticsEvent);
     }
     return undefined;
   };
   const colorCardRefs = useMemo(() => [], []);
-  const handleChangeOld = value => {
-    onChangeOld === null || onChangeOld === void 0 ? void 0 : onChangeOld(value, changeAnalyticsCaller());
-  };
   const handleChange = (event, value) => {
-    // Set to required on FG cleanup platform_color_palette-expose-event
-    onChange === null || onChange === void 0 ? void 0 : onChange(event, value, changeAnalyticsCaller());
+    onChange(event, value, changeAnalyticsCaller());
   };
   useEffect(() => {
     var _colorCardRefs$focuse;
@@ -88,9 +82,11 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         break;
     }
   }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
+  const isInsideMenuRole = fg('platform_color_picker-fix-a11y-violations') ? 'menu' : 'group';
+  const role = isInsideMenu ? isInsideMenuRole : 'radiogroup';
   return jsx("div", {
     "aria-label": fullLabel,
-    role: isInsideMenu ? 'group' : 'radiogroup'
+    role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
@@ -108,18 +104,14 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   }, index) => jsx("div", {
     css: colorCardWrapperStyles,
     key: value
-  }, jsx(ColorCard, _extends({
+  }, jsx(ColorCard, {
     type: COLOR_PALETTE_MENU,
     label: label,
     value: value,
     checkMarkColor: checkMarkColor,
     isOption: true,
-    selected: value === selectedValue.value
-  }, fg('platform_color_palette-expose-event') ? {
-    onClick: handleChange
-  } : {
-    onClickOld: handleChangeOld
-  }, {
+    selected: value === selectedValue.value,
+    onClick: handleChange,
     ref: ref => {
       colorCardRefs[index] = ref;
     },
@@ -127,12 +119,12 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
     isInsideMenu: isInsideMenu,
     onKeyDown: handleKeyDown
-  }))))));
+  })))));
 };
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.4.1"
+  packageVersion: "3.4.3"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

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

package/dist/es2019/components/components.js

@@ -9,6 +9,9 @@ import { getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { COLOR_PICKER } from '../constants';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useIntl } from 'react-intl-next';
+import messages from '../messages';
 export const MenuList = props => {
   const {
     //@ts-ignore react-select unsupported props
@@ -18,9 +21,15 @@ export const MenuList = props => {
     innerRef,
     children
   } = props;
-  return jsx("div", {
+  const {
+    formatMessage
+  } = useIntl();
+  return jsx("div", _extends({
     css: colorPaletteContainerStyles,
-    role: "group",
+    role: fg('platform_color_picker-fix-a11y-violations') ? 'listbox' : 'group'
+  }, fg('platform_color_picker-fix-a11y-violations') ? {
+    'aria-label': formatMessage(messages.menuListAriaLabel)
+  } : {}, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
@@ -28,7 +37,7 @@ export const MenuList = props => {
     //@ts-ignore react-select unsupported props
     ,
     ref: innerRef
-  }, children);
+  }), children);
 };
 export const Option = props => {
   const {
@@ -48,7 +57,9 @@ export const Option = props => {
   } = props;
   return jsx("div", _extends({
     css: colorCardWrapperStyles
-  }, innerProps), jsx(ColorCard, {
+  }, innerProps, fg('platform_color_picker-fix-a11y-violations') ? {
+    'aria-label': label
+  } : {}), jsx(ColorCard, {
     type: COLOR_PICKER,
     label: label,
     value: value,

package/dist/es2019/messages.js

@@ -4,5 +4,10 @@ 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'
+  },
+  menuListAriaLabel: {
+    id: 'jira.color-picker.src.menu-list-aria-label',
+    defaultMessage: 'Color picker list',
+    description: 'This text is used as aria-label text for the listbox element in color picker component'
   }
 });

package/dist/esm/components/ColorCard.js

@@ -27,7 +27,6 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     checkMarkColor = _props$checkMarkColor === void 0 ? N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
-    onClickOld = props.onClickOld,
     onKeyDown = props.onKeyDown;
   var ref = useRef(null);
   var isInitialFocus = useRef(true);
@@ -36,27 +35,18 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     event.preventDefault();
   }, []);
   var handleClick = useCallback(function (event) {
-    if (fg('platform_color_palette-expose-event')) {
-      if (onClick) {
-        event.preventDefault();
-        onClick(event, value);
-      }
-    } else {
-      if (onClickOld) {
-        event.preventDefault();
-        onClickOld(value);
-      }
+    if (onClick) {
+      event.preventDefault();
+      onClick(event, value);
     }
-  }, [onClick, onClickOld, value]);
+  }, [onClick, value]);
   var handleKeyDown = useCallback(function (event) {
-    if ((isColorPaletteMenu || isTabbing === undefined || isTabbing) && (onClickOld && !fg('platform_color_palette-expose-event') || onClick && fg('platform_color_palette-expose-event')) && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
+    if ((isColorPaletteMenu || isTabbing === undefined || isTabbing) && onClick && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
-
-      // Remove optional call on FG cleanup platform_color_palette-expose-event
-      fg('platform_color_palette-expose-event') ? onClick === null || onClick === void 0 ? void 0 : onClick(event, value) : onClickOld === null || onClickOld === void 0 ? void 0 : onClickOld(value);
+      onClick(event, value);
     }
     if (isColorPaletteMenu) {
       onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
@@ -64,7 +54,7 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
       event.preventDefault();
       event.stopPropagation();
     }
-  }, [isColorPaletteMenu, isTabbing, value, onClick, onClickOld, onKeyDown]);
+  }, [isColorPaletteMenu, isTabbing, value, onClick, onKeyDown]);
   useImperativeHandle(componentRef, function () {
     return {
       focus: function focus() {
@@ -81,16 +71,20 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
       }
     };
   }, [autoFocus, isColorPaletteMenu, initialFocusRef]);
+  var isInsideMenuRole = isInsideMenu ? 'menuitemradio' : 'radio';
+  var role = isColorPaletteMenu ? isInsideMenuRole : 'presentation';
+  var ariaChecked = isColorPaletteMenu ? selected : undefined;
+  var ariaLabel = isColorPaletteMenu ? label : undefined;
   return jsx(Tooltip, {
     content: label
   }, function (tooltipProps) {
     delete tooltipProps['aria-describedby'];
     return jsx("div", _extends({}, tooltipProps, {
       ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
-      role: isInsideMenu ? 'menuitemradio' : 'radio',
+      role: fg('platform_color_picker-fix-a11y-violations') ? role : isInsideMenuRole,
       tabIndex: selected ? 0 : -1,
-      "aria-checked": selected,
-      "aria-label": label,
+      "aria-checked": fg('platform_color_picker-fix-a11y-violations') ? ariaChecked : selected,
+      "aria-label": fg('platform_color_picker-fix-a11y-violations') ? ariaLabel : label,
       css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,

package/dist/esm/components/ColorPaletteMenu.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
@@ -23,7 +22,6 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     isInsideMenu = _ref$isInsideMenu === void 0 ? true : _ref$isInsideMenu,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
-    onChangeOld = _ref.onChangeOld,
     palette = _ref.palette,
     selectedColor = _ref.selectedColor,
     checkMarkColor = _ref.checkMarkColor,
@@ -55,7 +53,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.4.1"
+          packageVersion: "3.4.3"
         }
       })(createAnalyticsEvent);
     }
@@ -64,12 +62,8 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
   var colorCardRefs = useMemo(function () {
     return [];
   }, []);
-  var handleChangeOld = function handleChangeOld(value) {
-    onChangeOld === null || onChangeOld === void 0 || onChangeOld(value, changeAnalyticsCaller());
-  };
   var handleChange = function handleChange(event, value) {
-    // Set to required on FG cleanup platform_color_palette-expose-event
-    onChange === null || onChange === void 0 || onChange(event, value, changeAnalyticsCaller());
+    onChange(event, value, changeAnalyticsCaller());
   };
   useEffect(function () {
     var _colorCardRefs$focuse;
@@ -103,9 +97,11 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         break;
     }
   }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
+  var isInsideMenuRole = fg('platform_color_picker-fix-a11y-violations') ? 'menu' : 'group';
+  var role = isInsideMenu ? isInsideMenuRole : 'radiogroup';
   return jsx("div", {
     "aria-label": fullLabel,
-    role: isInsideMenu ? 'group' : 'radiogroup'
+    role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
@@ -123,18 +119,14 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     return jsx("div", {
       css: colorCardWrapperStyles,
       key: value
-    }, jsx(ColorCard, _extends({
+    }, jsx(ColorCard, {
       type: COLOR_PALETTE_MENU,
       label: label,
       value: value,
       checkMarkColor: checkMarkColor,
       isOption: true,
-      selected: value === selectedValue.value
-    }, fg('platform_color_palette-expose-event') ? {
-      onClick: handleChange
-    } : {
-      onClickOld: handleChangeOld
-    }, {
+      selected: value === selectedValue.value,
+      onClick: handleChange,
       ref: function ref(_ref4) {
         colorCardRefs[index] = _ref4;
       },
@@ -142,13 +134,13 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       isInsideMenu: isInsideMenu,
       onKeyDown: handleKeyDown
-    })));
+    }));
   })));
 };
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.4.1"
+  packageVersion: "3.4.3"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

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

package/dist/esm/components/components.js

@@ -9,13 +9,21 @@ import { getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { COLOR_PICKER } from '../constants';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useIntl } from 'react-intl-next';
+import messages from '../messages';
 export var MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
     innerRef = props.innerRef,
     children = props.children;
-  return jsx("div", {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return jsx("div", _extends({
     css: colorPaletteContainerStyles,
-    role: "group",
+    role: fg('platform_color_picker-fix-a11y-violations') ? 'listbox' : 'group'
+  }, fg('platform_color_picker-fix-a11y-violations') ? {
+    'aria-label': formatMessage(messages.menuListAriaLabel)
+  } : {}, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
@@ -23,7 +31,7 @@ export var MenuList = function MenuList(props) {
     //@ts-ignore react-select unsupported props
     ,
     ref: innerRef
-  }, children);
+  }), children);
 };
 export var Option = function Option(props) {
   var _props$data = props.data,
@@ -38,7 +46,9 @@ export var Option = function Option(props) {
     innerProps = props.innerProps;
   return jsx("div", _extends({
     css: colorCardWrapperStyles
-  }, innerProps), jsx(ColorCard, {
+  }, innerProps, fg('platform_color_picker-fix-a11y-violations') ? {
+    'aria-label': label
+  } : {}), jsx(ColorCard, {
     type: COLOR_PICKER,
     label: label,
     value: value,

package/dist/esm/messages.js

@@ -4,5 +4,10 @@ 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'
+  },
+  menuListAriaLabel: {
+    id: 'jira.color-picker.src.menu-list-aria-label',
+    defaultMessage: 'Color picker list',
+    description: 'This text is used as aria-label text for the listbox element in color picker component'
   }
 });

package/dist/types/components/ColorCard.d.ts

@@ -11,7 +11,6 @@ export interface Props {
     type: ColorCardType;
     value: string;
     label: string;
-    onClickOld?: (value: string) => void;
     onClick?: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     checkMarkColor?: string;

package/dist/types/components/ColorPaletteMenu.d.ts

@@ -23,10 +23,8 @@ export type Props = {
     cols: number;
     /** color of checkmark on selected color */
     checkMarkColor?: string;
-    /** onChange handler deprecated */
-    onChangeOld?: (value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** onChange handler */
-    onChange?: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
+    onChange: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
     createAnalyticsEvent?: any;
     /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
@@ -34,6 +32,6 @@ export type Props = {
     /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
     initialFocusRef?: Ref<HTMLDivElement>;
 };
-export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, onChangeOld, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "onChangeOld" | "mode"> & import("react").RefAttributes<any>>;
+export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/ColorPicker.d.ts

@@ -35,5 +35,7 @@ export interface Props {
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/messages.d.ts

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

package/dist/types-ts4.5/components/ColorCard.d.ts

@@ -11,7 +11,6 @@ export interface Props {
     type: ColorCardType;
     value: string;
     label: string;
-    onClickOld?: (value: string) => void;
     onClick?: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     checkMarkColor?: string;

package/dist/types-ts4.5/components/ColorPaletteMenu.d.ts

@@ -23,10 +23,8 @@ export type Props = {
     cols: number;
     /** color of checkmark on selected color */
     checkMarkColor?: string;
-    /** onChange handler deprecated */
-    onChangeOld?: (value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** onChange handler */
-    onChange?: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
+    onChange: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
     createAnalyticsEvent?: any;
     /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
@@ -34,6 +32,6 @@ export type Props = {
     /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
     initialFocusRef?: Ref<HTMLDivElement>;
 };
-export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, onChangeOld, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "onChangeOld" | "mode"> & import("react").RefAttributes<any>>;
+export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/ColorPicker.d.ts

@@ -35,5 +35,7 @@ export interface Props {
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
 export default _default;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.4.1",
+	"version": "3.4.3",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
-		"@atlaskit/select": "^18.0.0",
-		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/select": "^18.1.0",
+		"@atlaskit/theme": "^13.1.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
@@ -49,6 +49,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/a11y-jest-testing": "*",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
@@ -75,10 +76,10 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_color_palette-expose-event": {
+		"platform-design-system-dsp-20821-color-pickr-focus": {
 			"type": "boolean"
 		},
-		"platform-design-system-dsp-20821-color-pickr-focus": {
+		"platform_color_picker-fix-a11y-violations": {
 			"type": "boolean"
 		}
 	}