Skip to content

Modal dialog for menu on small viewports #9457

Open
@srapilly

Description

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

On a small viewport (for example zoom on a desktop) or on mobile, the menu looks like a modal but for assistive technologies, it doesn't work like one.

menu-docusaurus.webm

Tested with Safari and VoiceOver on desktop (It's the same on a mobile screen reader)

We can also see 2 other issues:

Reproducible demo

No response

Steps to reproduce

  1. https://docusaurus.io/
  2. zoom in or reduce the viewport to show the mobile version
  3. Open the menu

Expected behavior

The menu should work like a modal dialog:

  • Keyboard focus should move inside the dialog when it opens
  • Keyboard focus should move back to the trigger when it's closed
  • Elements outside the dialog should not be exposed to the accessibility tree

To improve that, using the native HTML dialog with a showModal is a good solution. If the native element is not adequate, a small library like a11y-dialog could help

Actual behavior

The menu does not work like a modal dialog:

  • it's not exposed as a dialog to the accessibility tree (can be visualized in chrome devtools)
  • Elements outside the dialog are not focusable
  • Keyboard focus do not move back to the trigger when it's closed
  • Elements outside the dialog are exposed to the accessibility tree

Your environment

Self-service

  • I'd be willing to fix this bug myself.

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its executiondomain: a11yRelated to accessibility concerns of the default theme

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions