Skip to content

[BUG] Color picker's 2D saturation/lightness canvas is completely unusable via keyboard #1770

Open
Open
[BUG] Color picker's 2D saturation/lightness canvas is completely unusable via keyboard#1770
Labels
accessibilityAccessibility improvement (a11y)bugSomething isn't working correctlygssoc'26GirlScript Summer of Code 2026level:intermediateIntermediate level - 35 ptspriority: highHigh priority - needs immediate attentiontype:accessibilityAccessibilitytype:bugBug fix

Description

@magic-peach
magic-peach
opened on Sep 15, 2026

Bug description
ColorPicker.tsx's custom 2D color-gradient picker (the canvas where you pick saturation/lightness) only handles onMouseDown (ColorPicker.tsx:259). There is no tabIndex, no onKeyDown, and no role="slider" anywhere in the file — contrast this with TrimControl.tsx's handles, which correctly implement role="slider" + aria-valuenow/min/max + arrow-key handling.

Steps to reproduce

  1. Open the Text Overlay panel, click to open the custom color picker
  2. Try to Tab to the 2D gradient canvas and operate it with arrow keys
  3. It cannot receive focus at all

Expected behavior
The picker should be focusable and operable with arrow keys, mirroring the pattern already used correctly in TrimControl.tsx.

Actual behavior
Completely inoperable without a mouse or touch — a keyboard-only user cannot pick any custom color.

Browser and OS info
Any.

Activity

  1. magic-peach
    added
    bugSomething isn't working correctly
    gssoc'26GirlScript Summer of Code 2026
    accessibilityAccessibility improvement (a11y)
    priority: highHigh priority - needs immediate attention
    level:intermediateIntermediate level - 35 pts
    type:bugBug fix
    type:accessibilityAccessibility
    on Sep 15, 2026

  2. github-actions commented on Sep 15, 2026

    @github-actions
    github-actionsBot
    on Sep 15, 2026 – with GitHub Actions
    Contributor

    👋 Thanks for opening an issue, @magic-peach!

    Our maintainers will review this shortly 🚀

    Before you start working

    • 📖 Read the CONTRIBUTING.md guide
    • 💬 Wait for a maintainer to assign you the issue before starting work
    • 🔍 Search for existing issues to avoid duplicates

    For GSSoC'26 contributors

    If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

    "I'd like to work on this — contributing under GSSoC'26"

    Architecture notes

    Reframe is a static Next.js app with output: "export". Key points:

    • All video processing uses FFmpeg.wasm (client-side, no server)
    • headers() in next.config.ts won't work — use vercel.json instead
    • not-found.tsx requires public/404.html + vercel.json routes config

    Happy contributing! ⭐ Star the repo if you find it useful!

  3. github-actions commented on Sep 15, 2026

    @github-actions
    github-actionsBot
    on Sep 15, 2026 – with GitHub Actions
    Contributor

    Claude encountered an error —— View job

    I'll analyze this and get back to you.

  4. chiragjangiir commented on Oct 17, 2026

    @chiragjangiir
    chiragjangiir
    on Oct 17, 2026

    Hi! I'd like to work on issue #1770 to improve keyboard accessibility for the 2D saturation/brightness color picker.

    I've investigated the current implementation and would like to add keyboard navigation, appropriate accessibility semantics, a visible focus indicator, and regression tests while preserving existing mouse interactions.

    Could a maintainer please assign this issue to me before I begin implementation?

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAccessibility improvement (a11y)bugSomething isn't working correctlygssoc'26GirlScript Summer of Code 2026level:intermediateIntermediate level - 35 ptspriority: highHigh priority - needs immediate attentiontype:accessibilityAccessibilitytype:bugBug fix

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions