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

MultiComboBox: a11y issue - Required ARIA attribute not present: aria-controls on opened MultiComboBox #10058

Closed fushizen closed 3 weeks ago

fushizen commented 4 weeks ago

Describe the bug

Using axe devtools (a plugin used by the internal A11y team to check for issues) there is an issue with critical impact for the MultiComboBox when it is in the opened state. The issue detected by the tool is: Required ARIA attribute not present: aria-controls

image

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v1/?path=/story/inputs-multicombobox--default

Reproduction steps

  1. Go to MCB storybook and expand the drop-down selection
  2. Open axe devtools in dev console
  3. Issue is highlighted for the opened MultiComboBox image

Expected Behaviour

Component to not have a11y issues detectable by the tool

Screenshots or Videos

No response

UI5 Web Components for React Version

v1.29.x

UI5 Web Components Version

v1.29.x

Browser

Edge

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

Lukas742 commented 3 weeks ago

Thanks for reporting! I'll forward this issue to the UI5 Web Components for React repo as the affected component is developed there.

Valkanister commented 3 weeks ago

Hello @SAP/ui5-webcomponents-topic-rl, For the MCB the aria-controls property is missing when the suggestions are expanded.

Kind regards, 

GV

ivoplashkov commented 3 weeks ago

Hello @fushizen

The issue is already reported: 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 not possible in versions <1.24 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 which was solved with the introduction of the popover API - https://developer.mozilla.org/en-US/docs/Web/API/Popover_API, therefore the issue is not longer reproducible in versions 2.0 and above where the API has been adopted.

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.

Thanks for understanding!

Kind Regards, Ivaylo