Add nested menu support

Author: ai

focus-group.js

@@ -30,6 +30,19 @@ function getItems(target, group) {
   return group.querySelectorAll(`[role=${target.role}]`)
 }
 
+function filterNested(allItems, group) {
+  return Array.from(allItems).filter(item => {
+    let current = item.parentElement
+    while (current && current !== group) {
+      if (current.getAttribute('aria-hidden') === 'true') {
+        return false
+      }
+      current = current.parentElement
+    }
+    return true
+  })
+}
+
 function getToolbarItems(group) {
   let items = [...group.querySelectorAll('*')]
   return items.filter(item => {
@@ -65,7 +78,8 @@ export function focusGroupKeyUX(options) {
         return
       }
 
-      let items = getItems(event.target, group)
+      let allItems = getItems(event.target, group)
+      let items = filterNested(allItems, group)
       let index = Array.from(items).indexOf(event.target)
 
       let nextKey = 'ArrowDown'
@@ -100,7 +114,7 @@ export function focusGroupKeyUX(options) {
         }
         lastTyped = event.timeStamp
 
-        let found = Array.from(items).find(item => {
+        let found = Array.from(allItems).find(item => {
           return item.textContent
             ?.trim()
             ?.toLowerCase()

package.json

@@ -85,7 +85,7 @@
       "import": {
         "./index.js": "{ startKeyUX, hotkeyKeyUX, pressKeyUX, focusGroupKeyUX, jumpKeyUX, hiddenKeyUX, likelyWithKeyboard, getHotKeyHint, hotkeyOverrides, hotkeyMacCompat }"
       },
-      "limit": "2210 B"
+      "limit": "2268 B"
     }
   ],
   "clean-publish": {

test/focus-group.test.ts

@@ -3,7 +3,12 @@ import { equal } from 'node:assert'
 import { describe, test } from 'node:test'
 import { setTimeout } from 'node:timers/promises'
 
-import { focusGroupKeyUX, hotkeyKeyUX, startKeyUX } from '../index.js'
+import {
+  focusGroupKeyUX,
+  hotkeyKeyUX,
+  jumpKeyUX,
+  startKeyUX
+} from '../index.js'
 import { press } from './utils.js'
 
 describe('focus-group', () => {
@@ -457,4 +462,41 @@ describe('focus-group', () => {
     press(window, 'ArrowRight')
     equal(window.document.activeElement, buttons[0])
   })
+
+  test('supports nested menu', async () => {
+    let window = new JSDOM().window
+    startKeyUX(window, [focusGroupKeyUX(), jumpKeyUX()])
+
+    window.document.body.innerHTML =
+      '<nav role="menu">' +
+      '<button role="menuitem" aria-controls="nested">1</button>' +
+      '<div role="menu" id="nested" aria-hidden="true">' +
+      '<button role="menuitem">1.1</button>' +
+      '<button role="menuitem">1.2</button>' +
+      '</div>' +
+      '<button role="menuitem">2</button>' +
+      '</nav>'
+    let items = window.document.querySelectorAll('button')
+    items[0].focus()
+    equal(window.document.activeElement?.textContent, '1')
+
+    press(window, 'ArrowDown')
+    equal(window.document.activeElement?.textContent, '2')
+
+    press(window, 'ArrowUp')
+    equal(window.document.activeElement?.textContent, '1')
+
+    press(window, 'Enter')
+    await setTimeout(100)
+    equal(window.document.activeElement?.textContent, '1.1')
+
+    press(window, 'ArrowDown')
+    equal(window.document.activeElement?.textContent, '1.2')
+
+    press(window, 'ArrowDown')
+    equal(window.document.activeElement?.textContent, '1.1')
+
+    press(window, 'Escape')
+    equal(window.document.activeElement?.textContent, '1')
+  })
 })