search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

ui5-dialog links are read twice by screen reader #5624

Closed kwxue closed 2 years ago

kwxue commented 2 years ago

Please refer to closed issue https://github.com/SAP/ui5-webcomponents/issues/5608 for the bug description, expected behavior, steps to reproduce, and isolated example.

Would it be possible to prevent the repetition behavior from occurring without needing to set role=application?

When testing with NVDA, changing role=dialog to role=application will result in NVDA announcing the dialog as application instead of dialog and prevents aria-modal from being set. The W3 modal dialog example https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog also doesn't seem to have a role=application for the dialog or a higher level element.

Thanks!

Context

Priority

Stakeholder Info (if applicable)

MapTo0 commented 2 years ago

Hello @kwxue

I closed the old issue as I just compared the playground and your example and that was the only difference. Sorry about that.

The issue is not reproducible with JAWS. Furthermore, I could not see any issue within our coding based on the aria best practices.

@SAP/ui5-webcomponents-topic-rd could you please and confirm with your ACC expert that the issue is probably in the NVDA itself, not in our implementation.

Regards, Martin

kwxue commented 2 years ago

Hi @MapTo0,

Could you provide clarification on why role=application is necessary for ui5-dialog to not have the screenreader repetition?

My ACC expert responded that WCAG suggests using the application role with caution https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role#accessibility_concerns. Also, the WCAG example dialog https://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html works properly with JAWS and NVDA without needing role=application. Is there an implementation difference between ui5-dialog and WCAG dialog which results in ui5-dialog needing role=application?

JAWS does not appear to say "application". But my ACC expert has brought up that with "role = application", the modal dialog announcement may be missing since that comes from role = "dialog". In addition the aria-modal=true https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal can only be set on a role=dialog element.

Thank you,

Kyle

MapTo0 commented 2 years ago

Hey @kwxue

I've got you wrong in our initial issue, I am not claiming to have that role set to the dialog. I just noticed that this is the difference between your example and the playground which you have pointed to behave correctly. Looks like role="application" is not the way to go, that is why I forwarded to responsible team of the Dialog to double check implementation and provide a statement.

Correct me if I am wrong but your issue is not present when reading the dialog's content using JAWS?

Best regards, Martin

kwxue commented 2 years ago

Hi @MapTo0,

Upon testing again, this appears to actually have been an issue with the version of JAWS that was being used. Seems that JAWS 2022 and 2021 have an issue that JAWS 2020 doesn't. Yes, the repetition error does not occur when JAWS2020 is used.

Thank you for checking in about that once again Martin!

Thank you, Kyle Xue