aria-modal attribute set on wrong element?

[kosmiq]

Hey all,

I've been looking into an issue raised over at react-bootstrap. We have an issue stating that the attribute aria-modal="true" is added to the wrong element.

So I started looking into it on our end and realized we are doing it the same way as you are, adding it to the background element with the "modal" class.

Our issue raiser linked the following spec: https://amp.levelaccess.net/public/standards/view_best_practice.php?violation_id=1893 and then I looked into the w3 spec here: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

Looking at the latter, and opening the example modal there the backdrop does not get either an role="dialog" attribute or aria-modal="true".

So here's how Bootstrap and react-bootstrap does it:

The backdrop styles element gets the aria attribute and role="dialog"
The example on w3 looks like this though:

Note that it is the dialog/modal itself that gets the attributes.

I found the following PR that added the attributes in 4.2.0: #27780

However, someone with more insight or experience with the aria and role specs for modals can perhaps shed some light on this? Are we adding the attributes to the wrong elements or has there been any discussions I've been unable to find regarding this?

[patrickhlauke]

is this just based on looking at the markup output, or is this causing any actual incorrect behavior when using assistive technologies?

conceptually, it makes no difference whether you say the whole outer container is the dialog (and set focus to it, and add all the relevant labelling/relationships to that outer container), or whether you do it on the inner container.

[patrickhlauke]

to be crystal, there is no functional difference between (simplifying it)

<div role="dialog" tabindex="-1" aria-modal="true" ...>
  <div>
    ...
  </div>
</div>

and

<div>
  <div role="dialog" tabindex="-1" aria-modal="true" ...>
     ...
  </div>
<div>

[kosmiq]

Thanks for replying @patrickhlauke. Well I haven't managed to find any issues with any a11y checks I've performed (hence the question mark in the title of the issue).

I agree that it should conceptually not be any differences. I wanted to raise the question after we got an issue on our end, and after looking at the w3c example and noticed the difference.

If you think that the current setup follows the spec and shouldn't cause any issues I'm all good :)