Skip to content

Ensure appropriate labels are provided for color/gradient picker controls #54055

Description

@andrewhayward

What problem does this address?

Changes introduced in #52255 make it a requirement for the CircularOptionPicker to have an aria-label/-labelledby prop provided, to make sure appropriate context is available for the control. The three consuming components (ColorPalette, DuotonePicker and GradientPicker) all hide this requirement behind a default value, and should transition away from optional ARIA props to requiring a label of some sort.

What is your proposed solution?

All of the higher-order controls that use these three foundational components should be updated to provide a more appropriate and relevant label for their context, passing either an aria-label or aria-labelledby prop.

Acceptance Criteria

  • Identify all of the controls that use ColorPalette, DuotonePicker and GradientPicker
  • Update them to provide context-appropriate labels with aria-label or aria-labelledby
  • Update ColorPalette, DuotonePicker and GradientPicker to require one of aria-label or aria-labelledby (see related conversation)

Metadata

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components

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