Fix bug blocking keyboard users from accessing video controls

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Fixed a bug where users’ Formatting Locale preferences weren’t always being respected.
 - Fixed a bug where address card menus would linger around after an address was deleted.
 - Fixed a bug where the `index-assets` command could produce unexpected output. ([#11194](https://github.com/craftcms/cms/issues/11194)).
+- Fixed a bug where video controls within asset preview modals were inaccessible via the keyboard. ([#11371](https://github.com/craftcms/cms/pull/11371))
 
 ## 4.0.4 - 2022-06-03
 

src/web/assets/cp/src/css/_cp.scss

@@ -53,7 +53,7 @@ body {
   position: absolute;
   margin: 5px;
   left: -10000px;
-  top: auto;
+  top: 0;
   width: 1px;
   height: 1px;
   overflow: hidden;

src/web/assets/cp/src/js/PreviewFileModal.js

@@ -7,6 +7,9 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
   {
     assetId: null,
     $spinner: null,
+    $triggerElement: null,
+    $bumperButtonStart: null,
+    $bumperButtonEnd: null,
     elementSelect: null,
     type: null,
     loaded: null,
@@ -18,6 +21,7 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
      */
     init: function (assetId, elementSelect, settings) {
       settings = $.extend(this.defaultSettings, settings);
+      this.$triggerElement = Garnish.getFocusedElement();
 
       settings.onHide = this._onHide.bind(this);
 
@@ -60,8 +64,21 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
 
         this.$shade.velocity('stop');
         this.$shade.show().css('opacity', 1);
+
+        Garnish.setFocusWithin(this.$container);
       }
 
+      // Add bumper elements to maintain focus trap
+      this.$bumperButtonStart = Craft.ui.createButton({
+        html: Craft.t('app', 'Close Preview'),
+        class: 'skip-link',
+      });
+
+      this.addListener(this.$bumperButtonStart, 'click', () => {
+        this.hide();
+      });
+      this.$bumperButtonEnd = this.$bumperButtonStart.clone(true);
+
       this.loadAsset(assetId, settings.startingWidth, settings.startingHeight);
     },
 
@@ -73,13 +90,21 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
       Craft.PreviewFileModal.openInstance = null;
       if (this.elementSelect) {
         this.elementSelect.focusItem(this.elementSelect.$focusedItem);
+      } else if (this.$triggerElement && this.$triggerElement.length) {
+        this.$triggerElement.trigger('focus');
       }
 
       this.$shade.remove();
 
       return this.destroy();
     },
 
+    _addBumperButtons: function () {
+      this.$container
+        .prepend(this.$bumperButtonStart)
+        .append(this.$bumperButtonEnd);
+    },
+
     /**
      * Disappear immediately forever.
      * @returns {boolean}
@@ -179,11 +204,13 @@ Craft.PreviewFileModal = Garnish.Modal.extend(
             this.$container.append(
               $('<p/>', {text: Craft.t('app', 'No preview available.')})
             );
+            this._addBumperButtons();
             return;
           }
 
           this.$container.removeClass('zilch');
           this.$container.append(response.data.previewHtml);
+          this._addBumperButtons();
           Craft.appendHeadHtml(response.data.headHtml);
           Craft.appendBodyHtml(response.data.bodyHtml);
         })

src/web/assets/cp/src/js/UI.js

@@ -13,7 +13,7 @@ Craft.ui = {
       $btn.addClass(config.class);
     }
     if (config.html) {
-      $btn.html(html);
+      $btn.html(config.html);
     } else if (config.label) {
       $btn.append($('<div class="label"/>').text(config.label));
     } else {

src/web/assets/garnish/src/Garnish.js

@@ -309,29 +309,27 @@ Garnish = $.extend(Garnish, {
    */
   resetModalBackgroundLayerVisibility: function () {
     const highestModalLayer = Garnish.uiLayerManager.highestModalLayer;
+    const hiddenLayerClasses = [
+      Garnish.JS_ARIA_CLASS,
+      Garnish.JS_ARIA_TRUE_CLASS,
+      Garnish.JS_ARIA_FALSE_CLASS,
+    ];
 
     // If there is another modal, make it accessible to AT
     if (highestModalLayer) {
-      highestModalLayer.$container.removeClass([
-        Garnish.JS_ARIA_CLASS,
-        Garnish.JS_ARIA_TRUE_CLASS,
-        Garnish.JS_ARIA_FALSE_CLASS,
-      ]);
-      highestModalLayer.$container.removeAttr('aria-hidden');
+      highestModalLayer.$container
+        .removeClass(hiddenLayerClasses)
+        .removeAttr('aria-hidden');
       return;
     }
 
     // If no more modals in DOM, loop through hidden elements and un-hide them
-    const ariaSelector =
-      '.' +
-      Garnish.JS_ARIA_CLASS +
-      ', .' +
-      Garnish.JS_ARIA_FALSE_CLASS +
-      ', .' +
-      Garnish.JS_ARIA_TRUE_CLASS;
-    const ariaHiddenElements = $(ariaSelector);
-
-    $(ariaHiddenElements).each(function () {
+    const hiddenLayerSelector = hiddenLayerClasses
+      .map((name) => '.' + name)
+      .join(', ');
+    const hiddenElements = $(hiddenLayerSelector);
+
+    $(hiddenElements).each(function () {
       if ($(this).hasClass(Garnish.JS_ARIA_CLASS)) {
         $(this).removeClass(Garnish.JS_ARIA_CLASS);
         $(this).removeAttr('aria-hidden');
@@ -402,25 +400,35 @@ Garnish = $.extend(Garnish, {
         const $focusableElements = $container.find(':focusable');
         const index = $focusableElements.index(ev.target);
 
+        // Exit focus trap if no focusable elements are inside
+        if ($focusableElements.length === 0) return;
+
         if (index === 0 && ev.shiftKey) {
           ev.preventDefault();
           ev.stopPropagation();
-          $focusableElements.last().focus();
+          $focusableElements.last().trigger('focus');
         } else if (index === $focusableElements.length - 1 && !ev.shiftKey) {
           ev.preventDefault();
           ev.stopPropagation();
-          $focusableElements.first().focus();
+          $focusableElements.first().trigger('focus');
         }
       }
     });
   },
 
   /**
-   * Sets focus to the first focusable element within a container.
+   * Sets focus to the first focusable element within a container, or on the container itself.
    * @param {Object} container The container element. Can be either an actual element or a jQuery collection.
    */
   setFocusWithin: function (container) {
-    $(container).find(':focusable:first').focus();
+    const $container = $(container);
+    const $firstFocusable = $(container).find(':focusable:first');
+
+    if ($firstFocusable.length > 0) {
+      $firstFocusable.trigger('focus');
+    } else {
+      $container.attr('tabindex', '-1').trigger('focus');
+    }
   },
 
   getFocusedElement: function () {