[Dialog][Accessibility] NVDA screen reader announces DialogTitle component as "clickable"

[Vikash-Mehta]

We are using the Dialog from React material ui components. We’ve been hit with an accessibility violation because NVDA screen reader detects all the elements inside the DialogTitle component to be clickable and announces them as such. This should not happen as there are no click events bound to the component.

[eps1lon]

This should not happen as there are no click events bound to the component.

There's a click event bound to the parent container but we ignore every click event coming from within the dialog. Even if we explicitly give the container a presentational role NVDA still announces children as clickable.

While I appreciate NVDA patching inaccessible pages with this logic it hurts us in this case. We need this click handler for some features. NVDA should not announce elements as clickable if the parent with the click handler has a presentational role. I'll propose this change to NVDA and see what we can do.

[leoagm]

I'm not sure if that would be the issue. I have been testing the Dialog component (material UI core version 4.9.2) and apart from announce the title as clickable, the user get stuck and can't continue navigating the Dialog without press the enter key. On all times the NVDA announce the title, as it was described on issue #17999

Also, I suggest to reconsider putting the initial focus on the entire Dialog, this way we can be sure that all content it's being read. If this approach is followed, the wrapper of the Dialog should have a role dialog, the element having the initial focus should have a role document. This approach works well not only on NVDA.

If that approach can't be implemented, at least this pattern should be consider: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html