@atlaskit/color-picker 3.3.1 → 3.3.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/color-picker
 
+## 3.3.2
+
+### Patch Changes
+
+- [#141841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141841)
+  [`c47656cb21bcc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c47656cb21bcc) -
+  Clean up color palette menu A11y FG
+
 ## 3.3.1
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -26,7 +26,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRef) {
   var type = props.type,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
     initialFocusRef = props.initialFocusRef,
+    _props$isInsideMenu = props.isInsideMenu,
+    isInsideMenu = _props$isInsideMenu === void 0 ? true : _props$isInsideMenu,
     value = props.value,
     label = props.label,
     selected = props.selected,
@@ -40,7 +44,6 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
   var ref = (0, _react.useRef)(null);
   var isInitialFocus = (0, _react.useRef)(true);
   var isColorPaletteMenu = type === _constants.COLOR_PALETTE_MENU;
-  var isTabbingIgnored = (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? isColorPaletteMenu : false;
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -58,7 +61,7 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     }
   }, [onClick, onClickOld, value]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if ((isTabbingIgnored || 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) && (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)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
@@ -67,37 +70,20 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
       // 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);
     }
-    if ((0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
-      if (isColorPaletteMenu) {
-        onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-      } else if (event.key === _constants.KEY_TAB) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    }
-  }, [isTabbingIgnored, isTabbing, onClick, onClickOld, value, isColorPaletteMenu, onKeyDown]);
-  (0, _react.useEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
-      var refCurrent = ref.current;
-      var handleTabKey = function handleTabKey(event) {
-        if (event.key === _constants.KEY_TAB) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      };
-      refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleTabKey);
-      return function () {
-        refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', handleTabKey);
-      };
+    if (isColorPaletteMenu) {
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+    } else if (event.key === _constants.KEY_TAB) {
+      event.preventDefault();
+      event.stopPropagation();
     }
-  }, []);
+  }, [isColorPaletteMenu, isTabbing, value, onClick, onClickOld, onKeyDown]);
   (0, _react.useImperativeHandle)(componentRef, function () {
     return {
       focus: function focus() {
-        if (isTabbingIgnored) {
+        if (isColorPaletteMenu) {
           if (isInitialFocus.current) {
             var _ref$current;
-            !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
+            autoFocus && !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
             isInitialFocus.current = false;
           } else {
             var _ref$current2;
@@ -106,18 +92,18 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
         }
       }
     };
-  }, [isTabbingIgnored, initialFocusRef]);
+  }, [autoFocus, isColorPaletteMenu, initialFocusRef]);
   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: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
-      tabIndex: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
+      role: isInsideMenu ? 'menuitemradio' : 'radio',
+      tabIndex: selected ? 0 : -1,
       "aria-checked": selected,
       "aria-label": label,
-      css: [sharedColorContainerStyles, (isTabbingIgnored || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isTabbingIgnored || !isTabbing) && colorCardOptionFocusedStyles],
+      css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,
       onKeyDown: handleKeyDown

package/dist/cjs/components/ColorPaletteMenu.js

@@ -24,8 +24,12 @@ var _colors = require("@atlaskit/theme/colors");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
-  var _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
     isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
+    _ref$isInsideMenu = _ref.isInsideMenu,
+    isInsideMenu = _ref$isInsideMenu === void 0 ? true : _ref$isInsideMenu,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
     onChangeOld = _ref.onChangeOld,
@@ -60,7 +64,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.3.1"
+          packageVersion: "3.3.2"
         }
       })(createAnalyticsEvent);
     }
@@ -110,7 +114,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
   }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
   return (0, _react2.jsx)("div", {
     "aria-label": fullLabel,
-    role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
+    role: isInsideMenu ? 'group' : 'radiogroup'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: [colorPaletteMenuStyles, mode === _types.Mode.Standard && colorPaletteMenuStandardStyles],
@@ -139,11 +143,13 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
       onClick: handleChange
     } : {
       onClickOld: handleChangeOld
-    }, (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') && {
+    }, {
       ref: function ref(_ref4) {
         colorCardRefs[index] = _ref4;
       },
+      autoFocus: autoFocus,
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
+      isInsideMenu: isInsideMenu,
       onKeyDown: handleKeyDown
     })));
   })));
@@ -151,7 +157,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.3.1"
+  packageVersion: "3.3.2"
 })((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.3.1";
+var packageVersion = "3.3.2";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/cjs/components/components.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Placeholder = exports.Option = exports.MenuList = exports.DropdownIndicator = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
 var _react = require("@emotion/react");
@@ -24,7 +23,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
     children = props.children;
   return (0, _react.jsx)("div", {
     css: colorPaletteContainerStyles,
-    role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup',
+    role: "group",
     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

package/dist/es2019/components/ColorCard.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -15,7 +15,9 @@ import { mergeRefs } from 'use-callback-ref';
 const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   const {
     type,
+    autoFocus = true,
     initialFocusRef,
+    isInsideMenu = true,
     value,
     label,
     selected,
@@ -29,7 +31,6 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   const ref = useRef(null);
   const isInitialFocus = useRef(true);
   const isColorPaletteMenu = type === COLOR_PALETTE_MENU;
-  const isTabbingIgnored = fg('platform_color_palette_menu_timeline_bar_a11y') ? isColorPaletteMenu : false;
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
   }, []);
@@ -47,7 +48,7 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     }
   }, [onClick, onClickOld, value]);
   const handleKeyDown = useCallback(event => {
-    if ((isTabbingIgnored || 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) && (onClickOld && !fg('platform_color_palette-expose-event') || onClick && fg('platform_color_palette-expose-event')) && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
@@ -56,36 +57,19 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
       // 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);
     }
-    if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
-      if (isColorPaletteMenu) {
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-      } else if (event.key === KEY_TAB) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    }
-  }, [isTabbingIgnored, isTabbing, onClick, onClickOld, value, isColorPaletteMenu, onKeyDown]);
-  useEffect(() => {
-    if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
-      const refCurrent = ref.current;
-      const handleTabKey = event => {
-        if (event.key === KEY_TAB) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      };
-      refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.addEventListener('keydown', handleTabKey);
-      return () => {
-        refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.removeEventListener('keydown', handleTabKey);
-      };
+    if (isColorPaletteMenu) {
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    } else if (event.key === KEY_TAB) {
+      event.preventDefault();
+      event.stopPropagation();
     }
-  }, []);
+  }, [isColorPaletteMenu, isTabbing, value, onClick, onClickOld, onKeyDown]);
   useImperativeHandle(componentRef, () => ({
     focus: () => {
-      if (isTabbingIgnored) {
+      if (isColorPaletteMenu) {
         if (isInitialFocus.current) {
           var _ref$current;
-          !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
+          autoFocus && !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
           isInitialFocus.current = false;
         } else {
           var _ref$current2;
@@ -93,18 +77,18 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
         }
       }
     }
-  }), [isTabbingIgnored, initialFocusRef]);
+  }), [autoFocus, isColorPaletteMenu, initialFocusRef]);
   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: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
-      tabIndex: fg('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
+      role: isInsideMenu ? 'menuitemradio' : 'radio',
+      tabIndex: selected ? 0 : -1,
       "aria-checked": selected,
       "aria-label": label,
-      css: [sharedColorContainerStyles, (isTabbingIgnored || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isTabbingIgnored || !isTabbing) && colorCardOptionFocusedStyles],
+      css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,
       onKeyDown: handleKeyDown

package/dist/es2019/components/ColorPaletteMenu.js

@@ -14,7 +14,9 @@ import { css, jsx } from '@emotion/react';
 import { COLOR_PALETTE_MENU, KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT, KEY_TAB } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
 export const ColorPaletteMenuWithoutAnalytics = ({
+  autoFocus = true,
   isFocusLockEnabled = true,
+  isInsideMenu = true,
   createAnalyticsEvent,
   onChange,
   onChangeOld,
@@ -44,7 +46,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.3.1"
+          packageVersion: "3.3.2"
         }
       })(createAnalyticsEvent);
     }
@@ -88,7 +90,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
   return jsx("div", {
     "aria-label": fullLabel,
-    role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
+    role: isInsideMenu ? 'group' : 'radiogroup'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
@@ -117,18 +119,20 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     onClick: handleChange
   } : {
     onClickOld: handleChangeOld
-  }, fg('platform_color_palette_menu_timeline_bar_a11y') && {
+  }, {
     ref: ref => {
       colorCardRefs[index] = ref;
     },
+    autoFocus: autoFocus,
     initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
+    isInsideMenu: isInsideMenu,
     onKeyDown: handleKeyDown
   }))))));
 };
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.3.1"
+  packageVersion: "3.3.2"
 })(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.3.1";
+const packageVersion = "3.3.2";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/components.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import { fg } from '@atlaskit/platform-feature-flags';
 import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -20,7 +19,7 @@ export const MenuList = props => {
   } = props;
   return jsx("div", {
     css: colorPaletteContainerStyles,
-    role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup',
+    role: "group",
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined

package/dist/esm/components/ColorCard.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -14,7 +14,11 @@ import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { mergeRefs } from 'use-callback-ref';
 var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
   var type = props.type,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
     initialFocusRef = props.initialFocusRef,
+    _props$isInsideMenu = props.isInsideMenu,
+    isInsideMenu = _props$isInsideMenu === void 0 ? true : _props$isInsideMenu,
     value = props.value,
     label = props.label,
     selected = props.selected,
@@ -28,7 +32,6 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
   var ref = useRef(null);
   var isInitialFocus = useRef(true);
   var isColorPaletteMenu = type === COLOR_PALETTE_MENU;
-  var isTabbingIgnored = fg('platform_color_palette_menu_timeline_bar_a11y') ? isColorPaletteMenu : false;
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -46,7 +49,7 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     }
   }, [onClick, onClickOld, value]);
   var handleKeyDown = useCallback(function (event) {
-    if ((isTabbingIgnored || 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) && (onClickOld && !fg('platform_color_palette-expose-event') || onClick && fg('platform_color_palette-expose-event')) && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
@@ -55,37 +58,20 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
       // 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);
     }
-    if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
-      if (isColorPaletteMenu) {
-        onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-      } else if (event.key === KEY_TAB) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    }
-  }, [isTabbingIgnored, isTabbing, onClick, onClickOld, value, isColorPaletteMenu, onKeyDown]);
-  useEffect(function () {
-    if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
-      var refCurrent = ref.current;
-      var handleTabKey = function handleTabKey(event) {
-        if (event.key === KEY_TAB) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      };
-      refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleTabKey);
-      return function () {
-        refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', handleTabKey);
-      };
+    if (isColorPaletteMenu) {
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+    } else if (event.key === KEY_TAB) {
+      event.preventDefault();
+      event.stopPropagation();
     }
-  }, []);
+  }, [isColorPaletteMenu, isTabbing, value, onClick, onClickOld, onKeyDown]);
   useImperativeHandle(componentRef, function () {
     return {
       focus: function focus() {
-        if (isTabbingIgnored) {
+        if (isColorPaletteMenu) {
           if (isInitialFocus.current) {
             var _ref$current;
-            !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
+            autoFocus && !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
             isInitialFocus.current = false;
           } else {
             var _ref$current2;
@@ -94,18 +80,18 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
         }
       }
     };
-  }, [isTabbingIgnored, initialFocusRef]);
+  }, [autoFocus, isColorPaletteMenu, initialFocusRef]);
   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: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
-      tabIndex: fg('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
+      role: isInsideMenu ? 'menuitemradio' : 'radio',
+      tabIndex: selected ? 0 : -1,
       "aria-checked": selected,
       "aria-label": label,
-      css: [sharedColorContainerStyles, (isTabbingIgnored || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isTabbingIgnored || !isTabbing) && colorCardOptionFocusedStyles],
+      css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,
       onKeyDown: handleKeyDown

package/dist/esm/components/ColorPaletteMenu.js

@@ -15,8 +15,12 @@ import { css, jsx } from '@emotion/react';
 import { COLOR_PALETTE_MENU, KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT, KEY_TAB } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
 export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
-  var _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
     isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
+    _ref$isInsideMenu = _ref.isInsideMenu,
+    isInsideMenu = _ref$isInsideMenu === void 0 ? true : _ref$isInsideMenu,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
     onChangeOld = _ref.onChangeOld,
@@ -51,7 +55,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.3.1"
+          packageVersion: "3.3.2"
         }
       })(createAnalyticsEvent);
     }
@@ -101,7 +105,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
   }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
   return jsx("div", {
     "aria-label": fullLabel,
-    role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
+    role: isInsideMenu ? 'group' : 'radiogroup'
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
@@ -130,11 +134,13 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
       onClick: handleChange
     } : {
       onClickOld: handleChangeOld
-    }, fg('platform_color_palette_menu_timeline_bar_a11y') && {
+    }, {
       ref: function ref(_ref4) {
         colorCardRefs[index] = _ref4;
       },
+      autoFocus: autoFocus,
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
+      isInsideMenu: isInsideMenu,
       onKeyDown: handleKeyDown
     })));
   })));
@@ -142,7 +148,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.3.1"
+  packageVersion: "3.3.2"
 })(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.3.1";
+var packageVersion = "3.3.2";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/esm/components/components.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import { fg } from '@atlaskit/platform-feature-flags';
 import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -16,7 +15,7 @@ export var MenuList = function MenuList(props) {
     children = props.children;
   return jsx("div", {
     css: colorPaletteContainerStyles,
-    role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup',
+    role: "group",
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined

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

@@ -5,7 +5,9 @@
 import React, { type KeyboardEventHandler, type Ref } from 'react';
 import type { ColorCardType } from '../types';
 export interface Props {
+    autoFocus?: boolean;
     initialFocusRef?: Ref<HTMLDivElement>;
+    isInsideMenu?: boolean;
     type: ColorCardType;
     value: string;
     label: string;

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

@@ -7,8 +7,12 @@ import { Mode, type Palette } from '../types';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { jsx } from '@emotion/react';
 export type Props = {
+    /** the toggle that decides if the selected color will be automatically focused on load */
+    autoFocus?: boolean;
     /** the toggle that decides if users can tab outside the color picker (arrow keys will always cycle the focus) */
     isFocusLockEnabled?: boolean;
+    /** the toggle that decides if menu-related assistive technology should be applied */
+    isInsideMenu?: boolean;
     /** color picker button label */
     label?: string;
     /** list of available colors */
@@ -30,6 +34,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: ({ isFocusLockEnabled, 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" | "onChange" | "initialFocusRef" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "onChangeOld" | "mode"> & import("react").RefAttributes<any>>;
+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 default _default;

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

@@ -5,7 +5,9 @@
 import React, { type KeyboardEventHandler, type Ref } from 'react';
 import type { ColorCardType } from '../types';
 export interface Props {
+    autoFocus?: boolean;
     initialFocusRef?: Ref<HTMLDivElement>;
+    isInsideMenu?: boolean;
     type: ColorCardType;
     value: string;
     label: string;

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

@@ -7,8 +7,12 @@ import { Mode, type Palette } from '../types';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { jsx } from '@emotion/react';
 export type Props = {
+    /** the toggle that decides if the selected color will be automatically focused on load */
+    autoFocus?: boolean;
     /** the toggle that decides if users can tab outside the color picker (arrow keys will always cycle the focus) */
     isFocusLockEnabled?: boolean;
+    /** the toggle that decides if menu-related assistive technology should be applied */
+    isInsideMenu?: boolean;
     /** color picker button label */
     label?: string;
     /** list of available colors */
@@ -30,6 +34,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: ({ isFocusLockEnabled, 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" | "onChange" | "initialFocusRef" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "onChangeOld" | "mode"> & import("react").RefAttributes<any>>;
+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 default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.3.1",
+	"version": "3.3.2",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
-		"@atlaskit/select": "^17.18.0",
+		"@atlaskit/select": "^17.19.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.60.0",
 		"@atlaskit/tooltip": "^18.7.0",
@@ -75,9 +75,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_color_palette_menu_timeline_bar_a11y": {
-			"type": "boolean"
-		},
 		"platform_color_palette-expose-event": {
 			"type": "boolean"
 		},