docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

fix(theme): mobile drawer sidebar should use native modal dialog and backdrop

Open hidde opened this issue 1 year ago • 4 comments

This uses the <dialog> element with showModal() method, so that we can leverage the browser's built-in ways to make this dialog modal, including keyboard handling (Esc), backdrop and focus trap.

Fixes the issue that it was possible to tab outside the dialog while it was open.

Rmoves the backdrop component, as the <dialog> element comes with a backdrop built-in, that is styled via CSS instead.

fixes https://github.com/facebook/docusaurus/issues/9457

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

Test Plan

Test links

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

Related issues/PRs

hidde avatar Nov 21 '24 11:11 hidde

⚡️ Lighthouse report for the deploy preview of this PR

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

github-actions[bot] avatar Nov 21 '24 11:11 github-actions[bot]

[V2]

Name Link
Latest commit dbca10f29ff8110ec2159772d9fc01ff807ee3ec
Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/67c08b6f3d0b920008493ab9
Deploy Preview https://deploy-preview-10706--docusaurus-2.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

netlify[bot] avatar Nov 21 '24 11:11 netlify[bot]

@slorber : ~I'm not sure how to make that last autolintfix check run, please advise.~ Linted locally so autolintfix no longer needed

hidde avatar Nov 21 '24 12:11 hidde

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - Feb 27, 2025, 4:05 PM

argos-ci[bot] avatar Feb 27 '25 16:02 argos-ci[bot]