Skip to content

fix(ui5-flexible-column-layout): expose separator accessible name via aria-label#13776

Merged
plamenivanov91 merged 3 commits into
UI5:mainfrom
rodriguescarson:fix/fcl-separator-aria-label
Jul 3, 2026
Merged

fix(ui5-flexible-column-layout): expose separator accessible name via aria-label#13776
plamenivanov91 merged 3 commits into
UI5:mainfrom
rodriguescarson:fix/fcl-separator-aria-label

Conversation

@rodriguescarson

Copy link
Copy Markdown
Contributor

Fixes #13775

Problem

In FlexibleColumnLayoutTemplate.tsx, the start and end resize separators (role="separator") set their accessible name via the title attribute:

<div role={this.accStartSeparatorRole} title={this.accStartSeparatorText} ... >

title is not read by VoiceOver at default verbosity, so the separators are effectively unnamed for those users. As noted in the issue, the name should be exposed at least via aria-label, and a customer rejected title-based naming.

Fix

Expose the accessible name via aria-label instead of title on both separators. aria-label is the correct accessible-name mechanism for the separator role and is read across screen readers (VoiceOver, JAWS, NVDA). The name strings (accStartSeparatorText / accEndSeparatorText) are unchanged, so it's an attribute swap.

Also updated packages/fiori/cypress/specs/FCL.cy.tsx ("tests separator acc attrs") to assert aria-label instead of title on .ui5-fcl-separator-start / .ui5-fcl-separator-end.

Notes

Minimal, verifiable-by-inspection change. I updated the one spec that asserted title; happy to keep title as an additional tooltip too if the team prefers exposing both, but per the issue the accessible name should come from aria-label.

🤖 Generated with Claude Code

…-label

The start/end resize separators (role=separator) set their accessible name
via the title attribute. title is not read by VoiceOver at default verbosity,
so the separators are effectively unnamed for those users, and a customer
rejected title-based naming. Expose the name via aria-label instead, which is
the correct accessible-name mechanism for the separator role.

Updated the FCL Cypress spec to assert aria-label instead of title.

Fixes UI5#13775
@cla-assistant

cla-assistant Bot commented Jul 2, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@cla-assistant

cla-assistant Bot commented Jul 2, 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.

@plamenivanov91 plamenivanov91 self-requested a review July 3, 2026 15:15
@plamenivanov91 plamenivanov91 changed the title fix: [FlexibleColumnLayout] expose separator accessible name via aria-label fix(ui5-flexible-column-layout): expose separator accessible name via aria-label Jul 3, 2026
@plamenivanov91 plamenivanov91 merged commit 7a44031 into UI5:main Jul 3, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FlexibleColumnLayout]: endSeparator/startSeparator accessible name is exposed as title attribute

2 participants