Skip to content

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 ui5-webcomponents-bot temporarily deployed to preview January 27, 2026 10:30 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.

3 participants