Add additional test cases

src/__tests__/focus-zone.test.tsx

@@ -682,3 +682,72 @@ it('Should ignore hidden elements after focus zone is enabled', async () => {
 
   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

@@ -541,7 +541,7 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
         }
       }
 
-      // Similarly, if an element is un-hidden or "enabled", add it to the list of focusable elements
+      // 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) {