ui5-select: [a11y] the aria-label of ui5-select is overridden by the aria-labelledby attribute

[zhangliangyi]

Describe the bug
When set the aria-labelledby attribute in ui5-select, the screen reader will not output the label defined instead of the text of selected option

To reproduce
Steps to reproduce the behavior:
Considering following case,

<ui5-label id="myLabel3" for="mySelect" required show-colon>Job</ui5-label>
<ui5-select id="mySelect" aria-required="true" aria-labelledby="myLabel3">
	<ui5-option>Manager</ui5-option>
	<ui5-option>Sales</ui5-option>
	<ui5-option selected>Developer</ui5-option>
</ui5-select>

Expected behavior
The label of ui5-select should be output by screen reader

Screenshots
Please refer to the DOM structure in the screenshot

Context

• UI5 Web Components version: 0.23.1
• OS/Platform: MacOs
• Browser (if relevant): Chrome
• Other information: screen reader - NVDA

Affected components (if known)
ui5-select

[ilhan007]

Hello @zhangliangyi

I think both the text of the selected item and the the labelled element would be read by the Screen Reader.
As you can from your image both "Status" and "Not started" are set as aria-label and aria-labbelledby inside the Shadow DOM. Isn't this the case? This is at least what I get with VoceOver + Chrome + MacOS.

Is it ok for you to get both texts read out or you expect to hear the labelled element only?
Because, from ACC point of view I think it is fine both texts to be announced (I will check that with our local ACC experts meanwhile).

BR,
ilhan

[ilhan007]

Hello @elenastoyanovaa

What do you think about the following: if the ui5-select component is labelled by element (<ui5-select aria-labelledby="myLabel3"). Do you think that it is wrong if the screen reader announce the selected item as well (the labelled element "myLabel3" would be read afterwards).

• option a: only the labelled element should be read
• option b: both the selected item text and the labelled element should be read

[zhangliangyi]

@ilhan007
I agree with you that the option b is the right way for this case. But in my local NVDA, only the selected option is output by screen reader when I focus on the select component.
Anyway, I will try it again today to collect more information about it and get back to you asap.

Thanks.

[zhangliangyi]

Here is some documentation about the relationship between aria-label and aria-labelledby.
https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships

Importantly, aria-labelledby overrides all other name sources for an element. So, for example, if an element has both an aria-labelledby and an aria-label, or an aria-labelledby and a native HTML label, the aria-labelledby label always takes precedence.

So maybe this is the cause of my issue.

[ilhan007]

Hello @zhangliangyi thanks for the info, I will prepare a change for that, leaving just one of the attributes.

[jdichev]

Hello, the issue is being worked on.
Internal reference: 4887

[nnaydenow]

Hello @zhangliangyi,

The internal aria-labelledby is removed when the role was changed to combobox, because it provides different accessibility behavior.