Merge pull request #17053 from craftcms/feature/pt-2564-focusable-elements-in-inactive-rows-remain-in-the-focus

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

Author: brandonkelly

CHANGELOG.md

@@ -14,6 +14,7 @@
 - Fixed a bug where custom sources that were hidden for certain user groups weren’t available within element selector modals either. ([#17703](https://github.com/craftcms/cms/issues/17703))
 - Fixed a bug where element queries weren’t returning any results if they had a param that resolved to multiple generated fields. ([#17709](https://github.com/craftcms/cms/issues/17709))
 - Fixed a bug where Link fields weren’t preserving spaces within Phone and SMS link labels. ([#17707](https://github.com/craftcms/cms/issues/17707))
+- Fixed a bug where disabled rows within element selector modals could contain nested focusable elements. ([#17053](https://github.com/craftcms/cms/pull/17053))
 
 ## 5.8.12 - 2025-07-29
 

src/web/assets/cp/dist/cp.js

@@ -70,14 +70,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.enableFocusableElements($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.disableFocusableElements($element);
+          }
         };
 
         this.elementIndex.on('enableElements', this._handleEnableElements);
@@ -146,30 +158,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 other focusable elements from the tab order
+          this.disableFocusableElements($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 focusable elements inside the given container from the focus order
+     * @param $container
+     */
+    disableFocusableElements: function ($container) {
+      const disabledAttributes = {
+        tabindex: '-1',
+        'data-focusable': true,
+      };
+      // Disable all focusable elements inside the disabled elements
+      const $focusable = Garnish.getKeyboardFocusableElements($container);
+
+      if ($focusable.length) {
+        $focusable.attr(disabledAttributes);
+      }
+      this.getElementCheckbox($container).attr(disabledAttributes);
+    },
+
+    /**
+     * Moves all focusable elements inside the given container into the default focus order
+     * @param $container
+     */
+    enableFocusableElements: function ($container) {
+      const $focusableElements = $container.find('[data-focusable]');
+
+      if (!$focusableElements.length) return;
+
+      $focusableElements.removeAttr('tabindex data-focusable');
+      this.getElementCheckbox($container).attr('tabindex', '0');
+    },
+
     canSelectElement: function ($element) {
       if (this.settings.canSelectElement) {
         return this.settings.canSelectElement($element);