Bug Description
After upgrading from 2.19.1 to 2.21.1, non-selected ui5-li-custom items render with an empty aria-labelledby="".
This breaks accessibility-based querying in Playwright, specifically getByRole(..., { name: ... })
In 2.21.1, an additional element is rendered at the very bottom of the <body> which appears to contain the aria-label/accessible text for the currently focused ui5-li-custom item.
However, this element is empty when no item is focused.
Selected items still receive a populated aria-labelledby, while non-selected items do not.
Impact
This regression breaks Playwright tests using:
page.getByRole("option", { name: /.../ })
because the accessible name is empty for non-selected options.
UI5 Web Components version
Current: 2.21.1
Last known working version: 2.19.1
Affected Component
Affected components ui5-multi-combobox ui5-li-custom (possibly related to ui5-select as well)
Expected Behaviour
aria-labelledby should be populated for all items (including non-selected ones), as it was in 2.19.x.
Playwright role/name queries should continue working consistently.
Actual behavior
Non-selected items render:
aria-labelledby=""
which causes accessible-name resolution to fail.
Isolated Example
No response
Steps to Reproduce
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
2.21.1
Browser
Chrome
Operating System
No response
Additional Context
Possible Related Change
We suspect this regression may have been introduced by:
PR #13065 — UI5/webcomponents
The timing aligns with the behavior change observed between 2.19.1 and 2.21.1.
Specifically, after this change:
selected ui5-li-custom items still receive populated aria-labelledby
non-selected items render aria-labelledby=""
This appears to affect accessible name computation and Playwright role/name queries
Organization
No response
Declaration
Bug Description
After upgrading from 2.19.1 to 2.21.1, non-selected ui5-li-custom items render with an empty aria-labelledby="".
This breaks accessibility-based querying in Playwright, specifically getByRole(..., { name: ... })
In 2.21.1, an additional element is rendered at the very bottom of the
<body>which appears to contain the aria-label/accessible text for the currently focused ui5-li-custom item.However, this element is empty when no item is focused.
Selected items still receive a populated aria-labelledby, while non-selected items do not.
Impact
This regression breaks Playwright tests using:
page.getByRole("option", { name: /.../ })
because the accessible name is empty for non-selected options.
UI5 Web Components version
Current: 2.21.1
Last known working version: 2.19.1
Affected Component
Affected components ui5-multi-combobox ui5-li-custom (possibly related to ui5-select as well)
Expected Behaviour
aria-labelledby should be populated for all items (including non-selected ones), as it was in 2.19.x.
Playwright role/name queries should continue working consistently.
Actual behavior
Non-selected items render:
aria-labelledby=""
which causes accessible-name resolution to fail.
Isolated Example
No response
Steps to Reproduce
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
2.21.1
Browser
Chrome
Operating System
No response
Additional Context
Possible Related Change
We suspect this regression may have been introduced by:
PR #13065 — UI5/webcomponents
The timing aligns with the behavior change observed between 2.19.1 and 2.21.1.
Specifically, after this change:
selected ui5-li-custom items still receive populated aria-labelledby
non-selected items render aria-labelledby=""
This appears to affect accessible name computation and Playwright role/name queries
Organization
No response
Declaration