Add shift-tab keyboard support for dialogs (modal & Offcanvas components) (#33865)

* consolidate dialog focus trap logic

* add shift-tab support to focustrap

* remove redundant null check of trap element

Co-authored-by: GeoSot <[email protected]>

* remove area support forom focusableChildren

* fix no expectations warning in focustrap tests

Co-authored-by: GeoSot <[email protected]>
Co-authored-by: XhmikosR <[email protected]>

1 files changed, 17 insertions, 0 deletions

diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js
index 381e45fe8..88f924076 100644
--- a/js/src/dom/selector-engine.js
+++ b/js/src/dom/selector-engine.js
@@ -11,6 +11,8 @@
  * ------------------------------------------------------------------------
  */
 
+import { isDisabled, isVisible } from '../util/index'
+
 const NODE_TEXT = 3
 
 const SelectorEngine = {
@@ -69,6 +71,21 @@ const SelectorEngine = {
     }
 
     return []
+  },
+
+  focusableChildren(element) {
+    const focusables = [
+      'a',
+      'button',
+      'input',
+      'textarea',
+      'select',
+      'details',
+      '[tabindex]',
+      '[contenteditable="true"]'
+    ].map(selector => `${selector}:not([tabindex^="-"])`).join(', ')
+
+    return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
   }
 }