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]: Accessibility: Duplicate aria-describedby property for multiple comboboxes #9012

Closed abhijeet181088 closed 5 months ago

abhijeet181088 commented 5 months ago

Describe the bug

If there are multiple MultiComboBoxes present on a page, the "aria-describedby" property of the "input" element within that is duplicate with value "ui5-multi-combobox-hiddenText-nMore". This violates the accessibility guidelines.

Code snippet of input box inside MultiCombobox:

<input id="ui5-multi-combobox-input" inner-input="" role="combobox" aria-haspopup="listbox" aria-autocomplete="both" data-sap-focus-ref="" placeholder="" value-state="None" aria-expanded="false" **aria-describedby="ui5-multi-combobox-hiddenText-nMore"** aria-required="false" aria-label="Line of Business:">

Isolated Example

https://stackblitz.com/edit/github-pngbdn?file=src%2FApp.tsx

Reproduction steps

  1. Create multiple MultiComboBoxes on a page.
  2. Inspect the "input" element within both MultiComboBoxes
  3. They have same aria-describedby property as "ui5-multi-combobox-hiddenText-nMore". ...

Expected Behaviour

aria-describedby property should be unique for different components.

Screenshots or Videos

AriaDescribedBy

UI5 Web Components for React Version

1.28.1

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

macOS

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 5 months ago

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

Todor-ads commented 5 months ago

Hello @SAP/ui5-webcomponents-topic-rl , Could you please look into this issue? The problem reproduces following the described steps.

Regards, Todor

niyap commented 5 months ago

Hello @abhijeet181088,

There is no violations of the accessibility guidelines as that HTML element is part of the shadow DOM of the component. There is no problem to have elements with similar id, when they are part of different shadow DOM. Even the HTML input element which is part of the ui5-multi-combobox component has the same id for each instance of the component "ui5-multi-combobox-input"

Kind Regards, Niya