Skip to content

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

Closed
@iansan5653

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions