Skip to content

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

Description

@VidhiNPatel

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugThis issue is a bug in the code

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions