[A11y] ui5-list announces "Contains Deletable Items" when using deleteButton slot for non-delete actions (Move Up/Down)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 285
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 59
Description
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-listwithselectionMode="Delete" - Add
ui5-liitems withui5-buttonelements in thedeleteButtonslot 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
selectionModevalue like"Actions"or"Custom"that enables thedeleteButtonslot
without the "deletable" ARIA announcement - Make
ariaLabelModeTextconfigurable via a new prop (e.g.,modeAriaLabel) that can override or
suppress the announcement - Add a separate
actionsButtonslot that doesn't requireselectionMode="Delete"
Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in List.js at the ariaLabelModeText getter and trace how selectionMode="Delete" and the deleteButton slot produce the list announcement. Confirm with maintainers which proposed API or behavior is intended before changing it. Done means custom row actions no longer cause a misleading "Contains Deletable Items" announcement, with the relevant accessibility behavior covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100