Remove sidebar from focus order when closed from expanded view

CHANGELOG.md

@@ -9,6 +9,7 @@
 - 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 element slideout sidebars were included in the focus order when hidden. ([#15332](https://github.com/craftcms/cms/pull/15332))
 - 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))

src/web/assets/cp/src/js/CpScreenSlideout.js

@@ -39,10 +39,19 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
     ignoreFailedRequest: false,
     fieldsWithErrors: null,
 
+    /**
+     * @returns {boolean} Whether the slideout is wide enough to show the sidebar alongside the content
+     */
     get showExpandedView() {
       return this.$container.width() > 700;
     },
 
+    get sidebarIsOverlapping() {
+      return (
+        this.showingSidebar && this.$sidebar.css('position') === 'absolute'
+      );
+    },
+
     init: function (action, settings) {
       this.action = action;
       this.setSettings(settings, Craft.CpScreenSlideout.defaults);
@@ -347,7 +356,6 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
 
           this.hasSidebar = true;
 
-          // is the slideout wide enough to show it alongside the content?
           if (this.showExpandedView) {
             this.showSidebar();
           } else {
@@ -468,6 +476,12 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
       this.$container.removeClass('showing-sidebar');
       this.$body.removeClass('no-scroll');
 
+      // Do the same thing when there are no transitions
+      if (!this.sidebarIsOverlapping) {
+        this.$sidebar.addClass('hidden');
+        this.$sidebarBtn.focus();
+      }
+
       this.$sidebar
         .off('transitionend.so')
         .css(this._closedSidebarStyles())
@@ -488,7 +502,7 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
     },
 
     hideSidebarIfOverlapping() {
-      if (this.showingSidebar && this.$sidebar.css('position') === 'absolute') {
+      if (this.sidebarIsOverlapping) {
         this.hideSidebar();
         return true;
       } else {