Wrong order of aria-labelledby references in Select

[rolfsmeds]

What is the problem?

Currently the Select is announced using the current value first, followed by the label (note the order of the IDREFs in the aria-labelledby attribute of the select button).

<label slot="label" id="label-vaadin-select-0">Sort by</label>
…
<vaadin-select-value-button … aria-labelledby="value-vaadin-select-3 label-vaadin-select-0" …>
  <vaadin-select-item value="1" selected="" id="value-vaadin-select-3">
    Most recent first
  </vaadin-select-item>
</vaadin-select-value-button>

To make this more logical, we recommend swapping the order of the IDREFs around, so that the select is announced using the label first, followed by the current value.

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[web-padawan]

Currently, ID references aren't sorted, so here's what we have if errorMessage, helperText and tooltip are set:

One option to consider would be sorting ID references alphabetically: error, helper, tooltip.

[rolfsmeds]

Hah, that would coincidentally work.
Perhaps a more stable solution would be to rebuild the aria-labelledby value with a certain format each time it needs updating, regardless of which features are present, e.g. label + value + error + helper + tooltip (not sure about the correct order of the last 3, but the first 2 are the important part anyway)