fix(theme): only render secondaryMenu if it should be shown

[hidde]

fixes #10704

Issue was that with keyboard, you could reach the primary menu, while it was made invisible by CSS. By not rendering secondaryMenu based on the secondaryMenuShown logic, , we make sure it isn't accessible by keyboard while it is hidden.

Pre-flight checklist

• 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.
  • Note from author: I did not find existing tests for the behaviour and did not add new ones. We are dogfooding this change on nldesignsystem.nl (source).
• 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

Test Plan

Test links

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

Related issues/PRs

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	Report
/	🟠 63	🟢 98	🟢 96	🟢 100	Report
/docs/installation	🔴 48	🟢 97	🟢 100	🟢 100	Report
/docs/category/getting-started	🟠 73	🟢 100	🟢 100	🟠 86	Report
/blog	🟠 68	🟢 96	🟢 100	🟠 86	Report
/blog/preparing-your-site-for-docusaurus-v3	🔴 45	🟢 92	🟢 100	🟢 100	Report
/blog/tags/release	🟠 62	🟢 96	🟢 100	🟠 86	Report
/blog/tags	🟠 74	🟢 100	🟢 100	🟠 86	Report

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	38ea9ae
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/67c084d48554d000095d598f
😎 Deploy Preview	https://deploy-preview-10705--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.

[slorber]

Unfortunately your solution breaks the animated transition we have between drawer panes, notably when pressing the back button

Instead I'm proposing to use HTML inert that looks like a better option for this use case: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.

There are probably many other places we should use this attribute now that it's widely supported.

[hidde]

Thanks for checking and fixing!Note, that in your solution, only the menu is inerted, and not ‘everything but the dialog’ as the dialog with showModal would have done.Anyway, this improves it a bunch already, thank you!On 27 Feb 2025, at 16:31, Sébastien Lorber ***@***.***> wrote: Unfortunately your solution breaks the animated transition we have between drawer panes, notably when pressing the back button CleanShot.2025-02-27.at.15.58.43.png (view on web) Instead I'm proposing to use HTML inert that looks like a better option for this use case: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***> slorber left a comment (facebook/docusaurus#10705) Unfortunately your solution breaks the animated transition we have between drawer panes, notably when pressing the back button CleanShot.2025-02-27.at.15.58.43.png (view on web) Instead I'm proposing to use HTML inert that looks like a better option for this use case: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[slorber]

Thanks for checking and fixing!Note, that in your solution, only the menu is inerted, and not ‘everything but the dialog’ as the dialog with showModal would have done

Yes, but there's a separate PR for that you opened here :)

#10706

I'm open to merging it too if it doesn't break our existing UX

[hidde]

thank you, will give that a go in #10706