Bug Description
When using ui5-list with selectionMode="Delete" to render custom row actions (like move up/down buttons)
in the deleteButton slot, screen readers incorrectly announce "Contains Deletable Items" even though
there are no delete buttons present.
Affected Component
UI5-List
Expected Behaviour
The list should not announce "Contains Deletable Items" when the deleteButton slot contains non-delete
actions, or there should be an alternative selectionMode value (e.g., "Actions" or "Custom") that
enables the slot without the misleading ARIA announcement.
No announcement about deletable items, or a configurable announcement
Isolated Example
No response
Steps to Reproduce
- Create a
ui5-list with selectionMode="Delete"
- Add
ui5-li items with ui5-button elements in the deleteButton slot using move icons
(arrow-top/arrow-bottom)
- Enable a screen reader (VoiceOver, NVDA, or JAWS)
- Navigate to the list
Log Output, Stack Trace or Screenshots
<ui5-list selection-mode="Delete" header-text="Reorder Items">
<ui5-li>
Item 1
<ui5-button slot="deleteButton" icon="arrow-top" accessible-name="Move up"></ui5-button>
<ui5-button slot="deleteButton" icon="arrow-bottom" accessible-name="Move down"></ui5-button>
</ui5-li>
</ui5-list>
### Priority
Medium
### UI5 Web Components Version
2.23.1
### Browser
Chrome
### Operating System
_No response_
### Additional Context
In `List.js`, the `ariaLabelModeText` getter hardcodes the announcement:
```javascript
get ariaLabelModeText() {
if (this.hasData) {
if (this.isDelete) {
return List_1.i18nBundle.getText(ARIA_LABEL_LIST_DELETABLE); // "Contains Deletable Items"
}
}
}
The deleteButton slot is currently the only way to render row-level actions in ui5-li, but using it
requires selectionMode="Delete", which triggers this hardcoded announcement regardless of what actions are
actually in the slot.
WCAG Violations
- WCAG 1.3.1 (Info and Relationships): The announced relationship ("deletable items") doesn't match the
actual functionality (move actions)
- WCAG 4.1.2 (Name, Role, Value): Screen reader users receive incorrect information about available
actions
Suggested Solutions
- Add a new
selectionMode value like "Actions" or "Custom" that enables the deleteButton slot
without the "deletable" ARIA announcement
- Make
ariaLabelModeText configurable via a new prop (e.g., modeAriaLabel) that can override or
suppress the announcement
- Add a separate
actionsButton slot that doesn't require selectionMode="Delete"
Organization
No response
Declaration
Bug Description
When using
ui5-listwithselectionMode="Delete"to render custom row actions (like move up/down buttons)in the
deleteButtonslot, screen readers incorrectly announce "Contains Deletable Items" even thoughthere are no delete buttons present.
Affected Component
UI5-List
Expected Behaviour
The list should not announce "Contains Deletable Items" when the
deleteButtonslot contains non-deleteactions, or there should be an alternative
selectionModevalue (e.g.,"Actions"or"Custom") thatenables the slot without the misleading ARIA announcement.
No announcement about deletable items, or a configurable announcement
Isolated Example
No response
Steps to Reproduce
ui5-listwithselectionMode="Delete"ui5-liitems withui5-buttonelements in thedeleteButtonslot using move icons(arrow-top/arrow-bottom)
Log Output, Stack Trace or Screenshots
The
deleteButtonslot is currently the only way to render row-level actions inui5-li, but using itrequires
selectionMode="Delete", which triggers this hardcoded announcement regardless of what actions areactually in the slot.
WCAG Violations
actual functionality (move actions)
actions
Suggested Solutions
selectionModevalue like"Actions"or"Custom"that enables thedeleteButtonslotwithout the "deletable" ARIA announcement
ariaLabelModeTextconfigurable via a new prop (e.g.,modeAriaLabel) that can override orsuppress the announcement
actionsButtonslot that doesn't requireselectionMode="Delete"Organization
No response
Declaration