@atlaskit/editor-plugin-media 9.7.2 → 9.7.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 9.7.3
+
+### Patch Changes
+
+- [`c28209fcfdfd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c28209fcfdfd2) -
+  [ENGHEALTH-46817] Resolving eslint suppressions for accessibility violations
+- Updated dependencies
+
 ## 9.7.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -432,6 +432,8 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
   var isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (mediaNode === null || mediaNode === void 0 || (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
   var mediaSingleWrapperRef = /*#__PURE__*/_react.default.createRef();
   var captionPlaceHolderRef = /*#__PURE__*/_react.default.createRef();
+  var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+  var notIos = !browser.ios;
   var onMediaSingleClicked = _react.default.useCallback(function (event) {
     var _captionPlaceHolderRe;
     var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
@@ -445,6 +447,19 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     }
     (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 || _captionPlaceHolderRe.click();
   }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
+  var onMediaSingleKeyDown = _react.default.useCallback(function (event) {
+    if (!(0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true)) {
+      return;
+    }
+    if (mediaSingleWrapperRef.current !== event.target) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      var _captionPlaceHolderRe2;
+      event.preventDefault();
+      (_captionPlaceHolderRe2 = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe2 === void 0 || _captionPlaceHolderRe2.click();
+    }
+  }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
   var clickPlaceholder = _react.default.useCallback(function () {
     var _pluginInjectionApi$a;
     if (typeof getPos === 'boolean') {
@@ -458,15 +473,14 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
       widthType: widthType
     };
   }, [widthType, mediaSingleWidthAttribute]);
-  var MediaChildren =
-  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-element-interactions, @atlassian/a11y/click-events-have-key-events
-  (0, _react2.jsx)("figure", {
+  var MediaChildren = (0, _react2.jsx)("figure", {
     ref: mediaSingleWrapperRef,
     css: figureWrapperStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: _styles.MediaSingleNodeSelector,
-    onClick: onMediaSingleClicked
+    onClick: notIos && (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : onMediaSingleClicked,
+    onKeyDown: notIos ? undefined : onMediaSingleKeyDown
   }, (0, _react2.jsx)(_mediaSingle.MediaBadges, {
     mediaElement: currentMediaElement(),
     mediaHeight: height,

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

@@ -20,6 +20,7 @@ var _strokeWeightLarge = _interopRequireDefault(require("@atlaskit/icon/core/str
 var _strokeWeightMedium = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-medium"));
 var _strokeWeightSmall = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-small"));
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles2 = require("./styles");
 /**
@@ -340,8 +341,7 @@ var ImageBorder = function ImageBorder(_ref) {
     forcePlacement: true,
     stick: true
   }, (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : function () {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }

package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js

@@ -9,6 +9,7 @@ exports.MediaViewerContainer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _isType = require("../../pm-plugins/utils/is-type");
 var _utils = require("../../ui/toolbar/utils");
@@ -54,17 +55,21 @@ var MediaViewerContainer = exports.MediaViewerContainer = function MediaViewerCo
   var isVideoMedia = (0, _isType.isVideo)((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
   var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && (0, _experiments.editorExperiment)('platform_editor_controls', 'control');
   return (0, _react2.jsx)(_react.Fragment, null, isEditorViewMode ? (0, _react2.jsx)(_react.Fragment, null, isInline ?
+  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
   // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
   (0, _react2.jsx)("span", {
     onClick: showMediaViewer,
     css: interactiveStyles,
-    "data-testid": mediaViewerContainerTestID
+    "data-testid": mediaViewerContainerTestID,
+    role: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
   }, children) :
+  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
   // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
   (0, _react2.jsx)("div", {
     onClick: showMediaViewer,
     css: interactiveStyles,
-    "data-testid": mediaViewerContainerTestID
+    "data-testid": mediaViewerContainerTestID,
+    role: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
   }, children), shouldShowViewer && (0, _react2.jsx)(_PortalWrapper.RenderMediaViewer, {
     selectedNodeAttrs: selectedNodeAttrs,
     mediaClientConfig: mediaClientConfig,

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -392,6 +392,8 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
   const isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
   const mediaSingleWrapperRef = /*#__PURE__*/React.createRef();
   const captionPlaceHolderRef = /*#__PURE__*/React.createRef();
+  const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
+  const notIos = !browser.ios;
   const onMediaSingleClicked = React.useCallback(event => {
     var _captionPlaceHolderRe;
     const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
@@ -405,6 +407,19 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     }
     (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 ? void 0 : _captionPlaceHolderRe.click();
   }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
+  const onMediaSingleKeyDown = React.useCallback(event => {
+    if (!expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true)) {
+      return;
+    }
+    if (mediaSingleWrapperRef.current !== event.target) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      var _captionPlaceHolderRe2;
+      event.preventDefault();
+      (_captionPlaceHolderRe2 = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe2 === void 0 ? void 0 : _captionPlaceHolderRe2.click();
+    }
+  }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
   const clickPlaceholder = React.useCallback(() => {
     var _pluginInjectionApi$a;
     if (typeof getPos === 'boolean') {
@@ -418,15 +433,14 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
       widthType: widthType
     };
   }, [widthType, mediaSingleWidthAttribute]);
-  const MediaChildren =
-  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-element-interactions, @atlassian/a11y/click-events-have-key-events
-  jsx("figure", {
+  const MediaChildren = jsx("figure", {
     ref: mediaSingleWrapperRef,
     css: figureWrapperStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: MediaSingleNodeSelector,
-    onClick: onMediaSingleClicked
+    onClick: notIos && expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : onMediaSingleClicked,
+    onKeyDown: notIos ? undefined : onMediaSingleKeyDown
   }, jsx(MediaBadges, {
     mediaElement: currentMediaElement(),
     mediaHeight: height,

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

@@ -18,6 +18,7 @@ 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 { Text } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, menuItemDimensions, toolbarButtonWrapper } from './styles';
 const ImageBorder = ({
@@ -311,8 +312,7 @@ const ImageBorder = ({
     forcePlacement: true,
     stick: true
   }, jsx("div", {
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    onMouseLeave: () => {
+    onMouseLeave: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : () => {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }

package/dist/es2019/ui/MediaViewer/MediaViewerContainer.js

@@ -6,6 +6,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isVideo } from '../../pm-plugins/utils/is-type';
 import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
@@ -38,17 +39,21 @@ export const MediaViewerContainer = ({
   const isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
   const shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
   return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ?
+  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
   // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
   jsx("span", {
     onClick: showMediaViewer,
     css: interactiveStyles,
-    "data-testid": mediaViewerContainerTestID
+    "data-testid": mediaViewerContainerTestID,
+    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
   }, children) :
+  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
   // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
   jsx("div", {
     onClick: showMediaViewer,
     css: interactiveStyles,
-    "data-testid": mediaViewerContainerTestID
+    "data-testid": mediaViewerContainerTestID,
+    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
   }, children), shouldShowViewer && jsx(RenderMediaViewer, {
     selectedNodeAttrs: selectedNodeAttrs,
     mediaClientConfig: mediaClientConfig,

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -426,6 +426,8 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
   var isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (mediaNode === null || mediaNode === void 0 || (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
   var mediaSingleWrapperRef = /*#__PURE__*/React.createRef();
   var captionPlaceHolderRef = /*#__PURE__*/React.createRef();
+  var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
+  var notIos = !browser.ios;
   var onMediaSingleClicked = React.useCallback(function (event) {
     var _captionPlaceHolderRe;
     var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
@@ -439,6 +441,19 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     }
     (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 || _captionPlaceHolderRe.click();
   }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
+  var onMediaSingleKeyDown = React.useCallback(function (event) {
+    if (!expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true)) {
+      return;
+    }
+    if (mediaSingleWrapperRef.current !== event.target) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      var _captionPlaceHolderRe2;
+      event.preventDefault();
+      (_captionPlaceHolderRe2 = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe2 === void 0 || _captionPlaceHolderRe2.click();
+    }
+  }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
   var clickPlaceholder = React.useCallback(function () {
     var _pluginInjectionApi$a;
     if (typeof getPos === 'boolean') {
@@ -452,15 +467,14 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
       widthType: widthType
     };
   }, [widthType, mediaSingleWidthAttribute]);
-  var MediaChildren =
-  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-element-interactions, @atlassian/a11y/click-events-have-key-events
-  jsx("figure", {
+  var MediaChildren = jsx("figure", {
     ref: mediaSingleWrapperRef,
     css: figureWrapperStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: MediaSingleNodeSelector,
-    onClick: onMediaSingleClicked
+    onClick: notIos && expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : onMediaSingleClicked,
+    onKeyDown: notIos ? undefined : onMediaSingleKeyDown
   }, jsx(MediaBadges, {
     mediaElement: currentMediaElement(),
     mediaHeight: height,

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

@@ -19,6 +19,7 @@ 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 { Text } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, menuItemDimensions, toolbarButtonWrapper } from './styles';
 var ImageBorder = function ImageBorder(_ref) {
@@ -332,8 +333,7 @@ var ImageBorder = function ImageBorder(_ref) {
     forcePlacement: true,
     stick: true
   }, jsx("div", {
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : function () {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }

package/dist/esm/ui/MediaViewer/MediaViewerContainer.js

@@ -7,6 +7,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isVideo } from '../../pm-plugins/utils/is-type';
 import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
@@ -44,17 +45,21 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
   var isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
   var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
   return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ?
+  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
   // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
   jsx("span", {
     onClick: showMediaViewer,
     css: interactiveStyles,
-    "data-testid": mediaViewerContainerTestID
+    "data-testid": mediaViewerContainerTestID,
+    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
   }, children) :
+  // remove eslint disable when platform_editor_eslint_suppression_fix has been cleaned up
   // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
   jsx("div", {
     onClick: showMediaViewer,
     css: interactiveStyles,
-    "data-testid": mediaViewerContainerTestID
+    "data-testid": mediaViewerContainerTestID,
+    role: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? 'none' : undefined
   }, children), shouldShowViewer && jsx(RenderMediaViewer, {
     selectedNodeAttrs: selectedNodeAttrs,
     mediaClientConfig: mediaClientConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "9.7.2",
+	"version": "9.7.3",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^33.0.0",
+		"@atlaskit/tmp-editor-statsig": "^33.1.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.26.0",
+		"@atlaskit/editor-common": "^111.27.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",