Merge branch '4.x' of https://github.com/craftcms/cms into 5.x

# Conflicts: # CHANGELOG.md # src/web/assets/cp/dist/cp.js # src/web/assets/cp/dist/cp.js.map # src/web/assets/garnish/dist/garnish.js # src/web/assets/garnish/dist/garnish.js.map
craftcms · Jul 9, 2024 · 449694f · 449694f
2 parents a5fb309 + 4e4e2e4
commit 449694f
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Craft now sends no-cache headers for any request that calls `craft\web\Request::getCsrfToken()`. ([#15293](https://github.com/craftcms/cms/pull/15293), [#15281](https://github.com/craftcms/cms/pull/15281))
 - Fixed a bug where structures’ Max Levels settings weren’t being enforced when dragging elements with collapsed descendants. ([#15310](https://github.com/craftcms/cms/issues/15310))
 - Fixed a bug where `craft\helpers\ElementHelper::isDraft()`, `isRevision()`, and `isDraftOrRevision()` weren’t returning `true` if a nested draft/revision element was passed in, but the root element was canonical. ([#15303](https://github.com/craftcms/cms/issues/15303))
+- Fixed a bug where focus could be trapped within slideout sidebars. ([#15314](https://github.com/craftcms/cms/issues/15314))
 - Fixed a bug where field status indicators weren’t visible on mobile viewports.
 - Fixed a bug where sorting elements by custom field within element indexes wasn’t always working. ([#15297](https://github.com/craftcms/cms/issues/15297))
 - Fixed a bug where asset bulk element actions were available when folders were selected. ([#15301](https://github.com/craftcms/cms/issues/15301))

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/src/js/CpScreenSlideout.js b/src/web/assets/cp/src/js/CpScreenSlideout.js
@@ -39,6 +39,10 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
     ignoreFailedRequest: false,
     fieldsWithErrors: null,
 
+    get showExpandedView() {
+      return this.$container.width() > 700;
+    },
+
     init: function (action, settings) {
       this.action = action;
       this.setSettings(settings, Craft.CpScreenSlideout.defaults);
@@ -344,7 +348,7 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
           this.hasSidebar = true;
 
           // is the slideout wide enough to show it alongside the content?
-          if (this.$container.width() > 700) {
+          if (this.showExpandedView) {
             this.showSidebar();
           } else {
             this.hideSidebar();
@@ -435,7 +439,9 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
         });
       }
 
-      Craft.trapFocusWithin(this.$sidebar);
+      if (!this.showExpandedView) {
+        Craft.trapFocusWithin(this.$sidebar);
+      }
 
       this.$sidebarBtn.addClass('active').attr({
         'aria-expanded': 'true',
@@ -470,6 +476,8 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
           this.$sidebarBtn.focus();
         });
 
+      Craft.releaseFocusWithin(this.$sidebar);
+
       this.$sidebarBtn.removeClass('active').attr({
         'aria-expanded': 'false',
       });

diff --git a/src/web/assets/cp/src/js/Craft.js b/src/web/assets/cp/src/js/Craft.js
@@ -2625,6 +2625,14 @@ $.extend(Craft, {
     Garnish.trapFocusWithin(container);
   },
 
+  /**
+   * Releases focus within a container.
+   * @param {Object} container
+   */
+  releaseFocusWithin: function (container) {
+    Garnish.releaseFocusWithin(container);
+  },
+
   /**
    * Sets focus to the first focusable element within a container.
    * @param {Object} container

diff --git a/src/web/assets/garnish/dist/garnish.js b/src/web/assets/garnish/dist/garnish.js
diff --git a/src/web/assets/garnish/dist/garnish.js.map b/src/web/assets/garnish/dist/garnish.js.map
diff --git a/src/web/assets/garnish/src/Garnish.js b/src/web/assets/garnish/src/Garnish.js
@@ -463,6 +463,7 @@ Garnish = $.extend(Garnish, {
    */
   trapFocusWithin: function (container) {
     const $container = $(container);
+    this.releaseFocusWithin($container);
     $container.on('keydown.focus-trap', function (ev) {
       if (ev.keyCode === Garnish.TAB_KEY) {
         const $focusableElements = $container.find(':focusable');
@@ -484,6 +485,14 @@ Garnish = $.extend(Garnish, {
     });
   },
 
+  /**
+   * Releases focus within a container.
+   * @param {Object} container
+   */
+  releaseFocusWithin: function (container) {
+    $(container).off('.focus-trap');
+  },
+
   /**
    * 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.