@atlaskit/editor-toolbar 2.6.46 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-toolbar
 
+## 2.7.0
+
+### Minor Changes
+
+- [`6c8c928766851`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6c8c928766851) -
+  Add an optional `ariaLabelledBy` prop to `ColorPalette` and expose all of its swatches as a single
+  radio group named by that element, behind platform_editor_a11y_color_palette_radiogroup
+
 ## 2.6.46
 
 ### Patch Changes

package/dist/cjs/ui/ColorPalette/index.js

@@ -56,7 +56,8 @@ function getCheckMarkColor(color, useIconToken) {
  * - Customizable color mapping
  */
 var ColorPalette = function ColorPalette(_ref) {
-  var _ref$cols = _ref.cols,
+  var ariaLabelledBy = _ref.ariaLabelledBy,
+    _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? _utils.DEFAULT_COLOR_PICKER_COLUMNS : _ref$cols,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 'space.050' : _ref$gap,
@@ -257,16 +258,16 @@ var ColorPalette = function ColorPalette(_ref) {
         }
     }
   }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
-  return /*#__PURE__*/_react.default.createElement(_compiled.Grid, {
+  var paletteGrid = /*#__PURE__*/_react.default.createElement(_compiled.Grid, {
     gap: gap,
     ref: paletteRef,
-    role: "group"
+    role: (0, _fg.fg)('platform_editor_a11y_color_palette_radiogroup') ? 'presentation' : 'group'
   }, colorsPerRow.map(function (row, rowIndex) {
     return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
       space: shouldUseInlineColorGap ? gap : undefined,
       rowSpace: shouldUseInlineColorGap ? undefined : gap,
       key: "row-first-color-".concat(row[0].value),
-      role: "radiogroup"
+      role: (0, _fg.fg)('platform_editor_a11y_color_palette_radiogroup') ? 'presentation' : 'radiogroup'
     }, row.map(function (_ref2, colIndex) {
       var value = _ref2.value,
         label = _ref2.label,
@@ -307,5 +308,13 @@ var ColorPalette = function ColorPalette(_ref) {
       });
     }));
   }));
+  if ((0, _fg.fg)('platform_editor_a11y_color_palette_radiogroup')) {
+    // All swatches are one radio group; the grid and its rows only carry the layout
+    return /*#__PURE__*/_react.default.createElement("div", {
+      role: "radiogroup",
+      "aria-labelledby": ariaLabelledBy
+    }, paletteGrid);
+  }
+  return paletteGrid;
 };
 var _default = exports.default = ColorPalette;

package/dist/es2019/ui/ColorPalette/index.js

@@ -46,6 +46,7 @@ function getCheckMarkColor(color, useIconToken) {
  * - Customizable color mapping
  */
 const ColorPalette = ({
+  ariaLabelledBy,
   cols = DEFAULT_COLOR_PICKER_COLUMNS,
   gap = 'space.050',
   onClick,
@@ -252,15 +253,15 @@ const ColorPalette = ({
         }
     }
   }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
-  return /*#__PURE__*/React.createElement(Grid, {
+  const paletteGrid = /*#__PURE__*/React.createElement(Grid, {
     gap: gap,
     ref: paletteRef,
-    role: "group"
+    role: fg('platform_editor_a11y_color_palette_radiogroup') ? 'presentation' : 'group'
   }, colorsPerRow.map((row, rowIndex) => /*#__PURE__*/React.createElement(Inline, {
     space: shouldUseInlineColorGap ? gap : undefined,
     rowSpace: shouldUseInlineColorGap ? undefined : gap,
     key: `row-first-color-${row[0].value}`,
-    role: "radiogroup"
+    role: fg('platform_editor_a11y_color_palette_radiogroup') ? 'presentation' : 'radiogroup'
   }, row.map(({
     value,
     label,
@@ -301,5 +302,13 @@ const ColorPalette = ({
       tabIndex: shouldBeFocusable ? 0 : -1
     });
   }))));
+  if (fg('platform_editor_a11y_color_palette_radiogroup')) {
+    // All swatches are one radio group; the grid and its rows only carry the layout
+    return /*#__PURE__*/React.createElement("div", {
+      role: "radiogroup",
+      "aria-labelledby": ariaLabelledBy
+    }, paletteGrid);
+  }
+  return paletteGrid;
 };
 export default ColorPalette;

package/dist/esm/ui/ColorPalette/index.js

@@ -48,7 +48,8 @@ function getCheckMarkColor(color, useIconToken) {
  * - Customizable color mapping
  */
 var ColorPalette = function ColorPalette(_ref) {
-  var _ref$cols = _ref.cols,
+  var ariaLabelledBy = _ref.ariaLabelledBy,
+    _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? DEFAULT_COLOR_PICKER_COLUMNS : _ref$cols,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 'space.050' : _ref$gap,
@@ -249,16 +250,16 @@ var ColorPalette = function ColorPalette(_ref) {
         }
     }
   }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
-  return /*#__PURE__*/React.createElement(Grid, {
+  var paletteGrid = /*#__PURE__*/React.createElement(Grid, {
     gap: gap,
     ref: paletteRef,
-    role: "group"
+    role: fg('platform_editor_a11y_color_palette_radiogroup') ? 'presentation' : 'group'
   }, colorsPerRow.map(function (row, rowIndex) {
     return /*#__PURE__*/React.createElement(Inline, {
       space: shouldUseInlineColorGap ? gap : undefined,
       rowSpace: shouldUseInlineColorGap ? undefined : gap,
       key: "row-first-color-".concat(row[0].value),
-      role: "radiogroup"
+      role: fg('platform_editor_a11y_color_palette_radiogroup') ? 'presentation' : 'radiogroup'
     }, row.map(function (_ref2, colIndex) {
       var value = _ref2.value,
         label = _ref2.label,
@@ -299,5 +300,13 @@ var ColorPalette = function ColorPalette(_ref) {
       });
     }));
   }));
+  if (fg('platform_editor_a11y_color_palette_radiogroup')) {
+    // All swatches are one radio group; the grid and its rows only carry the layout
+    return /*#__PURE__*/React.createElement("div", {
+      role: "radiogroup",
+      "aria-labelledby": ariaLabelledBy
+    }, paletteGrid);
+  }
+  return paletteGrid;
 };
 export default ColorPalette;

package/dist/types/ui/ColorPalette/index.d.ts

@@ -11,5 +11,5 @@ import type { ColorPaletteProps } from './types';
  * - Design token integration
  * - Customizable color mapping
  */
-declare const ColorPalette: ({ cols, gap, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+declare const ColorPalette: ({ ariaLabelledBy, cols, gap, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
 export default ColorPalette;

package/dist/types/ui/ColorPalette/types.d.ts

@@ -48,6 +48,8 @@ export interface PaletteOptions {
  * Props for the main ColorPalette component
  */
 export interface ColorPaletteProps {
+    /** Id of the element whose text labels the palette's radio group */
+    ariaLabelledBy?: string;
     /** Optional CSS class name */
     className?: string;
     /** Number of columns in the palette grid */

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "2.6.46",
+	"version": "2.7.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"website": {
@@ -57,6 +57,7 @@
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"devDependencies": {
+		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/testing-library": "^0.11.0",
 		"@atlassian/workbench": "workspace:*",
 		"@testing-library/react": "^16.3.0",
@@ -68,6 +69,9 @@
 		"cc_blocks_changeboarding": {
 			"type": "boolean"
 		},
+		"platform_editor_a11y_color_palette_radiogroup": {
+			"type": "boolean"
+		},
 		"platform_editor_lovability_text_bg_color_patch_1": {
 			"type": "boolean"
 		},