2031407 - [a11y] Dialog not programmatically identified as modal

Status: RESOLVED FIXED

(Core :: Disability Access APIs, enhancement)

Description

[Claire Joeckel]

Steps to reproduce:

Impacted Section/Element

Dashboard, Policy management, Organizational units, Organizational unit: A11y Testing, Event reports, Organizational unit: A11y Testing: Policy management, and User: Peter Magyari pages

Steps to Reproduce

On the Dashboard page, open DevTools. Activate any of the "View Event Details" buttons. Inspect the "Event Details" dialog container. On the Policy management and Organizational unit: A11y Testing: Policy management pages, open DevTools. Activate the "Bookmarks" accordion control button. In the resulting disclosure, navigate to the "DisplayBookmarksToolbar Edit policy" button and activate it to open the Edit policy (for Bookmarks > DisplayBookmarksToolbar) dialog. Inspect the dialog container. On the Organizational units page, open DevTools. Activate the "Add organizational unit" button. Inspect the "Create a new organizational unit" dialog container. On the Organizational unit: A11y Testing page, open DevTools. Activate the "Rename" button. Inspect the "Rename organizational unit" dialog container. On the Organizational unit: A11y Testing page, open DevTools. Activate the "Select all members" checkbox. Activate the "Bulk actions" button. Activate the "Move members" button. Inspect the "Move members" dialog container. On the Organizational unit: A11y Testing page, open DevTools. Activate the "Delete" button. Inspect the "Delete organizational unit" dialog container. On the Event reports page, open DevTools. Activate any of the "View Event Details" buttons. Inspect the "Event Details" dialog container. On the User: Peter Magyari page, open DevTools. Activate the "Deactivate user" button. Inspect the "Confirm deactivation" dialog container. On the User: Peter Magyari page, open DevTools. Activate the "Status info" button or the "Status definitions" button. Inspect the "Status definitions" dialog container.

Actual results:

Dialog container lacks the aria-modal attribute.

Expected results:

Dialog container has aria-modal="true".

User Impact

Semantic information diluted.

WCAG 2.2 References

Best practice only. While aria-modal="true" adds semantic information, its absence does not constitute a WCAG failure provided the dialog itself is properly implemented and announced.

Recommendations

Apply aria-modal="true" to the dialog container. This is the clearest, least fragile way to convey "this is modal" to screen readers.

Testing Environment

Any

Assistive Technology Used

Any

Further Reference

• W3C WAI APG: Modal Dialog Example

Severity

4-Recommendation

Comment 1

[Julien Wajsberg [:julienw]]

Given I'm using <dialog> with the showModal native API, does using aria-modal="true" bring something more to the user? Have you seen issues with screen readers?

Thank you

Comment 2

[Julien Wajsberg [:julienw]]

See previous comment

Comment 3

[Julien Wajsberg [:julienw]]

MDN says:

<dialog> elements invoked by the showModal() method implicitly have aria-modal="true"

(source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#accessibility )

This seems to agree:
https://searchfox.org/firefox-main/rev/8332a06d47ce7d66623d807068b3410061cd29d3/dom/base/Document.cpp#15865-15868

Comment 4

[Julien Wajsberg [:julienw]]

Though when I look at the states in the accessibility panel, modal doesn't appear unless I add aria-modal="true". I wonder if that's a bug in Firefox?

Morgan, would you be the right person to look at this?

You can test easily with this example

According to its accessibility dev tool, Chrome seems to add modal: true on this dialog.

Comment 5

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

adding distilled testcase: data:text/html,<button onclick="document.getElementById('dialog1').showModal()">Show HTML dialog with showModal</button><dialog id="dialog1">I am a dialog. Am I modal?</dialog><button onclick="document.getElementById('dialog2').showModal()">Show HTML dialog with aria-modal</button><dialog id="dialog2" aria-modal="true">And I am explicitly modal dialog</dialog>

.showModal() method does not add to Fx A11y tree a modal state for the dialog

Comment 6

[James Teh [:Jamie]]

Yes, this is an accessibility engine bug. This is covered by this part of the HTML AAM spec.

Comment 7

[Julien Wajsberg [:julienw]]

Attachment: Bug 2031407 - Expose the 'modal' attribute of a modal <dialog> to the accessibility tree r=jamie

Comment 8

[Julien Wajsberg [:julienw]]

I had a look whether I could fix that with the help of an LLM, please tell me if that's a disturbance.

Pushed to try: https://treeherder.mozilla.org/jobs?repo=try&landoInstance=lando-prod-2025&landoCommitID=36580
(update: I fixed the reported eslint issue ^)

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/508119c7bfb8
https://hg.mozilla.org/integration/autoland/rev/aebc59b16b42
Expose the 'modal' attribute of a modal <dialog> to the accessibility tree r=Jamie

Comment 10

[amarc]

https://hg.mozilla.org/mozilla-central/rev/aebc59b16b42

Comment 11

[Claire Joeckel]

Resolved.