feat: Focus on first tabbable node when Dialog opens (#1927)

* fix: Prevent screen reader focus on Portal InvisiBox

* feat: Add initial focus target logic

* Refactor getInitialNode function and unit tests

* chore: image-snapshot updates (#1941)

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

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kvrmd <[email protected]>

Author: kvrmd

packages/components-providers/src/FocusTrap/utils.ts

@@ -70,31 +70,58 @@ export const activateFocusTrap = ({
   let lastTabbableNode: FocusableElement = element
   let mostRecentlyFocusedNode: FocusableElement | null = null
 
-  const getInitialFocusNode = () => {
-    let node
+  const getInitialFocusNodeByPriority = () => {
+    // Return the already focused node within element
     if (element.contains(document.activeElement)) {
-      node = document.activeElement as HTMLElement
-    } else {
-      // Look for data-autofocus b/c React strips autofocus from dom
-      // https://github.com/facebook/react/issues/11851
-      const autoFocusElement = element.querySelector(
-        '[data-autofocus="true"]'
-      ) as HTMLElement
-
-      // In the absence of autofocus, the surface will have initial focus
-      const surfaceElement = element.querySelector(
-        '[data-overlay-surface="true"]'
-      ) as HTMLElement
-      node = autoFocusElement || surfaceElement || element
+      return document.activeElement as HTMLElement
+    }
+
+    // Look for data-autofocus b/c React strips autofocus from dom
+    // https://github.com/facebook/react/issues/11851
+    const autoFocusElement = element.querySelector('[data-autofocus="true"]')
+    if (autoFocusElement) {
+      return autoFocusElement
+    }
+
+    // Without autofocus, fallback to a tabbable node by priority, if one exists.
+    const firstInputElement = element.querySelector('input, textarea, select')
+    if (firstInputElement) {
+      return firstInputElement
+    }
+
+    const footerElement = element.querySelector('footer')
+    const firstTabbableFooterElement = footerElement
+      ? tabbable(footerElement)[0]
+      : null
+    if (firstTabbableFooterElement) {
+      return firstTabbableFooterElement
     }
 
+    const firstTabbableElement = tabbable(element)[0]
+    if (firstTabbableElement) {
+      return firstTabbableElement
+    }
+
+    // In the absence of autofocus and any tabbable element, the surface will have initial focus.
+    const surfaceElement = element.querySelector(
+      '[data-overlay-surface="true"]'
+    )
+    if (surfaceElement) {
+      return surfaceElement
+    }
+
+    // default to element
+    return element
+  }
+
+  const getInitialFocusNode = () => {
+    const node = getInitialFocusNodeByPriority()
     if (!node || !isFocusable(node)) {
       throw new Error(
         'Your focus trap needs to have at least one focusable element'
       )
     }
-
-    return node
+    return node as FocusableElement
   }
 
   const updateTabbableNodes = () => {