a11y: mat-dialog description not read by NVDA in Chrome

[diminutivesloop]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When opening a Mat-Dialog via a screen-reader the specified description should be read in full before reading the dialog content or currently focused control. This happens as expected when using NVDA with the wai-aria modal dialog example.

What is the current behavior?

The dialog description is either not read at all or only read partially before NVDA abruptly switches to reading the auto-focused control.

What are the steps to reproduce?

• mat-dialog-title: https://stackblitz.com/edit/mat-dialog-a11y-description
• MatDialogConfig.ariaDescribedBy: https://stackblitz.com/edit/mat-dialog-a11y-description-ddagpe
• MatDialogConfig.ariaLabel: https://stackblitz.com/edit/mat-dialog-a11y-description-nx3hbh

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material: 5.2.4
Chrome: 65.0.3325.181
NVDA: 2018.1

[diminutivesloop]

Looks like this works correctly if you Disable the following NVDA settings under Preferences > Browse mode...

• Use screen layout (when supported)
• Say All on page load

Still not great that this doesn't work with the default settings especially when the wai-aria modal dialog example works fine regardless.

[crisbeto]

CC @jelbourn since it's a little fuzzy how we should handle it on our end.

[jelbourn]

@diminutivesloop could you clarify which example dialog you're referring to? It looks like the page you linked to has several as part of the example.

[diminutivesloop]

@jelbourn Hmm... I checked the page and I'm not sure what you mean by several dialog examples. The demo I had in mind can be activated by clicking the Add Delivery Address button under the Modal Dialog Example. Does that help clarify?

[jelbourn]

@crisbeto that example dialog is doing the same thing as our's with focus behavior; I think there's something else in play that's causing it to read the dialog's label on open, but I'm not sure what exactly.