@atlaskit/editor-plugin-media 1.13.5 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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/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/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/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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.13.5",
+  "version": "1.14.0",
   "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"
     },