Visitar URL original
fix(ui5-li): do not set aria-selected on role listitem (#14235) by amirthn6533 · Pull Request #14245 · UI5/webcomponents · GitHub
Skip to content

fix(ui5-li): do not set aria-selected on role listitem (#14235) - #14245

Open
amirthn6533 wants to merge 1 commit into
UI5:mainfrom
amirthn6533:fix/upload-collection-item-invalid-aria-selected
Open

amirthn6533 wants to merge 1 commit into
UI5:mainfrom
amirthn6533:fix/upload-collection-item-invalid-aria-selected

Conversation

@amirthn6533

@amirthn6533 amirthn6533 commented Oct 31, 2026 •

Copy link
Copy Markdown
Contributor

PR checklist

Background & Description

In ListItem (and derived components like UploadCollectionItem), the root <li> renders with role="listitem" by default. Under the W3C WAI-ARIA specification, aria-selected is strictly permitted only on the following roles: gridcell, option, row, tab, columnheader, rowheader, and treeitem.

Applying aria-selected (e.g. aria-selected="false" or aria-selected="true") to an element with role="listitem" violates WAI-ARIA and triggers automated accessibility failures (e.g. axe-core rule aria-allowed-attr and AccessContinuum test 264).

Selection state for listitem elements is already communicated accessibly via:

  1. ariaSelectedText ("Selected" / "Not Selected") announced in aria-describedby
  2. Interactive selection controls (ui5-checkbox with aria-checked in Multiple mode, and ui5-radio-button in single selection mode)

When ListItem is configured with role="option" (e.g. in a ListBox container) or role="treeitem", aria-selected is valid and remains properly exposed.

Changes

  • In packages/main/src/ListItem.ts: Conditionally expose ariaSelected in _accInfo only when the item's accessible role supports it (option or treeitem), preventing invalid aria-selected attributes from rendering on role="listitem".
  • Added Cypress integration tests in packages/main/cypress/specs/List.cy.tsx validating that:
    • Items with role="listitem" do not render aria-selected.
    • Items with role="option" (under accessibleRole="ListBox") correctly render aria-selected.
  • Added Cypress regression test in packages/fiori/cypress/specs/UploadCollection.cy.tsx asserting that UploadCollectionItem retains role="listitem" without rendering aria-selected.
  • Aligned assertions in packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx for items with role="listitem".

Fixes: #14235

@cla-assistant

cla-assistant Bot commented Oct 31, 2026 •

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@nnaydenow

Copy link
Copy Markdown
Contributor

Hello @UI5/ui5-team-ctr-rod,

Could you please take a look at this PR?

@nnaydenow
nnaydenow requested a review from a team November 4, 2026 09:06

@TeodorTaushanov TeodorTaushanov left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If aria-selected needs to be removed, the change should be made in ListItem, since UploadCollectionItem inherits this behavior from it.

@TeodorTaushanov
TeodorTaushanov self-requested a review November 4, 2026 14:38
Signed-off-by: Amir Tahani <amirthn653381@gmail.com>
@amirthn6533
amirthn6533 force-pushed the fix/upload-collection-item-invalid-aria-selected branch from d51544f to 99f3c6e Compare November 4, 2026 17:29
@amirthn6533 amirthn6533 changed the title fix(ui5-upload-collection-item): do not set aria-selected on role listitem (#14235) fix(ui5-li): do not set aria-selected on role listitem (#14235) Nov 4, 2026
@amirthn6533

Copy link
Copy Markdown
Contributor Author

Hello @TeodorTaushanov,

Thank you for the review and guidance! You are completely right — UploadCollectionItem only had this behavior because it inherited _accInfo from ListItem.

I have updated the PR accordingly:

  1. Moved the fix directly to the base ListItem class (packages/main/src/ListItem.ts) by conditionally exposing ariaSelected in _accInfo only when the item's accessible role supports it (option or treeitem), ensuring elements with role="listitem" do not render the invalid aria-selected attribute.
  2. Removed the subclass override from UploadCollectionItem.ts.
  3. Added Cypress integration tests in packages/main/cypress/specs/List.cy.tsx covering both role="listitem" (verifying no aria-selected) and role="option" under accessibleRole="ListBox" (verifying aria-selected is properly exposed).
  4. Retained the regression test in UploadCollection.cy.tsx and aligned assertions in UserSettingsDialog.cy.tsx.

Could you please take another look when you have a moment? Thanks again!

@TeodorTaushanov
TeodorTaushanov requested a review from a team November 5, 2026 08:57

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UploadCollectionItem] aria-selected is set on role="listitem" (invalid ARIA)

3 participants