[confirm-dialog] Some ATs do not announce the dialog's message

[vursen]

What is the problem?

As demonstrated in #4365 (comment), when opening a confirm-dialog, some ATs don't announce its message probably because the message container is not specifically associated with the dialog role at the moment.

Problematic combinations

• iOS + VoiceOver (Chrome / Safari)
• MacOS + VoiceOver (Safari)
• Windows + NVDA (Chrome / Edge)

[rolfsmeds]

Related: #164

[rolfsmeds]

Planned solution:

• Associate message part as the dialog's description using aria-describedby
• Change the role to alertdialog ([confirm-dialog] Consider usage of alertdialog for confirm-dialog #4975)

[DiegoCardoso]

I have tested changing the role to alertdialog and setting aria-describedby to point to the message area to the confirm dialog demo under the dev folder:

These changes produce the following behavior in these Browser + AT combinations:

Chrome + JAWS:

Unsaved changes   dialog
Do you want to save or discard the changes?  Save   Button
To activate press Enter.

Edge + JAWS:

Alert!  
Unsaved changes

Although the Speech History shows it reads the description, but JAWS doesn't announce it

Unsaved changes   dialog
Do you want to save or discard the changes?
Save   Button
To activate press Enter.  
Alert!  
Unsaved changes

Edge/Chrome + NVDA

Unsaved changes  dialog  Do you want to save or discard the changes?
tool bar
Save  button

Safari + VO

Save, button, Unsaved changes, web alert dialogue, Do you want to save or discard the changes?

Chrome + VO

Chrome goes bananas and announces everything twice.

Save, button, group, Unsaved changes Do you want to save or discard the changes?,group
Unsaved changes Unsaved changes Do you want to save or discard the changes? 
Cancel Cancel Discard Discard Save Save

Edge + VO

Edge goes even more crazy than Chrome

Save, button, group, Unsaved changes Do you want to save or discard the changes?,group, 
Do you want to save or discard the changes?
Unsaved changes Unsaved changes Do you want to save or discard the changes? 
Cancel Cancel Discard Discard Save Save

[rolfsmeds]

I think we can ignore VO combined with browsers other than Safari – it's almost always a mess, and I think we can safely assume that anyone relying on VO will be using Safari to avoid that mess.

NVDA and JAWS seem good to me. Weird that Edge+JAWS doesn't actually announce the describedby, but as it's clearly picking up on it, I guess it's just configured to be less verbose and not announce descriptions or something.

What's surprising to me is that the VO + Safari announcement is so different compared to how the ARIA APG example of an alertdialog (https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/) is announced (at least for me):

Confirmation Confirmation Are you sure you want to discard all of your notes? 44 words will be deleted. No Yes.

That example is constructed very similarly to our ConfirmDialog:

• Div with role="alertdialog"
• aria-labelledby pointing to title element
• aria-describedby pointing to message element
• Initial focus on one of the buttons.

There main difference there is that the dialog type, title and message are announced before the button, which is pretty clearly better. Not the end of the world if we can't make that happen, but would be good to know why and whether we can do something about it. (Perhaps it's some kind of timing issue with how the focus is set on the button?)

[rolfsmeds]

The main dilemma remaining is what element to associate with aria-describedby:

• The ideal would be the <div part="message"> wrapper, but as it is in Shadow DOM, it probably won't work.
• The content slotted into that wrapper can be anything: a text node, some HTML elements, one more components, etc.
• In the case of a text node, it must be wrapped into an element anyway (and the Flow ConfirmDialog already wraps it in a <div> if you supply a String instead of a Component.)

After some discussion, it was decided to

1. Test if the part="message" element in Shadow DOM would work after all. if so, let's use it, otherwise:
2. Wrap the content (text node, html, or whatever it is) in a <div>, assign a generated id to it, and associate that with aria-describedby (the plaintext case in Flow ConfirmDialog only needs the addition of the id)
3. As this new <div> wrapper may affect scaling/styling of the contents, it would be great if those effects can be minimized by applying display:contents to it, but we need to test that this doesn't break the aria-describedby announcement
4. Introduce an API for overriding this default aria-describedby with another id, for cases where you don't want the entire content to be annnounced (e.g. if it contains interactive elements or other complex semantics)

(In the future, when the platform's browser support requirements allow us to refactor dialogs to be based on the native <dialog> element, this can be simplified as the entire dialog can then be in light DOM.)