Merge pull request #263 from primer/tylerjdev/no-focus-if-hidden

Prevent focusing hidden/disabled elements

Author: TylerJDev

.changeset/eighty-steaks-camp.md

@@ -0,0 +1,5 @@
+---
+'@primer/behaviors': minor
+---
+
+Adjusts mutation observer to now track `hidden` and `disabled` attributes being applied or removed.

src/__tests__/focus-zone.test.tsx

@@ -649,3 +649,105 @@ it('Shoud move to tabbable elements if onlyTabbable', async () => {
 
   controller.abort()
 })
+
+it('Should ignore hidden elements after focus zone is enabled', async () => {
+  const user = userEvent.setup()
+  const {container, rerender} = render(
+    <div id="focusZone">
+      <button tabIndex={0}>Apple</button>
+      <button tabIndex={0}>Banana</button>
+      <button tabIndex={0}>Cantaloupe</button>
+    </div>,
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, , thirdButton] = focusZoneContainer.querySelectorAll('button')
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  rerender(
+    <div id="focusZone">
+      <button tabIndex={0}>Apple</button>
+      <button tabIndex={0} hidden>
+        Banana
+      </button>
+      <button tabIndex={0}>Cantaloupe</button>
+    </div>,
+  )
+
+  await user.keyboard('{arrowdown}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  controller.abort()
+})
+
+it('Should respect unhidden elements after focus zone is enabled', async () => {
+  const user = userEvent.setup()
+  const {container, rerender} = render(
+    <div id="focusZone">
+      <button tabIndex={0}>Apple</button>
+      <button tabIndex={0} hidden>
+        Banana
+      </button>
+      <button tabIndex={0}>Cantaloupe</button>
+    </div>,
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button')
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  await user.keyboard('{arrowdown}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  rerender(
+    <div id="focusZone">
+      <button tabIndex={0}>Apple</button>
+      <button tabIndex={0}>Banana</button>
+      <button tabIndex={0}>Cantaloupe</button>
+    </div>,
+  )
+
+  await user.keyboard('{arrowup}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  controller.abort()
+})
+
+it('Should ignore disabled elements after focus zone is enabled', async () => {
+  const user = userEvent.setup()
+  const {container, rerender} = render(
+    <div id="focusZone">
+      <button tabIndex={0}>Apple</button>
+      <button tabIndex={0}>Banana</button>
+      <button tabIndex={0}>Cantaloupe</button>
+    </div>,
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, , thirdButton] = focusZoneContainer.querySelectorAll('button')
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  rerender(
+    <div id="focusZone">
+      <button tabIndex={0}>Apple</button>
+      <button tabIndex={0} disabled>
+        Banana
+      </button>
+      <button tabIndex={0}>Cantaloupe</button>
+    </div>,
+  )
+
+  await user.keyboard('{arrowdown}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  controller.abort()
+})

src/focus-zone.ts

@@ -527,19 +527,35 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
           endFocusManagement(...iterateFocusableElements(removedNode, iterateFocusableElementsOptions))
         }
       }
+      // If an element is hidden or disabled, remove it from the list of focusable elements
+      if (mutation.type === 'attributes' && mutation.oldValue === null) {
+        if (mutation.target instanceof HTMLElement) {
+          endFocusManagement(mutation.target)
+        }
+      }
     }
     for (const mutation of mutations) {
       for (const addedNode of mutation.addedNodes) {
         if (addedNode instanceof HTMLElement) {
           beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions))
         }
       }
+
+      // Similarly, if an element is unhidden or "enabled", add it to the list of focusable elements
+      // If `mutation.oldValue` is not null, then we may assume that the element was previously hidden or disabled
+      if (mutation.type === 'attributes' && mutation.oldValue !== null) {
+        if (mutation.target instanceof HTMLElement) {
+          beginFocusManagement(mutation.target)
+        }
+      }
     }
   })
 
   observer.observe(container, {
     subtree: true,
     childList: true,
+    attributeFilter: ['hidden', 'disabled'],
+    attributeOldValue: true,
   })
 
   const controller = new AbortController()