@atlaskit/editor-plugin-media 20.1.4 → 20.1.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-media
 
+## 20.1.5
+
+### Patch Changes
+
+- [`c942b90687404`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c942b90687404) -
+  Label the image border color and size radio groups for screen readers behind
+  platform_editor_a11y_border_radiogroup_label
+- Updated dependencies
+
 ## 20.1.4
 
 ### Patch Changes

package/dist/cjs/ui/GeneratedMediaReveal.js

@@ -1,4 +1,4 @@
-/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -19,6 +19,7 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-d
 var _strokeWeightLarge = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-large"));
 var _strokeWeightMedium = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-medium"));
 var _strokeWeightSmall = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-small"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
@@ -192,9 +193,10 @@ var ImageBorder = function ImageBorder(_ref) {
         handleColorSubmenuEsc();
       },
       disableCloseOnArrowClick: true
-    }, (0, _react2.jsx)(_uiColor.ColorPalette
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    , {
+    }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+      ariaLabel: (0, _fg.fg)('platform_editor_a11y_border_radiogroup_label') ? formatMessage(_media.imageBorderMessages.borderColorRadioGroupAriaLabel) : undefined
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       onClick: function onClick(color) {
         setBorder({
           color: color
@@ -272,8 +274,11 @@ var ImageBorder = function ImageBorder(_ref) {
       },
       disableCloseOnArrowClick: true
     }, (0, _react2.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       css: (0, _styles2.contextualSubMenu)(1),
-      ref: handleSubMenuRef
+      ref: handleSubMenuRef,
+      role: (0, _fg.fg)('platform_editor_a11y_border_radiogroup_label') ? 'radiogroup' : undefined,
+      "aria-label": (0, _fg.fg)('platform_editor_a11y_border_radiogroup_label') ? formatMessage(_media.imageBorderMessages.borderSizeRadioGroupAriaLabel) : undefined
     }, borderSizeOptions.map(function (_ref2, idx) {
       var name = _ref2.name,
         value = _ref2.value,

package/dist/es2019/ui/GeneratedMediaReveal.js

@@ -1,4 +1,4 @@
-/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./GeneratedMediaReveal.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useState } from 'react';

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

@@ -17,6 +17,7 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
 import StrokeWeightMediumIcon from '@atlaskit/icon/core/stroke-weight-medium';
 import StrokeWeightSmallIcon from '@atlaskit/icon/core/stroke-weight-small';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
@@ -172,9 +173,10 @@ const ImageBorder = ({
         handleColorSubmenuEsc();
       },
       disableCloseOnArrowClick: true
-    }, jsx(ColorPalette
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    , {
+    }, jsx(ColorPalette, {
+      ariaLabel: fg('platform_editor_a11y_border_radiogroup_label') ? formatMessage(messages.borderColorRadioGroupAriaLabel) : undefined
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       onClick: color => {
         setBorder({
           color
@@ -250,8 +252,11 @@ const ImageBorder = ({
       },
       disableCloseOnArrowClick: true
     }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       css: contextualSubMenu(1),
-      ref: handleSubMenuRef
+      ref: handleSubMenuRef,
+      role: fg('platform_editor_a11y_border_radiogroup_label') ? 'radiogroup' : undefined,
+      "aria-label": fg('platform_editor_a11y_border_radiogroup_label') ? formatMessage(messages.borderSizeRadioGroupAriaLabel) : undefined
     }, borderSizeOptions.map(({
       name,
       value,

package/dist/esm/ui/GeneratedMediaReveal.js

@@ -1,4 +1,4 @@
-/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./GeneratedMediaReveal.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -18,6 +18,7 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
 import StrokeWeightMediumIcon from '@atlaskit/icon/core/stroke-weight-medium';
 import StrokeWeightSmallIcon from '@atlaskit/icon/core/stroke-weight-small';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
@@ -184,9 +185,10 @@ var ImageBorder = function ImageBorder(_ref) {
         handleColorSubmenuEsc();
       },
       disableCloseOnArrowClick: true
-    }, jsx(ColorPalette
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    , {
+    }, jsx(ColorPalette, {
+      ariaLabel: fg('platform_editor_a11y_border_radiogroup_label') ? formatMessage(messages.borderColorRadioGroupAriaLabel) : undefined
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       onClick: function onClick(color) {
         setBorder({
           color: color
@@ -264,8 +266,11 @@ var ImageBorder = function ImageBorder(_ref) {
       },
       disableCloseOnArrowClick: true
     }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       css: contextualSubMenu(1),
-      ref: handleSubMenuRef
+      ref: handleSubMenuRef,
+      role: fg('platform_editor_a11y_border_radiogroup_label') ? 'radiogroup' : undefined,
+      "aria-label": fg('platform_editor_a11y_border_radiogroup_label') ? formatMessage(messages.borderSizeRadioGroupAriaLabel) : undefined
     }, borderSizeOptions.map(function (_ref2, idx) {
       var name = _ref2.name,
         value = _ref2.value,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "20.1.4",
+	"version": "20.1.5",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -74,13 +74,16 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^122.7.0",
+		"@atlaskit/editor-common": "^122.8.0",
 		"@atlaskit/media-core": "^38.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"platform-feature-flags": {
+		"platform_editor_a11y_border_radiogroup_label": {
+			"type": "boolean"
+		},
 		"platform_media_cross_client_copy": {
 			"type": "boolean"
 		},