Clarity on accessible name of checkboxes in a list

[judith9209]

The code displays a list including checkboxes. The aria-labelledby for all checkboxes point to the same invisible text "__text0" "Item Selection". The accessible names of the checkboxes are not referring to "Maria/Petra".

<span id="__text0" class="sapUiInvisibleText" aria-hidden="true">Item Selection</span>
<ul role="list" aria-labelledby="__list0-header">
  <li id="__item0-__list0-0" role="listitem">
	<div id="__item0-__list0-0-selectMulti" aria-labelledby="__text0" role="checkbox" aria-checked="false">
	<div id="__item0-__list0-0-selectMulti-CbBg">
    <input id="__item0-__list0-0-selectMulti-CB" type="CheckBox">
    </div></div><div>Jones</div><div>Maria</div></div></div>
  </li>
  <li role="listitem">
	<div id="__item0-__list0-1-selectMulti aria-labelledby="__text0" role="checkbox" aria-checked="false" >
	<div id="__item0-__list0-1-selectMulti-CbBg" >
	<input id="__item0-__list0-1-selectMulti-CB" type="CheckBox"></div></div><div id="__item0-__list0-1-content" >
    <div><div >Maier</div><div >Petra</div></div></div>
  </li>
  </ul>

Would you provide information if the code is a hard violation of accessible names usage or another requirement?

Related: SAP/ui5-webcomponents#6861

[JAWS-test]

Looking at the example on the page https://sap.github.io/ui5-webcomponents-react/iframe.html?args=mode:MultiSelect&id=data-display-list--default&viewMode=story, I can see several problems:

The checkboxes are not linked to their visual label, but all have the same accessible name. This is a violation of at least 3 WCAG criteria (SC 1.3.1, 2.5.3 and 2.4.6).

However, I find the misleading nature of the role and operation of the element much more problematic, which in my opinion is a violation of SC 4.1.2 and 2.1.1: The checkboxes do not receive focus with TAB key. Instead, list entries receive the focus, but they are not marked as control elements (but only with role=list, role=listitem). The operation therefore corresponds to a selection list, which must then be marked with role=listbox and role=option and may not contain any checkboxes. See: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

[judith9209]

Thank you so much for taking the time to provide your insights. I am incredibly grateful for your response.

[judith9209]

Regarding "misleading nature of the role and operation of the element much more problematic"
->There is a similar scenario for radio button visually looks like a radio button group but is designed as a list box:
Press button "Show viewSettingsDialog" . The "Ascending/Descending" radio buttons: Once you press the down arrow, you have to press then spacebar to actually select it. What could be a solution?