accessibility Issue: “Ensures every ARIA input field has an accessible name” - for UI5 web components (ui5-list).

[riteshfsd]

Describe the bug
I am facing an issue related to accessibility tests for UI5 web components (ui5-list). Issue description: “Ensures every ARIA input field has an accessible name”

To reproduce
Steps to reproduce the behavior:

1. I am wrapping divs with ui5-list component
2. I have given these attributes for ui5-list (shouldRenderH1 header-text="Test" ariaLabelledBy="label-test")

Expected behavior
I Should not get the error "Ensures every ARIA input field has an accessible name"

Screenshots

Context

• UI5 Web Components version
• OS/Platform: {}
• Browser (if relevant): {...}
• Other information: {...}

Affected components (if known)

Log output / Any errors in the console

{...}

[ilhan007]

Hi @riteshfsd

Just few notes:

shouldRenderH1 is not an attribute or property of the List, it is a private read-only getter that calculates if the list
should render internal header in case there is no external one. So shouldRenderH1 is obsolete, does nothing and should be removed.

header-text is a public API, but from the code you attached I can see that slot="header" is used. And, the slot takes precedence over the "header-text" and the List does not render internal header, but displays the one set with the slot="header".

If you remove the <div slot="header", you will see the internal header and aria-labelledby pointing to it:

The support of setting aria-labelledBy="label-test" on the <ui5-list> is missing and we are going to provide it in regards to this issue.

[ilhan007]

Hello @rimasirich
after we release this fix you will be able to set aria-label or aria-labelledby on ui5-list.

The change: #1899

Also,
read my previous comment where I explain the role of shouldRenderH1 and header-text.