refactor: improve a11y of dropdown menu

[lex111]

Motivation

Better identification of dropdown menus for screen readers and slightly improvement of UX when navigating from the keyboard on navbar menu items from dropdown items.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Related PRs

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	f5a6366
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/623da8433f11e80008f4cdc3
😎 Deploy Preview	https://deploy-preview-6971--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	52
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-6971--docusaurus-2.netlify.app/

[github-actions]

Size Change: +33 B (0%)

Total Size: 805 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	105 kB	+475 B (0%)
website/build/assets/js/main.********.js	612 kB	-49 B (0%)
website/build/index.html	38.4 kB	-393 B (-1%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	49.9 kB

_{compressed-size-action}

[slorber]

🤷‍♂️ I don't really notice a difference compared to before

feel free to self merge if you think it improves, I'm not a11y skilled enough to be sure

[lex111]

The aria- attributes are for screen readers (it now reads out dropdown as a menu), and the changes in onKeyDown I demonstrated in the GIF above.

[Josh-Cena]

I vaguely remember that dropdowns were purposefully made not able to be tabbed through. Users can quickly tab through the navbar without being trapped in any of the long dropdowns. They can still use Enter to open the dropdown first, and then tab through it. I think we just need to make that more explicit through some aria label.

[slorber]

I vaguely remember that dropdowns were purposefully made not able to be tabbed through.

On the preview, I don't enter the dropdown with tab

I demonstrated in the GIF above.

Can't be sure which keys you press on that Gif 🤷‍♂️ when only using tabs on the preview, I don't see the behavior in this Gif

[lex111]

It's simple: Tab to navigate through any navbar items, Enter to open and close a dropdown menu.

[Josh-Cena]

Ah yeah, misunderstood what this PR does. It would focus the a element for dropdowns instead of the div. There does seem to be a difference with screen readers, but can't tell which is better.

[lex111]

Trouble is now when navigating from last item in a dropdown menu, the focus goes to a next navbar item, but if it is a another dropdown, the focus will not be visible.

[Josh-Cena]

Ah, I see. Makes sense

[slorber]

LGTM 👍