@atlaskit/editor-plugin-media 1.13.4 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 1.14.0
+
+### Minor Changes
+
+- [#73901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73901) [`2aefab5730ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2aefab5730ab) - ECA11Y-207 Added Tab navigation for video panel controls and handling key press on them
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.13.5
+
+### Patch Changes
+
+- [#87596](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87596) [`e0b95c3a4fba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0b95c3a4fba) - Add new UI badge for media node to trigger comments
+- Updated dependencies
+
 ## 1.13.4
 
 ### Patch Changes

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

@@ -16,11 +16,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _utils = require("@atlaskit/editor-common/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaCard = require("@atlaskit/media-card");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _styles = require("../styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -39,6 +41,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     (0, _classCallCheck2.default)(this, MediaNode);
     _this = _super.call(this, _props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "videoControlsWrapperRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindKeyDown", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setViewMediaClientConfig", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
       var mediaProvider, viewMediaClientConfig;
       return _regenerator.default.wrap(function _callee$(_context) {
@@ -150,6 +154,9 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       var _this$mediaPluginStat3;
       var node = this.props.node;
       (_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 || _this$mediaPluginStat3.handleMediaNodeUnmount(node);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh') && this.unbindKeyDown && typeof this.unbindKeyDown === 'function') {
+        this.unbindKeyDown();
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -162,6 +169,56 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       }
       (_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 || _this$mediaPluginStat5.updateElement();
       this.setViewMediaClientConfig();
+      // this.videoControlsWrapperRef is null on componentDidMount. We need to wait until it has value
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh') && this.videoControlsWrapperRef && this.videoControlsWrapperRef.current) {
+        var _this$mediaPluginStat6;
+        if (!((_this$mediaPluginStat6 = this.mediaPluginState) !== null && _this$mediaPluginStat6 !== void 0 && _this$mediaPluginStat6.videoControlsWrapperRef)) {
+          var _this$mediaPluginStat7;
+          this.bindKeydown();
+          (_this$mediaPluginStat7 = this.mediaPluginState) === null || _this$mediaPluginStat7 === void 0 || _this$mediaPluginStat7.updateAndDispatch({
+            videoControlsWrapperRef: this.videoControlsWrapperRef.current
+          });
+        }
+      }
+    }
+  }, {
+    key: "bindKeydown",
+    value: function bindKeydown() {
+      var _this2 = this;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        var _this$videoControlsWr;
+        var onKeydown = function onKeydown(event) {
+          if (event.key === 'Tab') {
+            var _this2$videoControlsW;
+            // Add focus trap for controls panel
+            var firstElement;
+            var lastElement;
+            var focusableElements = (_this2$videoControlsW = _this2.videoControlsWrapperRef) === null || _this2$videoControlsW === void 0 || (_this2$videoControlsW = _this2$videoControlsW.current) === null || _this2$videoControlsW === void 0 ? void 0 : _this2$videoControlsW.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
+            if (focusableElements && focusableElements.length) {
+              firstElement = focusableElements[0];
+              lastElement = focusableElements[focusableElements.length - 1];
+              if (event.shiftKey && document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+              } else if (!event.shiftKey && document.activeElement === lastElement) {
+                var _firstElement;
+                event.preventDefault();
+                (_firstElement = firstElement) === null || _firstElement === void 0 || _firstElement.focus();
+              }
+            }
+          }
+        };
+        if ((_this$videoControlsWr = this.videoControlsWrapperRef) !== null && _this$videoControlsWr !== void 0 && _this$videoControlsWr.current) {
+          this.unbindKeyDown = (0, _bindEventListener.bind)(this.videoControlsWrapperRef.current, {
+            type: 'keydown',
+            listener: onKeydown,
+            options: {
+              capture: true,
+              passive: false
+            }
+          });
+        }
+      }
     }
   }, {
     key: "render",
@@ -233,7 +290,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         isLazy: mediaOptions && mediaOptions.allowLazyLoading,
         featureFlags: mediaOptions && mediaOptions.featureFlags,
         contextId: contextId,
-        alt: alt
+        alt: alt,
+        videoControlsWrapperRef: this.videoControlsWrapperRef
       })));
     }
   }]);

package/dist/cjs/nodeviews/mediaSingle.js

@@ -33,6 +33,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _captions = require("../commands/captions");
 var _main = require("../pm-plugins/main");
 var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlaceholder"));
+var _CommentBadge = require("../ui/CommentBadge");
 var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
@@ -328,7 +329,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _pluginInjectionApi$m;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -344,10 +345,13 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         editorViewMode = _this$props2.editorViewMode,
         mediaPluginState = _this$props2.mediaPluginState,
         editorDisabled = _this$props2.editorDisabled;
-      var _ref4 = node.attrs,
-        layout = _ref4.layout,
-        widthType = _ref4.widthType,
-        mediaSingleWidthAttribute = _ref4.width;
+      var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
+        _ref4$commentsOnMedia = _ref4.commentsOnMedia,
+        commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
+      var _ref5 = node.attrs,
+        layout = _ref5.layout,
+        widthType = _ref5.widthType,
+        mediaSingleWidthAttribute = _ref5.width;
       var childNode = node.firstChild;
       var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
 
@@ -431,7 +435,12 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         css: figureWrapperStyles,
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, (0, _react2.jsx)("div", {
+      }, commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+        view: view,
+        api: pluginInjectionApi,
+        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+        getPos: getPos
+      }), (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
@@ -463,19 +472,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   mediaOptions: {}
 });
 (0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
-  var pluginInjectionApi = _ref5.pluginInjectionApi,
-    mediaProvider = _ref5.mediaProvider,
-    contextIdentifierProvider = _ref5.contextIdentifierProvider,
-    node = _ref5.node,
-    getPos = _ref5.getPos,
-    mediaOptions = _ref5.mediaOptions,
-    view = _ref5.view,
-    fullWidthMode = _ref5.fullWidthMode,
-    selected = _ref5.selected,
-    eventDispatcher = _ref5.eventDispatcher,
-    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
-    forwardRef = _ref5.forwardRef;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    mediaProvider = _ref6.mediaProvider,
+    contextIdentifierProvider = _ref6.contextIdentifierProvider,
+    node = _ref6.node,
+    getPos = _ref6.getPos,
+    mediaOptions = _ref6.mediaOptions,
+    view = _ref6.view,
+    fullWidthMode = _ref6.fullWidthMode,
+    selected = _ref6.selected,
+    eventDispatcher = _ref6.eventDispatcher,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
+    forwardRef = _ref6.forwardRef;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -590,6 +599,19 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       }
       return undefined;
     }
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        if (this.isNodeSelected() && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+          var targetType = event.target.type;
+          if (event.key === 'Enter' && targetType === 'button') {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
@@ -618,9 +640,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref6) {
-          var mediaProvider = _ref6.mediaProvider,
-            contextIdentifierProvider = _ref6.contextIdentifierProvider;
+        renderNode: function renderNode(_ref7) {
+          var mediaProvider = _ref7.mediaProvider,
+            contextIdentifierProvider = _ref7.contextIdentifierProvider;
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,

package/dist/cjs/pm-plugins/keymap.js

@@ -20,7 +20,6 @@ var _utils = require("../toolbar/utils");
 function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.undo.common, ignoreLinksInSteps, list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
   if (options !== null && options !== void 0 && options.allowCaptions) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
@@ -28,12 +27,16 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlug
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, splitMediaGroup, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media-resizing_b5v0o')) {
       (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
       (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
     }
   }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.activateVideoControls.common, focusPlayButton, list);
+  }
   return (0, _keymap.keymap)(list);
 }
 var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
@@ -45,6 +48,15 @@ var splitMediaGroup = function splitMediaGroup(state) {
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+var focusPlayButton = function focusPlayButton(state) {
+  var _stateKey$getState;
+  var videoControlsWrapperRef = (_stateKey$getState = _pluginKey.stateKey.getState(state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
+  if (videoControlsWrapperRef) {
+    var firstButton = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelector('button, [tabindex]:not([tabindex="-1"])');
+    firstButton === null || firstButton === void 0 || firstButton.focus();
+  }
+  return true;
+};
 var validationMaxMin = function validationMaxMin(newWidth, maxWidth, minWidth, validation) {
   var newWidthValidated;
   if (newWidth > maxWidth) {

package/dist/cjs/pm-plugins/main.js

@@ -848,7 +848,23 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         return _view2.DecorationSet.create(state.doc, dropPlaceholders);
       },
       nodeViews: options.nodeViews,
-      handleTextInput: function handleTextInput(view) {
+      handleTextInput: function handleTextInput(view, from, to, text) {
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+          var selection = view.state.selection;
+          if (text === ' ' && selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {
+            var _stateKey$getState;
+            var videoControlsWrapperRef = (_stateKey$getState = _pluginKey.stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
+            var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
+            if (videoControls) {
+              var isVideoControl = Array.from(videoControls).some(function (videoControl) {
+                return document.activeElement === videoControl;
+              });
+              if (isVideoControl) {
+                return true;
+              }
+            }
+          }
+        }
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
       },
@@ -870,6 +886,39 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
           return !!((_event$target2 = event.target) !== null && _event$target2 !== void 0 && _event$target2.closest("[class=\"".concat(MEDIA_CONTENT_WRAP_CLASS_NAME, "\"]")));
         }
         return false;
+      },
+      handleDOMEvents: {
+        keydown: function keydown(view, event) {
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+            var selection = view.state.selection;
+            if (selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {
+              // handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
+              if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+                var a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
+                var targetsAndButtons = {
+                  button: a11yDefaultKeys,
+                  range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
+                  text: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc'])
+                };
+                var targetType = event.target.type;
+                // only if targeting button or range/text input
+                if (targetType && targetType in targetsAndButtons) {
+                  var targetRelatedA11YKeys = targetsAndButtons[targetType];
+                  var allowedKeys = new Set(targetRelatedA11YKeys);
+                  if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
+                    // allow event to bubble to be handled by react handlers
+                    return true;
+                  } else {
+                    // otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
+                    view.focus();
+                  }
+                }
+              }
+            }
+            // fire regular prosemirror listeners;
+            return false;
+          }
+        }
       }
     }
   });

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentBadge = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
+  var api = _ref.api,
+    mediaNode = _ref.mediaNode,
+    view = _ref.view,
+    getPos = _ref.getPos,
+    intl = _ref.intl;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+    annotationState = _useSharedPluginState.annotationState;
+  var _view$state$schema = view.state.schema,
+    media = _view$state$schema.nodes.media,
+    annotation = _view$state$schema.marks.annotation,
+    state = view.state,
+    dispatch = view.dispatch;
+  var onClick = (0, _react.useCallback)(function () {
+    if (api.annotation && mediaNode) {
+      var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
+      showCommentForBlockNode(mediaNode)(state, dispatch);
+    }
+  }, [api.annotation, dispatch, mediaNode, state]);
+  var pos = getPos();
+  if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  })) {
+    return null;
+  }
+  var mediaElement = view.domAtPos(pos + 1).node;
+  return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
+    view: view,
+    mediaNode: mediaNode,
+    onClick: onClick,
+    mediaElement: mediaElement,
+    intl: intl
+  });
+};
+var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);

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

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { bind } from 'bind-event-listener';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { Card, CardLoading } from '@atlaskit/media-card';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
 import { MediaCardWrapper } from '../styles';
 
@@ -16,6 +18,8 @@ export class MediaNode extends Component {
   constructor(_props) {
     super(_props);
     _defineProperty(this, "state", {});
+    _defineProperty(this, "videoControlsWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "unbindKeyDown", null);
     _defineProperty(this, "setViewMediaClientConfig", async () => {
       const mediaProvider = await this.props.mediaProvider;
       if (mediaProvider) {
@@ -95,6 +99,9 @@ export class MediaNode extends Component {
       node
     } = this.props;
     (_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 ? void 0 : _this$mediaPluginStat3.handleMediaNodeUnmount(node);
+    if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh') && this.unbindKeyDown && typeof this.unbindKeyDown === 'function') {
+      this.unbindKeyDown();
+    }
   }
   componentDidUpdate(prevProps) {
     var _this$mediaPluginStat5;
@@ -105,6 +112,53 @@ export class MediaNode extends Component {
     }
     (_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 ? void 0 : _this$mediaPluginStat5.updateElement();
     this.setViewMediaClientConfig();
+    // this.videoControlsWrapperRef is null on componentDidMount. We need to wait until it has value
+    if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh') && this.videoControlsWrapperRef && this.videoControlsWrapperRef.current) {
+      var _this$mediaPluginStat6;
+      if (!((_this$mediaPluginStat6 = this.mediaPluginState) !== null && _this$mediaPluginStat6 !== void 0 && _this$mediaPluginStat6.videoControlsWrapperRef)) {
+        var _this$mediaPluginStat7;
+        this.bindKeydown();
+        (_this$mediaPluginStat7 = this.mediaPluginState) === null || _this$mediaPluginStat7 === void 0 ? void 0 : _this$mediaPluginStat7.updateAndDispatch({
+          videoControlsWrapperRef: this.videoControlsWrapperRef.current
+        });
+      }
+    }
+  }
+  bindKeydown() {
+    if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+      var _this$videoControlsWr3;
+      const onKeydown = event => {
+        if (event.key === 'Tab') {
+          var _this$videoControlsWr, _this$videoControlsWr2;
+          // Add focus trap for controls panel
+          let firstElement;
+          let lastElement;
+          const focusableElements = (_this$videoControlsWr = this.videoControlsWrapperRef) === null || _this$videoControlsWr === void 0 ? void 0 : (_this$videoControlsWr2 = _this$videoControlsWr.current) === null || _this$videoControlsWr2 === void 0 ? void 0 : _this$videoControlsWr2.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
+          if (focusableElements && focusableElements.length) {
+            firstElement = focusableElements[0];
+            lastElement = focusableElements[focusableElements.length - 1];
+            if (event.shiftKey && document.activeElement === firstElement) {
+              event.preventDefault();
+              lastElement.focus();
+            } else if (!event.shiftKey && document.activeElement === lastElement) {
+              var _firstElement;
+              event.preventDefault();
+              (_firstElement = firstElement) === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
+            }
+          }
+        }
+      };
+      if ((_this$videoControlsWr3 = this.videoControlsWrapperRef) !== null && _this$videoControlsWr3 !== void 0 && _this$videoControlsWr3.current) {
+        this.unbindKeyDown = bind(this.videoControlsWrapperRef.current, {
+          type: 'keydown',
+          listener: onKeydown,
+          options: {
+            capture: true,
+            passive: false
+          }
+        });
+      }
+    }
   }
   render() {
     const {
@@ -175,7 +229,8 @@ export class MediaNode extends Component {
       isLazy: mediaOptions && mediaOptions.allowLazyLoading,
       featureFlags: mediaOptions && mediaOptions.featureFlags,
       contextId: contextId,
-      alt: alt
+      alt: alt,
+      videoControlsWrapperRef: this.videoControlsWrapperRef
     })));
   }
 }

package/dist/es2019/nodeviews/mediaSingle.js

@@ -18,6 +18,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import { CommentBadge } from '../ui/CommentBadge';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
@@ -229,7 +230,7 @@ export default class MediaSingleNode extends Component {
     });
   }
   render() {
-    var _pluginInjectionApi$m, _pluginInjectionApi$m2;
+    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2;
     const {
       selected,
       getPos,
@@ -248,6 +249,9 @@ export default class MediaSingleNode extends Component {
       mediaPluginState,
       editorDisabled
     } = this.props;
+    const {
+      commentsOnMedia = false
+    } = (mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {};
     const {
       layout,
       widthType,
@@ -344,7 +348,12 @@ export default class MediaSingleNode extends Component {
       css: figureWrapperStyles,
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
-    }, jsx("div", {
+    }, commentsOnMedia && jsx(CommentBadge, {
+      view: view,
+      api: pluginInjectionApi,
+      mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+      getPos: getPos
+    }), jsx("div", {
       ref: this.props.forwardRef
     }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
       ref: this.captionPlaceHolderRef,
@@ -489,6 +498,17 @@ class MediaSingleNodeView extends ReactNodeView {
     }
     return undefined;
   }
+  stopEvent(event) {
+    if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+      if (this.isNodeSelected() && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+        const targetType = event.target.type;
+        if (event.key === 'Enter' && targetType === 'button') {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
   update(node, decorations, _innerDecorations, isValidUpdate) {
     if (!isValidUpdate) {
       isValidUpdate = (currentNode, newNode) => this.getNodeMediaId(currentNode) === this.getNodeMediaId(newNode);

package/dist/es2019/pm-plugins/keymap.js

@@ -1,4 +1,4 @@
-import { bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { activateVideoControls, bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
 import { mediaResizeAnnouncerMessMessages as mediaResizeAnnouncerMess } from '@atlaskit/editor-common/media';
 import { calcMediaSingleMaxWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
@@ -13,7 +13,6 @@ import { calcNewLayout, getSelectedMediaSingle } from '../toolbar/utils';
 export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
   const list = {};
   bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
-  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
   if (options !== null && options !== void 0 && options.allowCaptions) {
     bindKeymapWithCommand(moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
     bindKeymapWithCommand(tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
@@ -21,12 +20,16 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
     bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
   if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
     if (getBooleanFF('platform.editor.a11y-media-resizing_b5v0o')) {
       bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
       bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
     }
   }
+  if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+    bindKeymapWithCommand(activateVideoControls.common, focusPlayButton, list);
+  }
   return keymap(list);
 }
 const ignoreLinksInSteps = state => {
@@ -38,6 +41,15 @@ const splitMediaGroup = state => {
   const mediaPluginState = stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+const focusPlayButton = state => {
+  var _stateKey$getState;
+  const videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
+  if (videoControlsWrapperRef) {
+    const firstButton = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelector('button, [tabindex]:not([tabindex="-1"])');
+    firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
+  }
+  return true;
+};
 const validationMaxMin = (newWidth, maxWidth, minWidth, validation) => {
   let newWidthValidated;
   if (newWidth > maxWidth) {

package/dist/es2019/pm-plugins/main.js

@@ -733,7 +733,25 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
         return DecorationSet.create(state.doc, dropPlaceholders);
       },
       nodeViews: options.nodeViews,
-      handleTextInput(view) {
+      handleTextInput(view, from, to, text) {
+        if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+          const {
+            selection
+          } = view.state;
+          if (text === ' ' && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+            var _stateKey$getState;
+            const videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
+            const videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
+            if (videoControls) {
+              const isVideoControl = Array.from(videoControls).some(videoControl => {
+                return document.activeElement === videoControl;
+              });
+              if (isVideoControl) {
+                return true;
+              }
+            }
+          }
+        }
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
       },
@@ -755,6 +773,41 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
           return !!((_event$target2 = event.target) !== null && _event$target2 !== void 0 && _event$target2.closest(`[class="${MEDIA_CONTENT_WRAP_CLASS_NAME}"]`));
         }
         return false;
+      },
+      handleDOMEvents: {
+        keydown: (view, event) => {
+          if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+            const {
+              selection
+            } = view.state;
+            if (selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+              // handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
+              if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+                const a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
+                const targetsAndButtons = {
+                  button: a11yDefaultKeys,
+                  range: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'],
+                  text: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'Esc']
+                };
+                const targetType = event.target.type;
+                // only if targeting button or range/text input
+                if (targetType && targetType in targetsAndButtons) {
+                  let targetRelatedA11YKeys = targetsAndButtons[targetType];
+                  const allowedKeys = new Set(targetRelatedA11YKeys);
+                  if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
+                    // allow event to bubble to be handled by react handlers
+                    return true;
+                  } else {
+                    // otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
+                    view.focus();
+                  }
+                }
+              }
+            }
+            // fire regular prosemirror listeners;
+            return false;
+          }
+        }
       }
     }
   });

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

@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
+const CommentBadgeWrapper = ({
+  api,
+  mediaNode,
+  view,
+  getPos,
+  intl
+}) => {
+  const {
+    annotationState
+  } = useSharedPluginState(api, ['annotation']);
+  const {
+    state: {
+      schema: {
+        nodes: {
+          media
+        },
+        marks: {
+          annotation
+        }
+      }
+    },
+    state,
+    dispatch
+  } = view;
+  const onClick = useCallback(() => {
+    if (api.annotation && mediaNode) {
+      const {
+        showCommentForBlockNode
+      } = api.annotation.actions;
+      showCommentForBlockNode(mediaNode)(state, dispatch);
+    }
+  }, [api.annotation, dispatch, mediaNode, state]);
+  const pos = getPos();
+  if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id])) {
+    return null;
+  }
+  const mediaElement = view.domAtPos(pos + 1).node;
+  return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
+    view: view,
+    mediaNode: mediaNode,
+    onClick: onClick,
+    mediaElement: mediaElement,
+    intl: intl
+  });
+};
+export const CommentBadge = injectIntl(CommentBadgeWrapper);

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

@@ -10,11 +10,13 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
+import { bind } from 'bind-event-listener';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { Card, CardLoading } from '@atlaskit/media-card';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
 import { MediaCardWrapper } from '../styles';
 
@@ -30,6 +32,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, MediaNode);
     _this = _super.call(this, _props);
     _defineProperty(_assertThisInitialized(_this), "state", {});
+    _defineProperty(_assertThisInitialized(_this), "videoControlsWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "unbindKeyDown", null);
     _defineProperty(_assertThisInitialized(_this), "setViewMediaClientConfig", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var mediaProvider, viewMediaClientConfig;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -141,6 +145,9 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       var _this$mediaPluginStat3;
       var node = this.props.node;
       (_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 || _this$mediaPluginStat3.handleMediaNodeUnmount(node);
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh') && this.unbindKeyDown && typeof this.unbindKeyDown === 'function') {
+        this.unbindKeyDown();
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -153,6 +160,56 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
       }
       (_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 || _this$mediaPluginStat5.updateElement();
       this.setViewMediaClientConfig();
+      // this.videoControlsWrapperRef is null on componentDidMount. We need to wait until it has value
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh') && this.videoControlsWrapperRef && this.videoControlsWrapperRef.current) {
+        var _this$mediaPluginStat6;
+        if (!((_this$mediaPluginStat6 = this.mediaPluginState) !== null && _this$mediaPluginStat6 !== void 0 && _this$mediaPluginStat6.videoControlsWrapperRef)) {
+          var _this$mediaPluginStat7;
+          this.bindKeydown();
+          (_this$mediaPluginStat7 = this.mediaPluginState) === null || _this$mediaPluginStat7 === void 0 || _this$mediaPluginStat7.updateAndDispatch({
+            videoControlsWrapperRef: this.videoControlsWrapperRef.current
+          });
+        }
+      }
+    }
+  }, {
+    key: "bindKeydown",
+    value: function bindKeydown() {
+      var _this2 = this;
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        var _this$videoControlsWr;
+        var onKeydown = function onKeydown(event) {
+          if (event.key === 'Tab') {
+            var _this2$videoControlsW;
+            // Add focus trap for controls panel
+            var firstElement;
+            var lastElement;
+            var focusableElements = (_this2$videoControlsW = _this2.videoControlsWrapperRef) === null || _this2$videoControlsW === void 0 || (_this2$videoControlsW = _this2$videoControlsW.current) === null || _this2$videoControlsW === void 0 ? void 0 : _this2$videoControlsW.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
+            if (focusableElements && focusableElements.length) {
+              firstElement = focusableElements[0];
+              lastElement = focusableElements[focusableElements.length - 1];
+              if (event.shiftKey && document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+              } else if (!event.shiftKey && document.activeElement === lastElement) {
+                var _firstElement;
+                event.preventDefault();
+                (_firstElement = firstElement) === null || _firstElement === void 0 || _firstElement.focus();
+              }
+            }
+          }
+        };
+        if ((_this$videoControlsWr = this.videoControlsWrapperRef) !== null && _this$videoControlsWr !== void 0 && _this$videoControlsWr.current) {
+          this.unbindKeyDown = bind(this.videoControlsWrapperRef.current, {
+            type: 'keydown',
+            listener: onKeydown,
+            options: {
+              capture: true,
+              passive: false
+            }
+          });
+        }
+      }
     }
   }, {
     key: "render",
@@ -224,7 +281,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         isLazy: mediaOptions && mediaOptions.allowLazyLoading,
         featureFlags: mediaOptions && mediaOptions.featureFlags,
         contextId: contextId,
-        alt: alt
+        alt: alt,
+        videoControlsWrapperRef: this.videoControlsWrapperRef
       })));
     }
   }]);

package/dist/esm/nodeviews/mediaSingle.js

@@ -31,6 +31,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import { CommentBadge } from '../ui/CommentBadge';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
@@ -320,7 +321,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _pluginInjectionApi$m;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -336,10 +337,13 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         editorViewMode = _this$props2.editorViewMode,
         mediaPluginState = _this$props2.mediaPluginState,
         editorDisabled = _this$props2.editorDisabled;
-      var _ref4 = node.attrs,
-        layout = _ref4.layout,
-        widthType = _ref4.widthType,
-        mediaSingleWidthAttribute = _ref4.width;
+      var _ref4 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
+        _ref4$commentsOnMedia = _ref4.commentsOnMedia,
+        commentsOnMedia = _ref4$commentsOnMedia === void 0 ? false : _ref4$commentsOnMedia;
+      var _ref5 = node.attrs,
+        layout = _ref5.layout,
+        widthType = _ref5.widthType,
+        mediaSingleWidthAttribute = _ref5.width;
       var childNode = node.firstChild;
       var attrs = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
 
@@ -423,7 +427,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         css: figureWrapperStyles,
         className: MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, jsx("div", {
+      }, commentsOnMedia && jsx(CommentBadge, {
+        view: view,
+        api: pluginInjectionApi,
+        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+        getPos: getPos
+      }), jsx("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
         ref: this.captionPlaceHolderRef,
@@ -456,19 +465,19 @@ _defineProperty(MediaSingleNode, "defaultProps", {
 });
 _defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
 export { MediaSingleNode as default };
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
-  var pluginInjectionApi = _ref5.pluginInjectionApi,
-    mediaProvider = _ref5.mediaProvider,
-    contextIdentifierProvider = _ref5.contextIdentifierProvider,
-    node = _ref5.node,
-    getPos = _ref5.getPos,
-    mediaOptions = _ref5.mediaOptions,
-    view = _ref5.view,
-    fullWidthMode = _ref5.fullWidthMode,
-    selected = _ref5.selected,
-    eventDispatcher = _ref5.eventDispatcher,
-    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
-    forwardRef = _ref5.forwardRef;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
+  var pluginInjectionApi = _ref6.pluginInjectionApi,
+    mediaProvider = _ref6.mediaProvider,
+    contextIdentifierProvider = _ref6.contextIdentifierProvider,
+    node = _ref6.node,
+    getPos = _ref6.getPos,
+    mediaOptions = _ref6.mediaOptions,
+    view = _ref6.view,
+    fullWidthMode = _ref6.fullWidthMode,
+    selected = _ref6.selected,
+    eventDispatcher = _ref6.eventDispatcher,
+    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
+    forwardRef = _ref6.forwardRef;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -583,6 +592,19 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       }
       return undefined;
     }
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+        if (this.isNodeSelected() && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+          var targetType = event.target.type;
+          if (event.key === 'Enter' && targetType === 'button') {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
@@ -611,9 +633,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return jsx(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref6) {
-          var mediaProvider = _ref6.mediaProvider,
-            contextIdentifierProvider = _ref6.contextIdentifierProvider;
+        renderNode: function renderNode(_ref7) {
+          var mediaProvider = _ref7.mediaProvider,
+            contextIdentifierProvider = _ref7.contextIdentifierProvider;
           return jsx(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,

package/dist/esm/pm-plugins/keymap.js

@@ -1,4 +1,4 @@
-import { bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { activateVideoControls, bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
 import { mediaResizeAnnouncerMessMessages as mediaResizeAnnouncerMess } from '@atlaskit/editor-common/media';
 import { calcMediaSingleMaxWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
@@ -13,7 +13,6 @@ import { calcNewLayout, getSelectedMediaSingle } from '../toolbar/utils';
 export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
   var list = {};
   bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
-  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
   if (options !== null && options !== void 0 && options.allowCaptions) {
     bindKeymapWithCommand(moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
     bindKeymapWithCommand(tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
@@ -21,12 +20,16 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
     bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
   }
   bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
   if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
     if (getBooleanFF('platform.editor.a11y-media-resizing_b5v0o')) {
       bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
       bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
     }
   }
+  if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+    bindKeymapWithCommand(activateVideoControls.common, focusPlayButton, list);
+  }
   return keymap(list);
 }
 var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
@@ -38,6 +41,15 @@ var splitMediaGroup = function splitMediaGroup(state) {
   var mediaPluginState = stateKey.getState(state);
   return mediaPluginState.splitMediaGroup();
 };
+var focusPlayButton = function focusPlayButton(state) {
+  var _stateKey$getState;
+  var videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
+  if (videoControlsWrapperRef) {
+    var firstButton = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelector('button, [tabindex]:not([tabindex="-1"])');
+    firstButton === null || firstButton === void 0 || firstButton.focus();
+  }
+  return true;
+};
 var validationMaxMin = function validationMaxMin(newWidth, maxWidth, minWidth, validation) {
   var newWidthValidated;
   if (newWidth > maxWidth) {

package/dist/esm/pm-plugins/main.js

@@ -833,7 +833,23 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
         return DecorationSet.create(state.doc, dropPlaceholders);
       },
       nodeViews: options.nodeViews,
-      handleTextInput: function handleTextInput(view) {
+      handleTextInput: function handleTextInput(view, from, to, text) {
+        if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+          var selection = view.state.selection;
+          if (text === ' ' && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+            var _stateKey$getState;
+            var videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
+            var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
+            if (videoControls) {
+              var isVideoControl = Array.from(videoControls).some(function (videoControl) {
+                return document.activeElement === videoControl;
+              });
+              if (isVideoControl) {
+                return true;
+              }
+            }
+          }
+        }
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
       },
@@ -855,6 +871,39 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
           return !!((_event$target2 = event.target) !== null && _event$target2 !== void 0 && _event$target2.closest("[class=\"".concat(MEDIA_CONTENT_WRAP_CLASS_NAME, "\"]")));
         }
         return false;
+      },
+      handleDOMEvents: {
+        keydown: function keydown(view, event) {
+          if (getBooleanFF('platform.editor.a11y_video_controls_keyboard_support_yhcxh')) {
+            var selection = view.state.selection;
+            if (selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+              // handle keydown events for video controls panel to prevent fire of rest prosemirror listeners;
+              if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+                var a11yDefaultKeys = ['Tab', 'Space', 'Enter', 'Shift', 'Esc'];
+                var targetsAndButtons = {
+                  button: a11yDefaultKeys,
+                  range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
+                  text: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc'])
+                };
+                var targetType = event.target.type;
+                // only if targeting button or range/text input
+                if (targetType && targetType in targetsAndButtons) {
+                  var targetRelatedA11YKeys = targetsAndButtons[targetType];
+                  var allowedKeys = new Set(targetRelatedA11YKeys);
+                  if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
+                    // allow event to bubble to be handled by react handlers
+                    return true;
+                  } else {
+                    // otherwise focus editor to allow setting gapCursor. (e.g.: arrowRightFromMediaSingle)
+                    view.focus();
+                  }
+                }
+              }
+            }
+            // fire regular prosemirror listeners;
+            return false;
+          }
+        }
       }
     }
   });

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

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
+  var api = _ref.api,
+    mediaNode = _ref.mediaNode,
+    view = _ref.view,
+    getPos = _ref.getPos,
+    intl = _ref.intl;
+  var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
+    annotationState = _useSharedPluginState.annotationState;
+  var _view$state$schema = view.state.schema,
+    media = _view$state$schema.nodes.media,
+    annotation = _view$state$schema.marks.annotation,
+    state = view.state,
+    dispatch = view.dispatch;
+  var onClick = useCallback(function () {
+    if (api.annotation && mediaNode) {
+      var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
+      showCommentForBlockNode(mediaNode)(state, dispatch);
+    }
+  }, [api.annotation, dispatch, mediaNode, state]);
+  var pos = getPos();
+  if (!Number.isFinite(pos) || !annotationState || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
+    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotationState.annotations) || annotationState.annotations[maybeAnnotation.attrs.id];
+  })) {
+    return null;
+  }
+  var mediaElement = view.domAtPos(pos + 1).node;
+  return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
+    view: view,
+    mediaNode: mediaNode,
+    onClick: onClick,
+    mediaElement: mediaElement,
+    intl: intl
+  });
+};
+export var CommentBadge = injectIntl(CommentBadgeWrapper);

package/dist/types/nodeviews/mediaNodeView/media.d.ts

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import type { UnbindFn } from 'bind-event-listener';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageLoaderProps } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -28,11 +29,14 @@ interface MediaNodeState {
 export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState> {
     private mediaPluginState;
     state: MediaNodeState;
+    videoControlsWrapperRef: React.RefObject<HTMLDivElement>;
+    unbindKeyDown: UnbindFn | null;
     constructor(props: MediaNodeProps);
     shouldComponentUpdate(nextProps: MediaNodeProps, nextState: MediaNodeState): boolean;
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: Readonly<MediaNodeProps>): void;
+    bindKeydown(): void;
     private setViewMediaClientConfig;
     private selectMediaSingleFromCard;
     private selectMediaSingle;

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

@@ -54,6 +54,7 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     checkAndUpdateSelectionType: () => import("@atlaskit/editor-common/utils").SelectedState | null;
     isNodeSelected: () => boolean;
     getNodeMediaId(node: PMNode): string | undefined;
+    stopEvent(event: Event): boolean;
     update(node: PMNode, decorations: readonly Decoration[], _innerDecorations?: DecorationSource, isValidUpdate?: (currentNode: PMNode, newNode: PMNode) => boolean): boolean;
     render(props: MediaSingleNodeViewProps, forwardRef?: ForwardRef): jsx.JSX.Element;
     ignoreMutation(): boolean;

package/dist/types/pm-plugins/types.d.ts

@@ -22,6 +22,7 @@ export interface MediaPluginState {
     showDropzone: boolean;
     isFullscreen: boolean;
     element?: HTMLElement;
+    videoControlsWrapperRef?: HTMLElement;
     layout: MediaSingleLayout;
     mediaNodes: MediaNodeWithPosHandler[];
     options: MediaPluginOptions;
@@ -64,7 +65,7 @@ export interface MediaPluginState {
     setResizingWidth(width: number): void;
     setView(view: EditorView): void;
     destroy(): void;
-    updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
+    updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen' | 'videoControlsWrapperRef'>>): void;
     clone(): MediaPluginState;
     subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
     unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaNextEditorPluginType } from '../../next-plugin-type';
+import type { getPosHandler } from '../../types';
+type CommentBadgeProps = {
+    intl: IntlShape;
+    api: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    mediaNode: PMNode | null;
+    view: EditorView;
+    getPos: getPosHandler;
+};
+export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
+    WrappedComponent: React.ComponentType<CommentBadgeProps>;
+};
+export {};

package/dist/types-ts4.5/nodeviews/mediaNodeView/media.d.ts

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import type { UnbindFn } from 'bind-event-listener';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageLoaderProps } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -28,11 +29,14 @@ interface MediaNodeState {
 export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState> {
     private mediaPluginState;
     state: MediaNodeState;
+    videoControlsWrapperRef: React.RefObject<HTMLDivElement>;
+    unbindKeyDown: UnbindFn | null;
     constructor(props: MediaNodeProps);
     shouldComponentUpdate(nextProps: MediaNodeProps, nextState: MediaNodeState): boolean;
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: Readonly<MediaNodeProps>): void;
+    bindKeydown(): void;
     private setViewMediaClientConfig;
     private selectMediaSingleFromCard;
     private selectMediaSingle;

package/dist/types-ts4.5/nodeviews/mediaSingle.d.ts

@@ -54,6 +54,7 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     checkAndUpdateSelectionType: () => import("@atlaskit/editor-common/utils").SelectedState | null;
     isNodeSelected: () => boolean;
     getNodeMediaId(node: PMNode): string | undefined;
+    stopEvent(event: Event): boolean;
     update(node: PMNode, decorations: readonly Decoration[], _innerDecorations?: DecorationSource, isValidUpdate?: (currentNode: PMNode, newNode: PMNode) => boolean): boolean;
     render(props: MediaSingleNodeViewProps, forwardRef?: ForwardRef): jsx.JSX.Element;
     ignoreMutation(): boolean;

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -22,6 +22,7 @@ export interface MediaPluginState {
     showDropzone: boolean;
     isFullscreen: boolean;
     element?: HTMLElement;
+    videoControlsWrapperRef?: HTMLElement;
     layout: MediaSingleLayout;
     mediaNodes: MediaNodeWithPosHandler[];
     options: MediaPluginOptions;
@@ -64,7 +65,7 @@ export interface MediaPluginState {
     setResizingWidth(width: number): void;
     setView(view: EditorView): void;
     destroy(): void;
-    updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen'>>): void;
+    updateAndDispatch(props: Partial<Pick<this, 'allowsUploads' | 'allUploadsFinished' | 'isFullscreen' | 'videoControlsWrapperRef'>>): void;
     clone(): MediaPluginState;
     subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
     unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;

package/dist/types-ts4.5/ui/CommentBadge/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaNextEditorPluginType } from '../../next-plugin-type';
+import type { getPosHandler } from '../../types';
+type CommentBadgeProps = {
+    intl: IntlShape;
+    api: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    mediaNode: PMNode | null;
+    view: EditorView;
+    getPos: getPosHandler;
+};
+export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
+    WrappedComponent: React.ComponentType<CommentBadgeProps>;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.13.4",
+  "version": "1.14.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,11 +36,11 @@
     "@atlaskit/adf-schema": "^35.8.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.10.0",
+    "@atlaskit/button": "^17.11.0",
     "@atlaskit/editor-common": "^78.23.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-annotation": "1.5.6",
+    "@atlaskit/editor-plugin-annotation": "1.5.7",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
@@ -61,7 +61,7 @@
     "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.4.0",
-    "@atlaskit/media-ui": "^25.5.0",
+    "@atlaskit/media-ui": "^25.6.0",
     "@atlaskit/media-viewer": "^48.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^5.5.0",
@@ -71,6 +71,7 @@
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
+    "bind-event-listener": "^2.1.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
@@ -141,6 +142,9 @@
     "platform.editor.allow-extended-panel": {
       "type": "boolean"
     },
+    "platform.editor.a11y_video_controls_keyboard_support_yhcxh": {
+      "type": "boolean"
+    },
     "platform.editor.media.fix-copy-paste-excel_62g4s": {
       "type": "boolean"
     },