Skip to content

Duotone bar tells screen reader users to reposition stops, but positions are discarded #81799

Description

@ramonjd

Description

CustomDuotoneBar tells users they can reposition gradient stops, but the duotone data model has nowhere to store a position, so the instruction describes an operation that cannot take effect.

The control points render the shared ControlPoints announcement from CustomGradientBar:

Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.

packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx:68

But CustomDuotoneBar discards everything except the colors:

const newValue = getColorsFromColorStops( newColorStops );
onChange( newValue );

packages/components/src/duotone-picker/custom-duotone-bar.tsx:28

getColorsFromColorStops maps each stop to color and drops position. A duotone is two colors with no positions, so there is nothing to persist even in principle.

Impact

Screen reader users are instructed to perform an action that silently does nothing. Sighted users dragging a stop see it move and snap back on re-render. The keyboard instruction is the more serious half, since it is the only description of the control those users get.

This is pre-existing behaviour, not a regression. It is worth raising now because #81605 adds a Duotone tab to the Global Styles palette editor, so the same bar is reached from a second place and by more people.

Suggested direction

The positions cannot be made meaningful, so the announcement is what should change. Roughly:

  • An opt-out on CustomGradientBar / ControlPoints — something like disablePositioning — that suppresses the position half of the instruction and the arrow-key handling, which CustomDuotoneBar would set.
  • Or a dedicated announcement for the duotone case, describing only what actually works: press to change the color.

Either is an API change to custom-gradient-picker in service of a duotone-picker bug, which is why it did not belong in #81605.

Notes

Raised by @ciampo in review: #81605 (comment)

Activity

  1. added
    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).
    on Aug 19, 2026
  2. changed the title [-]CustomDuotoneBar: announces gradient stop positions it cannot save[/-] [+]Duotone bar tells screen reader users to reposition stops, but positions are discarded[/+] on Aug 19, 2026
  3. ciampo commented on Aug 19, 2026

    @ciampo
    Contributor

    @ramonjd just to coordinate here, do you think you'll manage to work on this follow-up once #81605 merges?

  4. ramonjd commented on Aug 19, 2026

    @ramonjd
    MemberAuthor

    do you think you'll manage to work on this follow-up once #81605 merges?

    Thanks for the ping. I'll keep it on my (long!) list. Shouldn't be hard to throw a PR up for it, can't say when. Thank you!

  5. ramonjd commented on Aug 20, 2026

    @ramonjd
    MemberAuthor

    I had one of my robot slaves push this up:

    I only had time to smoke test with VoiceOver and eyeball the changes. Seems like a decent approach.

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

Metadata

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components[Status] In ProgressTracking issues with work in progress

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions