Skip to content

feat(ui5-color-picker): add accessibleName property for unique landmarks#12968

Merged
hinzzx merged 4 commits intomainfrom
color-picker-acc-fixes
Feb 10, 2026
Merged

feat(ui5-color-picker): add accessibleName property for unique landmarks#12968
hinzzx merged 4 commits intomainfrom
color-picker-acc-fixes

Conversation

@hinzzx
Copy link
Contributor

@hinzzx hinzzx commented Jan 27, 2026

Overview

Currently with our ui5-color-picker if multiple color picker instances on a page all have the same "Color Picker" label for their role="group" landmark, violating WCAG 2.2 requirement that landmarks must have unique role/label combinations

Solutions

  1. Added accessibleName property:
  2. Changed template's html wrapper from section to div
  • Why this matters:
    • <section> is a semantic landmark element (like <nav>, <main>, <aside>)
    • HTML landmarks are automatically exposed to assistive technologies
    • Using <section> with role="group" creates conflicting semantics
    • <div> with role="group" is the correct, non-landmark approach
    • ARIA groups are meant for related form controls, not page sections
    • This prevents the color picker from being announced as a navigable landmark

@hinzzx hinzzx changed the title fix(ui5-color-picker): add accessibleName property for unique landmarks fix(ui5-color-picker): add accessibleName property for unique landmarks Jan 27, 2026
@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Jan 27, 2026

🧹 Preview deployment cleaned up: https://pr-12968--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview January 27, 2026 10:30 Inactive
@unazko unazko requested a review from tsanislavgatev January 29, 2026 07:32
@unazko
Copy link
Contributor

unazko commented Feb 3, 2026

I've tested the accessibleName and accessibleNameRef APIs and they work as expected.

  • When accessibleNameRef and accessibleName are provided then accessibleNameRef would take priority
  • accessibleNameRef properly applied when used stand alone
  • accessibleName properly applied when used stand alone

Also the code looks clean.

@hinzzx hinzzx changed the title fix(ui5-color-picker): add accessibleName property for unique landmarks feat(ui5-color-picker): add accessibleName property for unique landmarks Feb 3, 2026
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 3, 2026 15:44 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 4, 2026 07:31 Inactive
@hinzzx hinzzx merged commit 3e10f22 into main Feb 10, 2026
21 of 22 checks passed
@hinzzx hinzzx deleted the color-picker-acc-fixes branch February 10, 2026 08:16
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 10, 2026 08:16 Inactive
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.

5 participants