Accessibility of navigation menu

[marcysutton]

Hey there, this is a cool project! I was testing out the examples and you've already done some great stuff for accessibility. I found a couple of things I'll file as separate issues, starting with the navigation menu: it only expands the submenus for mouse users, but also needs to support the keyboard and screen readers.

There are a couple of options for making it work, such as having a parent element be the toggle item or an extra toggle button for each submenu. Users should also be able to skip past inactive submenu links when closed with the TAB key (a gotcha I've seen a lot in the wild). There are some examples from the W3C's Web Accessibility Initiative that might come in handy: https://www.w3.org/WAI/tutorials/menus/flyout/

Here's a screenshot of the mouse hover effect showing submenu items, which should also be reachable and operable from the keyboard:

A nav link currently takes focus from the keyboard and links to a page, which is a nice no-javascript experience but should be enhanced to allow interaction with subitems:

If you have any questions, let me know!

[shadcn]

This definitely needs some work. Thanks for the pointers. I’m going to give this a try.

Thank you so much @marcysutton