The dialog must be properly labeled

[afercia]

Hello, first of all thanks very much for the excellent work done so far, especially the focus manager.

I'd recommend to consider that one very important thing for accessibility is currently missing, and it's a proper label on the dialog main <div> element. It's especially important now, with the introduction of the dialog role in #223.

Please consider implementations across screen readers differ, not all of them behave the same way. For example, testing with VoiceOver on Safari (Mac), it automatically reads out the main heading in the content as soon as the modal opens (at least for me).

By the way, testing with NVDA on Firefox (Windows) nothing is announced as the modal opens. That's understandable since the main div gets the focus and there's really nothing that can be announced there. Worth nothing this is the most standard behaviour, while VoiceOver has a different interaction model compared with other screen readers.

There are two possible, well known, best practices: use aria-labelledby or aria-label. By the way, I guess the real issue is that there's no guarantee authors will actually use a "title" in their content.

I'd suggest to consider to make the title required and than use that as target for aria-labelledby.
Maybe, the title could be optionally hidden and then used just for the aria-label attribute. For sure there are some things to carefully consider, but labelling the dialog is really important since with some screen readers there is just silence when the modal opens.

Some references:

https://www.w3.org/TR/wai-aria/roles#dialog

Authors SHOULD provide a dialog label.

https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal

The dialog box title is provided by either the aria-label or the aria-labelledby property.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role

The dialog must be properly labeled

Advanced ARIA Tip #2: Accessible modal dialogs
https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

[serraventura]

Hi guys,

I'm just wondering if this modal is supposed to be used with more complex content than just text.

I'm using a list <li>, buttons etc and the accessibility does not work. After checking different examples in how to implement an accessible modal, it seems that the component is not supporting some of the aria attributes to enable it.

Here is one example:

<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
   <h1 id="alertHeading">Warning! Street Address Mismatch!</h1>
   <div id="alertText" tabindex="0" role="document">
      <p>The street address you entered does not match the Postal Code Data.</p>
      <p>Is this the correct format: 12345 Main St. Blvd.?</p>
   </div>
   <button id="yes">Yes, Format Is Correct</button><button>No, Edit Street Address</button>
</div>

from here: http://pauljadam.com/demos/detail-message-dialog.html

This HTML works fine with accessibility.

If I try to use any of the aria-* attributes on the component it's removed. Is there any reason for that or it's to be fixed?

Thanks and congrats for the component :)

[diasbruno]

@serraventura Hi, I think you can check PR #230. I believe we should forward properties (so at least filter data-* and aria-* and apply them) to the real component.

[serraventura]

Hi @diasbruno,

Thanks for the quick reply. The PR #230 seems to be merged already. So, should I be able to use it in the latest version ?

Muito obrigado! :p

[diasbruno]

@serraventura Not really. Actually #243 was merged. :)

We need to have a look on the properties that can be forwarded to the modal such as key events and click, see #327.

For now, I can't give you when we will get these, but hopefully soon.

[serraventura]

@diasbruno do you mind if I help you with that?
If you let me know what's missing to get it merged I could help you with a PR.

Maybe I'm missing something but #327 seems to be done and #230 has conflicts to be resolved.

Just let me know.