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.51k stars 262 forks source link

[ui5-select]: Required ARIA attributes not present: aria-expanded, aria-controls #8626

Closed ee92 closed 5 months ago

ee92 commented 5 months ago

Bug Description

AXE detected issue on the ui5-select: image

Affected Component

ui5-select

Expected Behaviour

aria-expanded and aria-controls attributes are required for role combobox

Isolated Example

https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-select--select-overview

Steps to Reproduce

  1. run Axe DevTools on the playground page and you will see the same issue from the screenshot

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

1.23.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SuccessFactors

Declaration

dobrinyonkov commented 5 months ago

Hello @ee92,

This issue was also reported before: https://github.com/SAP/ui5-webcomponents/issues/3827

We are aware of this issue and other issues, related to setting relationships between accessible elements via IDrefs. Setting IDRef relationships are currently not possible due to the nature of the custom elements and their shadow DOM. The issue is present not only for UI5 Web Components, but for every framework creating custom elements and using shadow DOM. This is a gap in the accessibility support and there is a working draft for a new AOM (Accessibility Object Model), which addresses this issue and many more and aim a better, JS based accessibility support for all web element.

You can check the working draft here https://github.com/WICG/aom and the w3c specification here https://wicg.github.io/aom/spec/ (again draft). What is more, you can check out there explainer and see that https://wicg.github.io/aom/demos/#12 Issue 2 references the use case you mentioned and is one of the main issues, which lead to creating the AOM. In future, when this becomes complete and has support for all main browsers, we will have the possibility to adapt the components and make sufficient enhancements in the accessibility support, but until them we do not have any possibility to set there kind of relationships.

What is more, aria-controls does not affect the speech output and there will be no change in the usage of the element with or without the attribute and screen reader users will not be affected.

Note: aria-expanded is set and changed accordingly and I guess that axe is reporting both the attrbiutes as missing even if only one is missing.

Thanks for understanding!

Kind Regards, Dobrin