Fixes a bug where focusable elements in inactive elements remain in the focus order

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Release Notes for Craft CMS 5
 
+## Unreleased
+- Fixes a bug in element index views where focusable elements in disabled elements remained in the focus order. ([#17053](https://github.com/craftcms/cms/pull/17053))
+
 ## 5.6.16 - 2025-04-08
 
 - Fixed a bug where `craft\services\Assets::EVENT_BEFORE_REPLACE_ASSET` and `EVENT_BEFORE_REPLACE_ASSET` events weren’t getting triggered when replacing an asset file via GraphQL. ([#17005](https://github.com/craftcms/cms/issues/17005))

src/web/assets/cp/src/js/BaseElementIndexView.js

@@ -69,14 +69,26 @@ Craft.BaseElementIndexView = Garnish.Base.extend(
           }
         );
 
+        this.updateInitialViewForSelectedElements($elements);
+
         this._handleEnableElements = (ev) => {
           this.elementSelect.addItems(
             this.filterSelectableElements($(ev.elements))
           );
+
+          for (let i = 0; i < $(ev.elements).length; i++) {
+            const $element = $(ev.elements).eq(i);
+            this.enableWidgets($element);
+          }
         };
 
         this._handleDisableElements = (ev) => {
           this.elementSelect.removeItems(ev.elements);
+
+          for (let i = 0; i < $(ev.elements).length; i++) {
+            const $element = $(ev.elements).eq(i);
+            this.disableWidgets($element);
+          }
         };
 
         this.elementIndex.on('enableElements', this._handleEnableElements);
@@ -145,30 +157,80 @@ Craft.BaseElementIndexView = Garnish.Base.extend(
       }
     },
 
-    filterSelectableElements: function ($elements) {
-      const selectable = [];
-
+    /**
+     * Updates the initial view for selected elements
+     * @param $elements
+     */
+    updateInitialViewForSelectedElements: function ($elements) {
       for (let i = 0; i < $elements.length; i++) {
         const $element = $elements.eq(i);
         if ($element.hasClass('disabled')) {
-          // remove checkbox from tab order and mark as checked
-          $element.find('.checkbox').attr({
-            tabindex: '-1',
+          // mark as checked
+          this.getElementCheckbox($element).attr({
             'aria-checked': 'true',
           });
+
+          // remove checkbox other widgets from tab order
+          this.disableWidgets($element);
           continue;
         }
+
+        if (!this.canSelectElement($element)) {
+          $element.find('.checkbox').remove();
+        }
+      }
+    },
+
+    /**
+     * Returns selectable elements
+     * @param $elements Elements to filter
+     * @returns {jQuery} A jQuery object containing the selectable elements
+     */
+    filterSelectableElements: function ($elements) {
+      const selectable = [];
+
+      for (let i = 0; i < $elements.length; i++) {
+        const $element = $elements.eq(i);
+
         if (this.canSelectElement($element)) {
           selectable.push($element[0]);
-        } else {
-          // make sure it doesn't have a checkbox
-          $element.find('.checkbox').remove();
         }
       }
 
       return $(selectable);
     },
 
+    /**
+     * Removes all interactive widgets inside the element from the focus order
+     * @param $element
+     */
+    disableWidgets: function ($element) {
+      const disabledAttributes = {
+        tabindex: '-1',
+        'data-widget': true,
+      };
+      // Disable all focusable elements inside the disabled elements
+      const $focusable = Garnish.getKeyboardFocusableElements($element);
+
+      if ($focusable.length) {
+        $focusable.attr(disabledAttributes);
+      }
+      this.getElementCheckbox($element).attr(disabledAttributes);
+    },
+
+    /**
+     * Moves all interactive widgets inside the element into the default focus order
+     * @param $element
+     */
+    enableWidgets: function ($element) {
+      const $disabledWidgets = $element.find('[data-widget]');
+
+      if (!$disabledWidgets.length) return;
+
+      $disabledWidgets.removeAttr('tabindex data-widget');
+      this.getElementCheckbox($element).attr('tabindex', '0');
+    },
+
     canSelectElement: function ($element) {
       if (this.settings.canSelectElement) {
         return this.settings.canSelectElement($element);