UI5 / UI5/webcomponents

[A11y] ui5-list announces "Contains Deletable Items" when using deleteButton slot for non-delete actions (Move Up/Down)

Open
#13,742 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug consulting
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
  1. Create a ui5-list with selectionMode="Delete"
  2. Add ui5-li items with ui5-button elements in the deleteButton slot using move icons
    (arrow-top/arrow-bottom)
  3. Enable a screen reader (VoiceOver, NVDA, or JAWS)
  4. 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
  1. Add a new selectionMode value like "Actions" or "Custom" that enables the deleteButton slot
    without the "deletable" ARIA announcement
  2. Make ariaLabelModeText configurable via a new prop (e.g., modeAriaLabel) that can override or
    suppress the announcement
  3. Add a separate actionsButton slot that doesn't require selectionMode="Delete"
Organization

No response

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.