disclosure navigation menu

[stefanprobst]

the aria authoring practices guide recommends using the "disclosure" pattern (not the "menu" pattern) for site navigation - see disclosure navigation menu example.

now that a disclosure component has been added to react aria components (and this issue has been closed), it would be very helpful to have a canonical example in the docs (or here in github discussions) how to build this with rac.

compared to the disclosure/accordion example in the docs, a disclosure navigation menu

• displays the disclosure panel in an overlay
• closes the disclosure panel when pressing the escape key, when clicking outside, or on blur (i.e. tabbing out)
• closes the disclosure panel when a link in the panel is clicked
• moves focus to the overlay panel when opened (?) (i guess this is only important when rendered into a portal? the aria practices guide example keeps focus on the trigger button, but they don't render into a portal so can rely on dom tab order i think)
• does not wrap the trigger element in a heading
• optionally adds arrow key and home/end key navigation (probably not super important)

if disclosure were integrated with popover (similarly to how dialog, menu, select do it), that would already do most of these points i think - but the following does not work currently:

<Disclosure>
  <Button slot="trigger">About</Button>
  <Popover>
    <DisclosurePanel>
      <ul>
        <li>
          <Link href="/">About the sun</Link>
        </li>
        <li>
          <Link href="/">About the moon</Link>
        </li>
        <li>
          <Link href="/">About the stars</Link>
        </li>
      </ul>
    </DisclosurePanel>
  </Popover>
</Disclosure>

---

what i tried:

my attempt with hooks: https://stackblitz.com/edit/vitejs-vite-12gdwn?file=src%2FApp.tsx&terminal=dev - problem is that focus does not move into the overlay.

second attempt, without <Overlay> portal: https://stackblitz.com/edit/vitejs-vite-dvykb9?file=src%2FApp.tsx&terminal=dev
third attempt, also without portal: https://stackblitz.com/edit/vitejs-vite-dhvx7h?file=src%2FApp.tsx&terminal=dev

---

how do you currently recommend building a "disclosure navigation menu" with rac? thanks!

[LFDanLu]

@reidbarber did we discuss this use case when working on the disclosure stuff recently? I seem to remember the team being a bit confused about why exactly the disclosure pattern was being used for a menu like case in the w3 aria patterns examples.

[steveoh]

Let me know if I'm wrong, but what I think I'm hearing is that there is some work being done that in the future I can take advantage of for a navigation style menu.

[stefanprobst]

my question was specifically about the disclosure navigation menu pattern, which the ARIA Authoring Practices Guide recommends over using menus for site navigation. however, it is not obvious (to me) how to compose Disclosure with Popover to achieve that. or is the team's opinion that using menus for site navigation is totally fine and the APG comments don't really apply?

[snowystinger]

Yes, the team's opinion is that it's fine to use a menu for site navigation.
The only thing that pattern says is that the menu role widgets essentially have too much functionality. Which won't provide a degraded experience.

I believe the reason for all of these call outs is that you can make a site nav without really anything other than HTML, and if you don't have lots of time to invest in testing/research, then this is a great way to go.

One thing to keep in mind, the ARIA patterns are suggestions, they are not rules or spec.

We may eventually expand Disclosures to work with Popover, but it's not a high priority for us right now. There is some work on ToolBar going on, which may reduce that priority further. We can revisit after it's concluded.
Ticket that is associated with that work (name is misleading, it's mostly work in RAC) RSP Component Milestones (view)

[stefanprobst]

this is being discussed at OpenUI as well now: openui/open-ui#1193

[snowystinger]

Thanks, will watch that space.