Description
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"
ondialog
andalertdialog
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