ensure valid Menu accessibility tree (#228)

Author: RobinMalfait

packages/@headlessui-react/src/components/menu/menu.test.tsx

@@ -383,6 +383,51 @@ describe('Rendering composition', () => {
       items.forEach(item => assertMenuItem(item, { tag: 'button' }))
     })
   )
+
+  it(
+    'should mark all the elements between Menu.Items and Menu.Item with role none',
+    suppressConsoleLogs(async () => {
+      render(
+        <Menu>
+          <Menu.Button>Trigger</Menu.Button>
+          <div className="outer">
+            <Menu.Items>
+              <div className="py-1 inner">
+                <Menu.Item as="button">Item A</Menu.Item>
+                <Menu.Item as="button">Item B</Menu.Item>
+              </div>
+              <div className="py-1 inner">
+                <Menu.Item as="button">Item C</Menu.Item>
+                <Menu.Item>
+                  <div>
+                    <div className="outer">Item D</div>
+                  </div>
+                </Menu.Item>
+              </div>
+              <div className="py-1 inner">
+                <form className="inner">
+                  <Menu.Item as="button">Item E</Menu.Item>
+                </form>
+              </div>
+            </Menu.Items>
+          </div>
+        </Menu>
+      )
+
+      // Open menu
+      await click(getMenuButton())
+
+      expect.hasAssertions()
+
+      document.querySelectorAll('.outer').forEach(element => {
+        expect(element).not.toHaveAttribute('role', 'none')
+      })
+
+      document.querySelectorAll('.inner').forEach(element => {
+        expect(element).toHaveAttribute('role', 'none')
+      })
+    })
+  )
 })
 
 describe('Keyboard interactions', () => {

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -307,6 +307,24 @@ let Items = forwardRefWithAs(function Items<TTag extends ElementType = typeof DE
   let id = `headlessui-menu-items-${useId()}`
   let searchDisposables = useDisposables()
 
+  useIsoMorphicEffect(() => {
+    let container = state.itemsRef.current
+    if (!container) return
+    if (state.menuState !== MenuStates.Open) return
+
+    let walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+      acceptNode(node: HTMLElement) {
+        if (node.getAttribute('role') === 'menuitem') return NodeFilter.FILTER_REJECT
+        if (node.hasAttribute('role')) return NodeFilter.FILTER_SKIP
+        return NodeFilter.FILTER_ACCEPT
+      },
+    })
+
+    while (walker.nextNode()) {
+      ;(walker.currentNode as HTMLElement).setAttribute('role', 'none')
+    }
+  })
+
   let handleKeyDown = useCallback(
     (event: ReactKeyboardEvent<HTMLDivElement>) => {
       searchDisposables.dispose()

packages/@headlessui-vue/src/components/menu/menu.test.tsx

@@ -602,6 +602,53 @@ describe('Rendering composition', () => {
       )
     })
   )
+
+  it(
+    'should mark all the elements between Menu.Items and Menu.Item with role none',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: `
+          <Menu>
+            <MenuButton>Trigger</MenuButton>
+            <div className="outer">
+              <MenuItems>
+                <div className="py-1 inner">
+                  <MenuItem as="button">Item A</MenuItem>
+                  <MenuItem as="button">Item B</MenuItem>
+                </div>
+                <div className="py-1 inner">
+                  <MenuItem as="button">Item C</MenuItem>
+                  <MenuItem>
+                    <div>
+                      <div className="outer">Item D</div>
+                    </div>
+                  </MenuItem>
+                </div>
+                <div className="py-1 inner">
+                  <form className="inner">
+                    <MenuItem as="button">Item E</MenuItem>
+                  </form>
+                </div>
+              </MenuItems>
+            </div>
+          </Menu>
+        `,
+      })
+
+      // Open menu
+      await click(getMenuButton())
+
+      expect.hasAssertions()
+
+      document.querySelectorAll('.outer').forEach(element => {
+        expect(element).not.toHaveAttribute('role', 'none')
+      })
+
+      document.querySelectorAll('.inner').forEach(element => {
+        expect(element).toHaveAttribute('role', 'none')
+      })
+    })
+  )
 })
 
 describe('Keyboard interactions', () => {

packages/@headlessui-vue/src/components/menu/menu.ts

@@ -278,6 +278,24 @@ export let MenuItems = defineComponent({
     let id = `headlessui-menu-items-${useId()}`
     let searchDebounce = ref<ReturnType<typeof setTimeout> | null>(null)
 
+    watchEffect(() => {
+      let container = api.itemsRef.value
+      if (!container) return
+      if (api.menuState.value !== MenuStates.Open) return
+
+      let walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode(node: HTMLElement) {
+          if (node.getAttribute('role') === 'menuitem') return NodeFilter.FILTER_REJECT
+          if (node.hasAttribute('role')) return NodeFilter.FILTER_SKIP
+          return NodeFilter.FILTER_ACCEPT
+        },
+      })
+
+      while (walker.nextNode()) {
+        ;(walker.currentNode as HTMLElement).setAttribute('role', 'none')
+      }
+    })
+
     function handleKeyDown(event: KeyboardEvent) {
       if (searchDebounce.value) clearTimeout(searchDebounce.value)