Skip to content

DialogV2 should have aria-modal="true" #2814

Description

@iansan5653

Description

The DialogV2 component enables a focus trap and background overlay by default. This makes it a modal dialog by definition:

A section of content is "modal" means navigation is limited to the area itself and the background (the ancestors and siblings of the modal) is hidden. Setting aria-modal="true" on dialog and alertdialog role containers indicates the presence of a "modal" element to users of assistive technology

By default, items with role="dialog" have aria-modal="false", indicating to screen readers that navigation outside the dialog is possible. But it is not, so this is misleading and can get screen readers into a state where interaction appears possible but is not.

Explicitly setting the aria-modal="true" prop on the Dialog component does not work as a workaround because that prop is not forwarded to the underlying element.

Steps to reproduce

Render a Dialog component from @primer/react/drafts

Version

v35.17.0

Browser

Chrome

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions