[ui5-list]: checkbox label name of the list item were not found with JAWS Keystroke in MultiSelect mode

[AlexYanSap]

Bug Description

1. All list items will have a checkbox when using the ui5-list in MultiSelect mode.
2. With JAWS, press CTRL+INSERT+X , to identify the checkboxes
3. Observe that, label name of checkbox were not found
   

Affected Component

ui5-list

Expected Behaviour

Ensure that, JAWS should recognize all the checkbox available in the list upon invoking the JAWS shortcut key 'CTRL+INSERT+X' with the label name.

Isolated Example

https://sap.github.io/ui5-webcomponents/v1/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5TYW1wbGU8L3RpdGxlPlxuPC9oZWFkPlxuXG48Ym9keSBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6IHZhcigtLXNhcEJhY2tncm91bmRDb2xvcilcIj5cbiAgICA8IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG5cbiAgICA8dWk1LWxpc3QgbW9kZT1cIlNpbmdsZVNlbGVjdFwiIGhlYWRlci10ZXh0PVwiU2luZ2xlIFNlbGVjdCBNb2RlXCI-XG4gICAgICAgIDx1aTUtbGkgc2VsZWN0ZWQgaWNvbj1cIm1hcFwiIGljb24tZW5kPkFyZ2VudGluYTwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpIGljb249XCJtYXBcIiBpY29uLWVuZD5CdWxnYXJpYTwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpIGljb249XCJtYXBcIiBpY29uLWVuZD5DaGluYTwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpIHR5cGU9XCJJbmFjdGl2ZVwiIGljb249XCJtYXBcIiBpY29uLWVuZD5EZW5tYXJrICh1aTUtbGkgdHlwZT0nSW5hY3RpdmUnKTwvdWk1LWxpPlxuICAgIDwvdWk1LWxpc3Q-XG4gICAgPGJyPlxuICAgIDx1aTUtbGlzdCBtb2RlPVwiU2luZ2xlU2VsZWN0QmVnaW5cIiBoZWFkZXItdGV4dD1cIlNpbmdsZSBTZWxlY3QgQmVnaW4gTW9kZVwiPlxuICAgICAgICA8dWk1LWxpIHNlbGVjdGVkIGljb249XCJtYXBcIiBpY29uLWVuZD5BcmdlbnRpbmE8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSBpY29uPVwibWFwXCIgaWNvbi1lbmQ-QnVsZ2FyaWE8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSBpY29uPVwibWFwXCIgaWNvbi1lbmQ-Q2hpbmE8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSB0eXBlPVwiSW5hY3RpdmVcIiBpY29uPVwibWFwXCIgaWNvbi1lbmQ-RGVubWFyayAodWk1LWxpIHR5cGU9J0luYWN0aXZlJyk8L3VpNS1saT5cbiAgICA8L3VpNS1saXN0PlxuICAgIDxicj5cbiAgICA8dWk1LWxpc3QgbW9kZT1cIlNpbmdsZVNlbGVjdEVuZFwiIGhlYWRlci10ZXh0PVwiU2luZ2xlIFNlbGVjdCBFbmQgTW9kZVwiPlxuICAgICAgICA8dWk1LWxpIHNlbGVjdGVkIGljb249XCJtYXBcIiBpY29uLWVuZD5BcmdlbnRpbmE8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSBpY29uPVwibWFwXCIgaWNvbi1lbmQ-QnVsZ2FyaWE8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSBpY29uPVwibWFwXCIgaWNvbi1lbmQ-Q2hpbmE8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSB0eXBlPVwiSW5hY3RpdmVcIiBpY29uPVwibWFwXCIgaWNvbi1lbmQ-RGVubWFyayAodWk1LWxpIHR5cGU9J0luYWN0aXZlJyk8L3VpNS1saT5cbiAgICA8L3VpNS1saXN0PlxuICAgIDxicj5cbiAgICA8dWk1LWxpc3QgbW9kZT1cIk11bHRpU2VsZWN0XCIgaGVhZGVyLXRleHQ9XCJNdWx0aSBTZWxlY3QgTW9kZVwiPlxuICAgICAgICA8dWk1LWxpPlBpbmVhcHBsZTwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpIHNlbGVjdGVkPk9yYW5nZTwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpPkJhbmFuYTwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpPk1hbmdvPC91aTUtbGk-XG4gICAgPC91aTUtbGlzdD5cbiAgICA8YnI-XG4gICAgPHVpNS1saXN0IG1vZGU9XCJEZWxldGVcIiBoZWFkZXItdGV4dD1cIkRlbGV0ZSBNb2RlXCI-XG4gICAgICAgIDx1aTUtbGk-QXJnZW50aW5hPC91aTUtbGk-XG4gICAgICAgIDx1aTUtbGk-QnVsZ2FyaWE8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saT5DaGluYTwvdWk1LWxpPlxuICAgIDwvdWk1LWxpc3Q-XG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQgLS0-XG4gICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwibWFpbi5qc1wiPjwvc2NyaXB0PlxuPC9ib2R5PlxuXG48L2h0bWw-XG48IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG4ifSwibWFpbi5qcyI6eyJuYW1lIjoibWFpbi5qcyIsImNvbnRlbnQiOiIvKiBwbGF5Z3JvdW5kLWhpZGUgKi9cbmltcG9ydCBcIi4vcGxheWdyb3VuZC1zdXBwb3J0LmpzXCI7XG4vKiBwbGF5Z3JvdW5kLWhpZGUtZW5kICovXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9MaXN0LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9TdGFuZGFyZExpc3RJdGVtLmpzXCI7XG5cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L21hcC5qc1wiOyJ9fQ

Steps to Reproduce

1. modify MultiSelect demo code in the index.html to
   <ui5-list mode="MultiSelect" header-text="Multi Select Mode"> <ui5-li accessibleName='Pineapple'>Pineapple</ui5-li> <ui5-li accessibleName='Orange' selected>Orange</ui5-li> <ui5-li accessibleName='Banana'>Banana</ui5-li> <ui5-li accessibleName='Mango'>Mango</ui5-li> </ui5-list>

2. All list items will have a checkbox when using the ui5-list in MultiSelect mode.

3. With JAWS, press CTRL+INSERT+X , to identify the checkboxes

4. Observe that the label name of the checkbox was not found
   

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.24.3 and 2.X.X

Browser

Chrome, Edge

Operating System

No response

Additional Context

No response

Organization

SAP SF

Declaration

• I’m not disclosing any internal or sensitive information.

[s-todorova]

Hi @AlexYanSap,

I see that you're trying to set the accessibleName property for the ui5-list-item like so:
<ui5-li accessibleName='Orange' selected>Orange</ui5-li>, however the attribute equivalent of the properties in ui5 webcomponents need to be written in kebab case, like so:
<ui5-li accessible-name='Orange' selected>Orange</ui5-li>

Hi @SAP/ui5-webcomponents-topic-p,

I was able to reproduce the issue with the steps described above: setting an accessible-name on ui5-list-item results in for the checkbox, JAWS outputs the i18n bundle text for ariaLabel instead of the value of accessibleName property in MultiSelect mode. When testing with an isolated ui5-checkbox with accessible-name set, everything works okay.
Could you please take a look at this?

Best regards,
Siyana

[AlexYanSap]

Hi @s-todorova， thanks for your correction. I used the react wrapper of ui5-wc and it will help me inject 'accessible-name' when I pass the 'accessibleName'. It's exactly what you are saying that the accessible name is not announced.