@atlaskit/color-picker 3.4.4 → 3.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/afm-cc/tsconfig.json +1 -2
  3. package/afm-jira/tsconfig.json +41 -41
  4. package/dist/cjs/components/ColorCard.js +3 -4
  5. package/dist/cjs/components/ColorPaletteMenu.js +3 -6
  6. package/dist/cjs/components/ColorPicker.js +1 -1
  7. package/dist/cjs/components/components.js +12 -10
  8. package/dist/es2019/components/ColorCard.js +3 -4
  9. package/dist/es2019/components/ColorPaletteMenu.js +3 -6
  10. package/dist/es2019/components/ColorPicker.js +1 -1
  11. package/dist/es2019/components/components.js +12 -10
  12. package/dist/esm/components/ColorCard.js +3 -4
  13. package/dist/esm/components/ColorPaletteMenu.js +3 -6
  14. package/dist/esm/components/ColorPicker.js +1 -1
  15. package/dist/esm/components/components.js +12 -10
  16. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/color-picker
2
2
 
3
+ ## 3.4.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#163555](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163555)
8
+ [`f13bab6193072`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f13bab6193072) -
9
+ Fixed roles to align with radio button use case
10
+
11
+ ## 3.4.5
12
+
13
+ ### Patch Changes
14
+
15
+ - [#157202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157202)
16
+ [`609601c6264dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/609601c6264dc) -
17
+ Removed FG that fixes storybook violations
18
+
3
19
  ## 3.4.4
4
20
 
5
21
  ### Patch Changes
package/afm-cc/tsconfig.json CHANGED
@@ -5,8 +5,7 @@
5
5
  "target": "es5",
6
6
  "composite": true,
7
7
  "outDir": "../dist",
8
- "rootDir": "../",
9
- "baseUrl": "../"
8
+ "rootDir": "../"
10
9
  },
11
10
  "include": [
12
11
  "../src/**/*.ts",
package/afm-jira/tsconfig.json CHANGED
@@ -1,42 +1,42 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.jira.json",
3
- "compilerOptions": {
4
- "declaration": true,
5
- "target": "es5",
6
- "outDir": "../../../../../tsDist/@atlaskit__color-picker/app",
7
- "composite": true,
8
- "rootDir": "../"
9
- },
10
- "include": [
11
- "../src/**/*.ts",
12
- "../src/**/*.tsx"
13
- ],
14
- "exclude": [
15
- "../src/**/__tests__/*",
16
- "../src/**/*.test.*",
17
- "../src/**/test.*"
18
- ],
19
- "references": [
20
- {
21
- "path": "../../../analytics/analytics-next/afm-jira/tsconfig.json"
22
- },
23
- {
24
- "path": "../../../design-system/icon/afm-jira/tsconfig.json"
25
- },
26
- {
27
- "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
28
- },
29
- {
30
- "path": "../../../design-system/select/afm-jira/tsconfig.json"
31
- },
32
- {
33
- "path": "../../../design-system/theme/afm-jira/tsconfig.json"
34
- },
35
- {
36
- "path": "../../../design-system/tokens/afm-jira/tsconfig.json"
37
- },
38
- {
39
- "path": "../../../design-system/tooltip/afm-jira/tsconfig.json"
40
- }
41
- ]
42
- }
2
+ "extends": "../../../../tsconfig.entry-points.jira.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "outDir": "../../../../../tsDist/@atlaskit__color-picker/app",
7
+ "rootDir": "../",
8
+ "composite": true
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*"
18
+ ],
19
+ "references": [
20
+ {
21
+ "path": "../../../analytics/analytics-next/afm-jira/tsconfig.json"
22
+ },
23
+ {
24
+ "path": "../../../design-system/icon/afm-jira/tsconfig.json"
25
+ },
26
+ {
27
+ "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
28
+ },
29
+ {
30
+ "path": "../../../design-system/select/afm-jira/tsconfig.json"
31
+ },
32
+ {
33
+ "path": "../../../design-system/theme/afm-jira/tsconfig.json"
34
+ },
35
+ {
36
+ "path": "../../../design-system/tokens/afm-jira/tsconfig.json"
37
+ },
38
+ {
39
+ "path": "../../../design-system/tooltip/afm-jira/tsconfig.json"
40
+ }
41
+ ]
42
+ }
package/dist/cjs/components/ColorCard.js CHANGED
@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
12
12
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
13
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
  var _constants = require("../constants");
15
14
  var _react2 = require("@emotion/react");
16
15
  var _colors = require("@atlaskit/theme/colors");
@@ -93,10 +92,10 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
93
92
  delete tooltipProps['aria-describedby'];
94
93
  return (0, _react2.jsx)("div", (0, _extends2.default)({}, tooltipProps, {
95
94
  ref: initialFocusRef ? (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref, initialFocusRef]) : (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref]),
96
- role: (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? role : isInsideMenuRole,
95
+ role: role,
97
96
  tabIndex: selected ? 0 : -1,
98
- "aria-checked": (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? ariaChecked : selected,
99
- "aria-label": (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? ariaLabel : label,
97
+ "aria-checked": ariaChecked,
98
+ "aria-label": ariaLabel,
100
99
  css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
101
100
  onClick: handleClick,
102
101
  onMouseDown: handleMouseDown,
package/dist/cjs/components/ColorPaletteMenu.js CHANGED
@@ -10,7 +10,6 @@ var _react = require("react");
10
10
  var _types = require("../types");
11
11
  var _analyticsNext = require("@atlaskit/analytics-next");
12
12
  var _ColorCard = _interopRequireDefault(require("./ColorCard"));
13
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
  var _utils = require("../utils");
15
14
  var _react2 = require("@emotion/react");
16
15
  var _constants = require("../constants");
@@ -62,7 +61,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
62
61
  attributes: {
63
62
  componentName: 'color-picker',
64
63
  packageName: "@atlaskit/color-picker",
65
- packageVersion: "3.4.4"
64
+ packageVersion: "3.4.6"
66
65
  }
67
66
  })(createAnalyticsEvent);
68
67
  }
@@ -106,11 +105,9 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
106
105
  break;
107
106
  }
108
107
  }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
109
- var isInsideMenuRole = (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? 'menu' : 'group';
110
- var role = isInsideMenu ? isInsideMenuRole : 'radiogroup';
111
108
  return (0, _react2.jsx)("div", {
112
109
  "aria-label": fullLabel,
113
- role: role
110
+ role: isInsideMenu ? 'menu' : 'radiogroup'
114
111
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
115
112
  ,
116
113
  css: [colorPaletteMenuStyles, mode === _types.Mode.Standard && colorPaletteMenuStandardStyles],
@@ -149,7 +146,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
149
146
  var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
150
147
  componentName: 'color-picker',
151
148
  packageName: "@atlaskit/color-picker",
152
- packageVersion: "3.4.4"
149
+ packageVersion: "3.4.6"
153
150
  })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
154
151
  var colorCardWrapperStyles = (0, _react2.css)({
155
152
  display: 'flex',
package/dist/cjs/components/ColorPicker.js CHANGED
@@ -42,7 +42,7 @@ var defaultPopperProps = {
42
42
  placement: 'bottom-start'
43
43
  };
44
44
  var packageName = "@atlaskit/color-picker";
45
- var packageVersion = "3.4.4";
45
+ var packageVersion = "3.4.6";
46
46
  var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
47
47
  (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
48
48
  var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
package/dist/cjs/components/components.js CHANGED
@@ -10,9 +10,9 @@ var _ColorCard = _interopRequireDefault(require("./ColorCard"));
10
10
  var _utils = require("../utils");
11
11
  var _react = require("@emotion/react");
12
12
  var _constants = require("../constants");
13
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
  var _reactIntlNext = require("react-intl-next");
15
14
  var _messages = _interopRequireDefault(require("../messages"));
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
16
  /**
17
17
  * @jsxRuntime classic
18
18
  * @jsx jsx
@@ -26,12 +26,10 @@ var MenuList = exports.MenuList = function MenuList(props) {
26
26
  children = props.children;
27
27
  var _useIntl = (0, _reactIntlNext.useIntl)(),
28
28
  formatMessage = _useIntl.formatMessage;
29
- return (0, _react.jsx)("div", (0, _extends2.default)({
29
+ return (0, _react.jsx)("div", {
30
30
  css: colorPaletteContainerStyles,
31
- role: (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? 'listbox' : 'group'
32
- }, (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? {
33
- 'aria-label': formatMessage(_messages.default.menuListAriaLabel)
34
- } : {}, {
31
+ role: (0, _platformFeatureFlags.fg)('jsw_roadmaps_fix-color-picker-roles') ? 'group' : 'listbox',
32
+ "aria-label": formatMessage(_messages.default.menuListAriaLabel),
35
33
  style: {
36
34
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
37
35
  maxWidth: cols ? (0, _utils.getWidth)(cols) : undefined
@@ -39,7 +37,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
39
37
  //@ts-ignore react-select unsupported props
40
38
  ,
41
39
  ref: innerRef
42
- }), children);
40
+ }, children);
43
41
  };
44
42
  var Option = exports.Option = function Option(props) {
45
43
  var _props$data = props.data,
@@ -54,9 +52,13 @@ var Option = exports.Option = function Option(props) {
54
52
  innerProps = props.innerProps;
55
53
  return (0, _react.jsx)("div", (0, _extends2.default)({
56
54
  css: colorCardWrapperStyles
57
- }, innerProps, (0, _platformFeatureFlags.fg)('platform_color_picker-fix-a11y-violations') ? {
58
- 'aria-label': label
59
- } : {}), (0, _react.jsx)(_ColorCard.default, {
55
+ }, innerProps, (0, _platformFeatureFlags.fg)('jsw_roadmaps_fix-color-picker-roles') && {
56
+ role: 'radio',
57
+ 'aria-checked': isSelected,
58
+ 'aria-selected': undefined
59
+ }, {
60
+ "aria-label": label
61
+ }), (0, _react.jsx)(_ColorCard.default, {
60
62
  type: _constants.COLOR_PICKER,
61
63
  label: label,
62
64
  value: value,
package/dist/es2019/components/ColorCard.js CHANGED
@@ -6,7 +6,6 @@ import _extends from "@babel/runtime/helpers/extends";
6
6
  import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
7
7
  import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
8
8
  import Tooltip from '@atlaskit/tooltip';
9
- import { fg } from '@atlaskit/platform-feature-flags';
10
9
  import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
11
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
11
  import { css, jsx } from '@emotion/react';
@@ -78,10 +77,10 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
78
77
  delete tooltipProps['aria-describedby'];
79
78
  return jsx("div", _extends({}, tooltipProps, {
80
79
  ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
81
- role: fg('platform_color_picker-fix-a11y-violations') ? role : isInsideMenuRole,
80
+ role: role,
82
81
  tabIndex: selected ? 0 : -1,
83
- "aria-checked": fg('platform_color_picker-fix-a11y-violations') ? ariaChecked : selected,
84
- "aria-label": fg('platform_color_picker-fix-a11y-violations') ? ariaLabel : label,
82
+ "aria-checked": ariaChecked,
83
+ "aria-label": ariaLabel,
85
84
  css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
86
85
  onClick: handleClick,
87
86
  onMouseDown: handleMouseDown,
package/dist/es2019/components/ColorPaletteMenu.js CHANGED
@@ -6,7 +6,6 @@ import { useState, useCallback, useEffect, useMemo } from 'react';
6
6
  import { Mode } from '../types';
7
7
  import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
8
8
  import ColorCard from './ColorCard';
9
- import { fg } from '@atlaskit/platform-feature-flags';
10
9
  import { getOptions, getWidth } from '../utils';
11
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
11
  import { css, jsx } from '@emotion/react';
@@ -44,7 +43,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
44
43
  attributes: {
45
44
  componentName: 'color-picker',
46
45
  packageName: "@atlaskit/color-picker",
47
- packageVersion: "3.4.4"
46
+ packageVersion: "3.4.6"
48
47
  }
49
48
  })(createAnalyticsEvent);
50
49
  }
@@ -82,11 +81,9 @@ export const ColorPaletteMenuWithoutAnalytics = ({
82
81
  break;
83
82
  }
84
83
  }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
85
- const isInsideMenuRole = fg('platform_color_picker-fix-a11y-violations') ? 'menu' : 'group';
86
- const role = isInsideMenu ? isInsideMenuRole : 'radiogroup';
87
84
  return jsx("div", {
88
85
  "aria-label": fullLabel,
89
- role: role
86
+ role: isInsideMenu ? 'menu' : 'radiogroup'
90
87
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
91
88
  ,
92
89
  css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
@@ -124,7 +121,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
124
121
  export default withAnalyticsContext({
125
122
  componentName: 'color-picker',
126
123
  packageName: "@atlaskit/color-picker",
127
- packageVersion: "3.4.4"
124
+ packageVersion: "3.4.6"
128
125
  })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
129
126
  const colorCardWrapperStyles = css({
130
127
  display: 'flex',
package/dist/es2019/components/ColorPicker.js CHANGED
@@ -26,7 +26,7 @@ const defaultPopperProps = {
26
26
  placement: 'bottom-start'
27
27
  };
28
28
  const packageName = "@atlaskit/color-picker";
29
- const packageVersion = "3.4.4";
29
+ const packageVersion = "3.4.6";
30
30
  class ColorPickerWithoutAnalyticsBase extends React.Component {
31
31
  constructor(...args) {
32
32
  super(...args);
package/dist/es2019/components/components.js CHANGED
@@ -9,9 +9,9 @@ import { getWidth } from '../utils';
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { css, jsx } from '@emotion/react';
11
11
  import { COLOR_PICKER } from '../constants';
12
- import { fg } from '@atlaskit/platform-feature-flags';
13
12
  import { useIntl } from 'react-intl-next';
14
13
  import messages from '../messages';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
15
15
  export const MenuList = props => {
16
16
  const {
17
17
  //@ts-ignore react-select unsupported props
@@ -24,12 +24,10 @@ export const MenuList = props => {
24
24
  const {
25
25
  formatMessage
26
26
  } = useIntl();
27
- return jsx("div", _extends({
27
+ return jsx("div", {
28
28
  css: colorPaletteContainerStyles,
29
- role: fg('platform_color_picker-fix-a11y-violations') ? 'listbox' : 'group'
30
- }, fg('platform_color_picker-fix-a11y-violations') ? {
31
- 'aria-label': formatMessage(messages.menuListAriaLabel)
32
- } : {}, {
29
+ role: fg('jsw_roadmaps_fix-color-picker-roles') ? 'group' : 'listbox',
30
+ "aria-label": formatMessage(messages.menuListAriaLabel),
33
31
  style: {
34
32
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
35
33
  maxWidth: cols ? getWidth(cols) : undefined
@@ -37,7 +35,7 @@ export const MenuList = props => {
37
35
  //@ts-ignore react-select unsupported props
38
36
  ,
39
37
  ref: innerRef
40
- }), children);
38
+ }, children);
41
39
  };
42
40
  export const Option = props => {
43
41
  const {
@@ -57,9 +55,13 @@ export const Option = props => {
57
55
  } = props;
58
56
  return jsx("div", _extends({
59
57
  css: colorCardWrapperStyles
60
- }, innerProps, fg('platform_color_picker-fix-a11y-violations') ? {
61
- 'aria-label': label
62
- } : {}), jsx(ColorCard, {
58
+ }, innerProps, fg('jsw_roadmaps_fix-color-picker-roles') && {
59
+ role: 'radio',
60
+ 'aria-checked': isSelected,
61
+ 'aria-selected': undefined
62
+ }, {
63
+ "aria-label": label
64
+ }), jsx(ColorCard, {
63
65
  type: COLOR_PICKER,
64
66
  label: label,
65
67
  value: value,
package/dist/esm/components/ColorCard.js CHANGED
@@ -6,7 +6,6 @@ import _extends from "@babel/runtime/helpers/extends";
6
6
  import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
7
7
  import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
8
8
  import Tooltip from '@atlaskit/tooltip';
9
- import { fg } from '@atlaskit/platform-feature-flags';
10
9
  import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
11
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
11
  import { css, jsx } from '@emotion/react';
@@ -81,10 +80,10 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
81
80
  delete tooltipProps['aria-describedby'];
82
81
  return jsx("div", _extends({}, tooltipProps, {
83
82
  ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
84
- role: fg('platform_color_picker-fix-a11y-violations') ? role : isInsideMenuRole,
83
+ role: role,
85
84
  tabIndex: selected ? 0 : -1,
86
- "aria-checked": fg('platform_color_picker-fix-a11y-violations') ? ariaChecked : selected,
87
- "aria-label": fg('platform_color_picker-fix-a11y-violations') ? ariaLabel : label,
85
+ "aria-checked": ariaChecked,
86
+ "aria-label": ariaLabel,
88
87
  css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
89
88
  onClick: handleClick,
90
89
  onMouseDown: handleMouseDown,
package/dist/esm/components/ColorPaletteMenu.js CHANGED
@@ -7,7 +7,6 @@ import { useState, useCallback, useEffect, useMemo } from 'react';
7
7
  import { Mode } from '../types';
8
8
  import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
9
9
  import ColorCard from './ColorCard';
10
- import { fg } from '@atlaskit/platform-feature-flags';
11
10
  import { getOptions, getWidth } from '../utils';
12
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
12
  import { css, jsx } from '@emotion/react';
@@ -53,7 +52,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
53
52
  attributes: {
54
53
  componentName: 'color-picker',
55
54
  packageName: "@atlaskit/color-picker",
56
- packageVersion: "3.4.4"
55
+ packageVersion: "3.4.6"
57
56
  }
58
57
  })(createAnalyticsEvent);
59
58
  }
@@ -97,11 +96,9 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
97
96
  break;
98
97
  }
99
98
  }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
100
- var isInsideMenuRole = fg('platform_color_picker-fix-a11y-violations') ? 'menu' : 'group';
101
- var role = isInsideMenu ? isInsideMenuRole : 'radiogroup';
102
99
  return jsx("div", {
103
100
  "aria-label": fullLabel,
104
- role: role
101
+ role: isInsideMenu ? 'menu' : 'radiogroup'
105
102
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
106
103
  ,
107
104
  css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
@@ -140,7 +137,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
140
137
  export default withAnalyticsContext({
141
138
  componentName: 'color-picker',
142
139
  packageName: "@atlaskit/color-picker",
143
- packageVersion: "3.4.4"
140
+ packageVersion: "3.4.6"
144
141
  })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
145
142
  var colorCardWrapperStyles = css({
146
143
  display: 'flex',
package/dist/esm/components/ColorPicker.js CHANGED
@@ -34,7 +34,7 @@ var defaultPopperProps = {
34
34
  placement: 'bottom-start'
35
35
  };
36
36
  var packageName = "@atlaskit/color-picker";
37
- var packageVersion = "3.4.4";
37
+ var packageVersion = "3.4.6";
38
38
  var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
39
39
  _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
40
40
  var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
package/dist/esm/components/components.js CHANGED
@@ -9,21 +9,19 @@ import { getWidth } from '../utils';
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { css, jsx } from '@emotion/react';
11
11
  import { COLOR_PICKER } from '../constants';
12
- import { fg } from '@atlaskit/platform-feature-flags';
13
12
  import { useIntl } from 'react-intl-next';
14
13
  import messages from '../messages';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
15
15
  export var MenuList = function MenuList(props) {
16
16
  var cols = props.selectProps.cols,
17
17
  innerRef = props.innerRef,
18
18
  children = props.children;
19
19
  var _useIntl = useIntl(),
20
20
  formatMessage = _useIntl.formatMessage;
21
- return jsx("div", _extends({
21
+ return jsx("div", {
22
22
  css: colorPaletteContainerStyles,
23
- role: fg('platform_color_picker-fix-a11y-violations') ? 'listbox' : 'group'
24
- }, fg('platform_color_picker-fix-a11y-violations') ? {
25
- 'aria-label': formatMessage(messages.menuListAriaLabel)
26
- } : {}, {
23
+ role: fg('jsw_roadmaps_fix-color-picker-roles') ? 'group' : 'listbox',
24
+ "aria-label": formatMessage(messages.menuListAriaLabel),
27
25
  style: {
28
26
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
29
27
  maxWidth: cols ? getWidth(cols) : undefined
@@ -31,7 +29,7 @@ export var MenuList = function MenuList(props) {
31
29
  //@ts-ignore react-select unsupported props
32
30
  ,
33
31
  ref: innerRef
34
- }), children);
32
+ }, children);
35
33
  };
36
34
  export var Option = function Option(props) {
37
35
  var _props$data = props.data,
@@ -46,9 +44,13 @@ export var Option = function Option(props) {
46
44
  innerProps = props.innerProps;
47
45
  return jsx("div", _extends({
48
46
  css: colorCardWrapperStyles
49
- }, innerProps, fg('platform_color_picker-fix-a11y-violations') ? {
50
- 'aria-label': label
51
- } : {}), jsx(ColorCard, {
47
+ }, innerProps, fg('jsw_roadmaps_fix-color-picker-roles') && {
48
+ role: 'radio',
49
+ 'aria-checked': isSelected,
50
+ 'aria-selected': undefined
51
+ }, {
52
+ "aria-label": label
53
+ }), jsx(ColorCard, {
52
54
  type: COLOR_PICKER,
53
55
  label: label,
54
56
  value: value,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/color-picker",
3
- "version": "3.4.4",
3
+ "version": "3.4.6",
4
4
  "description": "Jira Color Picker Component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -30,12 +30,12 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@atlaskit/analytics-next": "^10.1.0",
33
- "@atlaskit/icon": "^22.22.0",
33
+ "@atlaskit/icon": "^22.24.0",
34
34
  "@atlaskit/platform-feature-flags": "0.3.0",
35
- "@atlaskit/select": "^18.1.0",
35
+ "@atlaskit/select": "^18.5.0",
36
36
  "@atlaskit/theme": "^14.0.0",
37
- "@atlaskit/tokens": "^2.0.0",
38
- "@atlaskit/tooltip": "^18.8.0",
37
+ "@atlaskit/tokens": "^2.2.0",
38
+ "@atlaskit/tooltip": "^18.9.0",
39
39
  "@babel/runtime": "^7.0.0",
40
40
  "@emotion/react": "^11.7.1",
41
41
  "memoize-one": "^6.0.0",
@@ -47,7 +47,7 @@
47
47
  },
48
48
  "devDependencies": {
49
49
  "@af/visual-regression": "*",
50
- "@atlaskit/primitives": "^12.2.0",
50
+ "@atlaskit/primitives": "^13.1.0",
51
51
  "@atlaskit/visual-regression": "*",
52
52
  "@atlassian/a11y-jest-testing": "*",
53
53
  "@testing-library/react": "^12.1.5",
@@ -79,7 +79,7 @@
79
79
  "platform-design-system-dsp-20821-color-pickr-focus": {
80
80
  "type": "boolean"
81
81
  },
82
- "platform_color_picker-fix-a11y-violations": {
82
+ "jsw_roadmaps_fix-color-picker-roles": {
83
83
  "type": "boolean"
84
84
  }
85
85
  }