@atlaskit/editor-plugin-media 1.13.5 → 1.14.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 1.14.1
+
+### Patch Changes
+
+- [#88137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88137) [`0a744349d5e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a744349d5e6) - [ux] [ED-22833] Change icon used for comment button in media floating toolbar when there are active comments associated with the media. The icon will now be comment icon with a dot at top right corner.
+
+## 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

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

@@ -599,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) {

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/toolbar/assets/commentWithDotIcon.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentWithDotIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _colors = require("@atlaskit/theme/colors");
+var IconCommentWithDotGlyph = function IconCommentWithDotGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "14",
+    y: "2",
+    width: "8",
+    height: "8",
+    rx: "4",
+    fill: "var(--ds-background-warning-bold, ".concat(_colors.Y300, ")")
+  }));
+};
+var CommentWithDotIcon = exports.CommentWithDotIcon = function CommentWithDotIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconCommentWithDotGlyph
+  }, props));
+};

package/dist/cjs/toolbar/comments.js

@@ -9,17 +9,26 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
-var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
-var commentButton = exports.commentButton = function commentButton(intl, _state, api) {
-  var title = intl.formatMessage(_media.commentMessages.addCommentOnMedia);
+var _commentWithDotIcon = require("./assets/commentWithDotIcon");
+var _utils = require("./utils");
+var commentButton = exports.commentButton = function commentButton(intl, state, api) {
+  var _getSelectedMediaSing, _api$annotation;
+  var selectMediaNode = (_getSelectedMediaSing = (0, _utils.getSelectedMediaSingle)(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
+  var hasActiveComments = false;
+  var annotations = api === null || api === void 0 || (_api$annotation = api.annotation) === null || _api$annotation === void 0 || (_api$annotation = _api$annotation.sharedState.currentState()) === null || _api$annotation === void 0 ? void 0 : _api$annotation.annotations;
+  if (selectMediaNode && annotations) {
+    hasActiveComments = selectMediaNode.marks.some(function (mark) {
+      return mark.type.name === 'annotation' && !annotations[mark.attrs.id];
+    });
+  }
+  var title = intl.formatMessage(hasActiveComments ? _media.commentMessages.viewCommentsOnMedia : _media.commentMessages.addCommentOnMedia);
   var onClickHandler = function onClickHandler(state, dispatch) {
-    if (api !== null && api !== void 0 && api.annotation && state.selection instanceof _state2.NodeSelection) {
-      var mediaNode = state.selection.node.firstChild;
+    if (api !== null && api !== void 0 && api.annotation && selectMediaNode) {
       var _api$annotation$actio = api.annotation.actions,
         showCommentForBlockNode = _api$annotation$actio.showCommentForBlockNode,
         setInlineCommentDraftState = _api$annotation$actio.setInlineCommentDraftState;
-      if (!showCommentForBlockNode(mediaNode)(state, dispatch)) {
+      if (!showCommentForBlockNode(selectMediaNode)(state, dispatch)) {
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
         _analytics.INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
@@ -30,7 +39,7 @@ var commentButton = exports.commentButton = function commentButton(intl, _state,
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: _comment.default,
+    icon: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment.default,
     title: title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {

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

@@ -498,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/toolbar/assets/commentWithDotIcon.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+import { Y300 } from '@atlaskit/theme/colors';
+const IconCommentWithDotGlyph = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "14",
+    y: "2",
+    width: "8",
+    height: "8",
+    rx: "4",
+    fill: `var(--ds-background-warning-bold, ${Y300})`
+  }));
+};
+export const CommentWithDotIcon = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconCommentWithDotGlyph
+  }, props));
+};

package/dist/es2019/toolbar/comments.js

@@ -2,18 +2,25 @@ import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-export const commentButton = (intl, _state, api) => {
-  const title = intl.formatMessage(messages.addCommentOnMedia);
+import { CommentWithDotIcon } from './assets/commentWithDotIcon';
+import { getSelectedMediaSingle } from './utils';
+export const commentButton = (intl, state, api) => {
+  var _getSelectedMediaSing, _api$annotation, _api$annotation$share;
+  const selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
+  let hasActiveComments = false;
+  const annotations = api === null || api === void 0 ? void 0 : (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : (_api$annotation$share = _api$annotation.sharedState.currentState()) === null || _api$annotation$share === void 0 ? void 0 : _api$annotation$share.annotations;
+  if (selectMediaNode && annotations) {
+    hasActiveComments = selectMediaNode.marks.some(mark => mark.type.name === 'annotation' && !annotations[mark.attrs.id]);
+  }
+  const title = intl.formatMessage(hasActiveComments ? messages.viewCommentsOnMedia : messages.addCommentOnMedia);
   const onClickHandler = (state, dispatch) => {
-    if (api !== null && api !== void 0 && api.annotation && state.selection instanceof NodeSelection) {
-      const mediaNode = state.selection.node.firstChild;
+    if (api !== null && api !== void 0 && api.annotation && selectMediaNode) {
       const {
         showCommentForBlockNode,
         setInlineCommentDraftState
       } = api.annotation.actions;
-      if (!showCommentForBlockNode(mediaNode)(state, dispatch)) {
+      if (!showCommentForBlockNode(selectMediaNode)(state, dispatch)) {
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
         INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
@@ -24,7 +31,7 @@ export const commentButton = (intl, _state, api) => {
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: CommentIcon,
+    icon: hasActiveComments ? CommentWithDotIcon : CommentIcon,
     title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

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

@@ -592,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) {

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/toolbar/assets/commentWithDotIcon.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+import { Y300 } from '@atlaskit/theme/colors';
+var IconCommentWithDotGlyph = function IconCommentWithDotGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "14",
+    y: "2",
+    width: "8",
+    height: "8",
+    rx: "4",
+    fill: "var(--ds-background-warning-bold, ".concat(Y300, ")")
+  }));
+};
+export var CommentWithDotIcon = function CommentWithDotIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconCommentWithDotGlyph
+  }, props));
+};

package/dist/esm/toolbar/comments.js

@@ -2,17 +2,26 @@ import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-export var commentButton = function commentButton(intl, _state, api) {
-  var title = intl.formatMessage(messages.addCommentOnMedia);
+import { CommentWithDotIcon } from './assets/commentWithDotIcon';
+import { getSelectedMediaSingle } from './utils';
+export var commentButton = function commentButton(intl, state, api) {
+  var _getSelectedMediaSing, _api$annotation;
+  var selectMediaNode = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.node.firstChild;
+  var hasActiveComments = false;
+  var annotations = api === null || api === void 0 || (_api$annotation = api.annotation) === null || _api$annotation === void 0 || (_api$annotation = _api$annotation.sharedState.currentState()) === null || _api$annotation === void 0 ? void 0 : _api$annotation.annotations;
+  if (selectMediaNode && annotations) {
+    hasActiveComments = selectMediaNode.marks.some(function (mark) {
+      return mark.type.name === 'annotation' && !annotations[mark.attrs.id];
+    });
+  }
+  var title = intl.formatMessage(hasActiveComments ? messages.viewCommentsOnMedia : messages.addCommentOnMedia);
   var onClickHandler = function onClickHandler(state, dispatch) {
-    if (api !== null && api !== void 0 && api.annotation && state.selection instanceof NodeSelection) {
-      var mediaNode = state.selection.node.firstChild;
+    if (api !== null && api !== void 0 && api.annotation && selectMediaNode) {
       var _api$annotation$actio = api.annotation.actions,
         showCommentForBlockNode = _api$annotation$actio.showCommentForBlockNode,
         setInlineCommentDraftState = _api$annotation$actio.setInlineCommentDraftState;
-      if (!showCommentForBlockNode(mediaNode)(state, dispatch)) {
+      if (!showCommentForBlockNode(selectMediaNode)(state, dispatch)) {
         setInlineCommentDraftState(true,
         // TODO: might need to update to reflect it's from media floating toolbar
         INPUT_METHOD.FLOATING_TB, 'block', true)(state, dispatch);
@@ -23,7 +32,7 @@ export var commentButton = function commentButton(intl, _state, api) {
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: CommentIcon,
+    icon: hasActiveComments ? CommentWithDotIcon : CommentIcon,
     title: title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

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/toolbar/assets/commentWithDotIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { GlyphProps } from '@atlaskit/icon/types';
+export declare const CommentWithDotIcon: (props: GlyphProps) => JSX.Element;

package/dist/types/toolbar/comments.d.ts

@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
 import type { Command, ExtractInjectionAPI, FloatingToolbarButton } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
-export declare const commentButton: (intl: IntlShape, _state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;
+export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;

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/toolbar/assets/commentWithDotIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { GlyphProps } from '@atlaskit/icon/types';
+export declare const CommentWithDotIcon: (props: GlyphProps) => JSX.Element;

package/dist/types-ts4.5/toolbar/comments.d.ts

@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
 import type { Command, ExtractInjectionAPI, FloatingToolbarButton } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
-export declare const commentButton: (intl: IntlShape, _state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;
+export declare const commentButton: (intl: IntlShape, state: EditorState, api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarButton<Command>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.13.5",
+  "version": "1.14.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
     "@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",
@@ -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"
     },