A11Y improvements for DropdownNavbarItemDesktop

[srapilly]

Pre-flight checklist

• [X] I have read the Contributing Guidelines on pull requests.
• [ ] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• [ ] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

The goal of this PR is to improve the usability of the dropdown buttons, for example, the version dropdown:

Improvements

• I used a button instead of a link with an ARIA Role, a button should be usable with the SPACE and ENTER key, it was only working with the ENTER key.

https://www.w3.org/TR/using-aria/#rule1

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

• Escape key to close the dropdown

• I removed aria-haspopup: true: When using this ARIA attributes, the dropdown should match the menu role

A popup element usually appears as a block of content that is on top of other content. Authors MUST ensure that the role of the element that serves as the container for the popup content is menu, listbox, tree, grid, or dialog, and that the value of aria-haspopup matches the role of the popup container.

See also https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html

• I made sure the onClick expands and collapses the dropdown (For this issue https://github.com/facebook/docusaurus/issues/8478#issuecomment-1763440131)

Test Plan

On https://deploy-preview-9439--docusaurus-2.netlify.app/

Keyboard:

• should open with SPACE or ENTER
• should close with ESCAPE

Hover

• should work with JS disabled
• should work with JS enabled
• a click on the trigger should expand / close the dropdown

Test links

Deploy preview: https://deploy-preview-9439--docusaurus-2.netlify.app/

Related issues/PRs

https://github.com/facebook/docusaurus/issues/8478

[netlify[bot]]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9861b32edae53693e53467b21af59896d115b7b8
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6536d24f886be50008809c68
😎 Deploy Preview	https://deploy-preview-9439--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 configuration.

[github-actions[bot]]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 51	🟢 97	🟢 92	🟢 100	🟠 89	Report
/docs/installation/	🟠 73	🟢 98	🟢 92	🟢 100	🟠 89	Report
/docs/category/getting-started/	🟠 83	🟢 100	🟢 92	🟢 90	🟠 89	Report
/blog/	🟠 76	🟢 100	🟢 92	🟢 90	🟠 89	Report
/blog/preparing-your-site-for-docusaurus-v3/	🟠 71	🟢 97	🟢 92	🟢 100	🟠 89	Report
/blog/tags/release/	🟠 75	🟢 100	🟢 92	🟠 80	🟠 89	Report
/blog/tags/	🟠 81	🟢 100	🟢 92	🟢 90	🟠 89	Report

[srapilly]

Hi @Josh-Cena @slorber Still a draft, what do you think of the changes?

I could also make a smaller PR, that would still fix the issue (https://github.com/facebook/docusaurus/issues/8478). We could keep the link role=button, I think it would be better to use a button, but it has some styling impact.

[slorber]

Hey

Thanks for your work on this Now is not a good time for me to review 😅 I just had a baby We'll review this when possible but can't promise it will be soon