@atlaskit/editor-plugin-media 20.1.3 → 20.1.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- Updated dependencies
+
 ## 20.1.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaInline.js

@@ -21,7 +21,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
-var _mediaCard = require("@atlaskit/media-card");
+var _loader = _interopRequireDefault(require("@atlaskit/media-card/loader"));
 var _getMediaClient = require("@atlaskit/media-client-react/get-media-client");
 var _LoadingView = require("@atlaskit/media-ui/LoadingView");
 var _isType = require("../pm-plugins/utils/is-type");
@@ -219,7 +219,7 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
     isSelected: props.isSelected,
     isInline: true,
     fallbackMediaNameFetcher: props.fallbackMediaNameFetcher
-  }, (0, _react2.jsx)(_mediaCard.MediaInlineCard, {
+  }, (0, _react2.jsx)(_loader.default, {
     isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig,

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -24,7 +24,8 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
-var _mediaCard = require("@atlaskit/media-card");
+var _cardLoader = _interopRequireDefault(require("@atlaskit/media-card/cardLoader"));
+var _cardLoading = require("@atlaskit/media-card/cardLoading");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -515,7 +516,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
           dimensions: originalDimensions,
           borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
           selected: selected
-        }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
+        }, /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, {
           interactionName: "editor-media-card-loading"
         })));
       }
@@ -568,7 +569,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
           // Format: "remix:{type}:{subtype}" e.g. "remix:infographic:corporate-doodle"
           remixSource: dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0]
         })
-      }, /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
+      }, /*#__PURE__*/_react.default.createElement(_cardLoader.default, {
         mediaClientConfig: mediaClientConfig,
         resizeMode: "stretchy-fit",
         dimensions: maxDimensions,

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/nodeviews/mediaInline.js

@@ -10,7 +10,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import { MediaInlineCard } from '@atlaskit/media-card';
+import MediaInlineCard from '@atlaskit/media-card/loader';
 import { getMediaClient } from '@atlaskit/media-client-react/get-media-client';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui/LoadingView';
 import { isImage } from '../pm-plugins/utils/is-type';

package/dist/es2019/nodeviews/mediaNodeView/media.js

@@ -9,7 +9,8 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { Card, CardLoading } from '@atlaskit/media-card';
+import Card from '@atlaskit/media-card/cardLoader';
+import { CardLoading } from '@atlaskit/media-card/cardLoading';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

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/nodeviews/mediaInline.js

@@ -25,7 +25,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import { MediaInlineCard } from '@atlaskit/media-card';
+import MediaInlineCard from '@atlaskit/media-card/loader';
 import { getMediaClient } from '@atlaskit/media-client-react/get-media-client';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui/LoadingView';
 import { isImage } from '../pm-plugins/utils/is-type';

package/dist/esm/nodeviews/mediaNodeView/media.js

@@ -20,7 +20,8 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { Card, CardLoading } from '@atlaskit/media-card';
+import Card from '@atlaskit/media-card/cardLoader';
+import { CardLoading } from '@atlaskit/media-card/cardLoading';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

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/dist/types/nodeviews/mediaNodeView/media.d.ts

@@ -5,7 +5,8 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { ImageLoaderProps } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
+import type { CardDimensions, CardOnClickCallback } from '@atlaskit/media-card/types';
+import type { NumericalCardDimensions } from '@atlaskit/media-common/main-types';
 import type { MediaClientConfig } from '@atlaskit/media-core/auth';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
 import type { MediaOptions, getPosHandler as ProsemirrorGetPosHandler, ReactNodeProps } from '../../types';

package/dist/types/nodeviews/styles.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import type { NumericalCardDimensions } from '@atlaskit/media-card';
+import type { NumericalCardDimensions } from '@atlaskit/media-common/main-types';
 export declare const MediaSingleNodeSelector = "media-single-node";
 type MediaCardWrapperProps = {
     borderWidth?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "20.1.3",
+	"version": "20.1.5",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -61,7 +61,7 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^195.0.0",
+		"@atlaskit/tmp-editor-statsig": "^196.0.0",
 		"@atlaskit/tokens": "^17.0.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -74,13 +74,16 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^122.6.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"
 		},