@atlaskit/editor-plugin-media 1.17.1 → 1.17.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 1.17.2
+
+### Patch Changes
+
+-   [#89395](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89395)
+    [`d8ff819d271c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d8ff819d271c) -
+    [ux] ECA11Y-200 Make editor video seeker accessible for keyboard users
+
 ## 1.17.1
 
 ### Patch Changes

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

@@ -899,12 +899,16 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
                 var targetsAndButtons = {
                   button: a11yDefaultKeys,
                   range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
-                  text: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc'])
+                  combobox: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc']),
+                  slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
                 };
+                var targetRole = event.target.role;
                 var targetType = event.target.type;
-                // only if targeting button or range/text input
-                if (targetType && targetType in targetsAndButtons) {
-                  var targetRelatedA11YKeys = targetsAndButtons[targetType];
+                var allowedTargets = targetRole || targetType;
+
+                // only if targeting interactive elements fe. button, slider, range, dropdown
+                if (allowedTargets && allowedTargets in targetsAndButtons) {
+                  var targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
                   var allowedKeys = new Set(targetRelatedA11YKeys);
                   if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
                     // allow event to bubble to be handled by react handlers

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

@@ -788,12 +788,16 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
                 const targetsAndButtons = {
                   button: a11yDefaultKeys,
                   range: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'],
-                  text: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'Esc']
+                  combobox: [...a11yDefaultKeys, 'ArrowDown', 'ArrowUp', 'Esc'],
+                  slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
                 };
+                const targetRole = event.target.role;
                 const targetType = event.target.type;
-                // only if targeting button or range/text input
-                if (targetType && targetType in targetsAndButtons) {
-                  let targetRelatedA11YKeys = targetsAndButtons[targetType];
+                const allowedTargets = targetRole || targetType;
+
+                // only if targeting interactive elements fe. button, slider, range, dropdown
+                if (allowedTargets && allowedTargets in targetsAndButtons) {
+                  let targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
                   const allowedKeys = new Set(targetRelatedA11YKeys);
                   if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
                     // allow event to bubble to be handled by react handlers

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

@@ -884,12 +884,16 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
                 var targetsAndButtons = {
                   button: a11yDefaultKeys,
                   range: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']),
-                  text: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc'])
+                  combobox: [].concat(a11yDefaultKeys, ['ArrowDown', 'ArrowUp', 'Esc']),
+                  slider: ['Tab', 'Shift', 'ArrowLeft', 'ArrowRight']
                 };
+                var targetRole = event.target.role;
                 var targetType = event.target.type;
-                // only if targeting button or range/text input
-                if (targetType && targetType in targetsAndButtons) {
-                  var targetRelatedA11YKeys = targetsAndButtons[targetType];
+                var allowedTargets = targetRole || targetType;
+
+                // only if targeting interactive elements fe. button, slider, range, dropdown
+                if (allowedTargets && allowedTargets in targetsAndButtons) {
+                  var targetRelatedA11YKeys = targetsAndButtons[allowedTargets];
                   var allowedKeys = new Set(targetRelatedA11YKeys);
                   if (allowedKeys.has(event.key) || allowedKeys.has(event.code)) {
                     // allow event to bubble to be handled by react handlers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",