Make the gallery thumbnail keyboard-operable

Closed
  • Is something wrong?
#9 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@jay23606 is already working on this.

Since Nov 6, 2026.

  • #40 by @jay23606 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Stale
Tech stack
html, python
Domain
accessibility

Research direction

Start in easyedit/web/index.html at tile() (lines 286–288), the .bar i element (line 272), and the progress/log region. Check how thumbnails play edits and how render progress is updated. Done when thumbnails are keyboard-operable and named after their edits, progress bars expose the displayed percentage, and the status region uses aria-live="polite"; verify with the issue's stated browser checks. An open pull request (#40) is already linked.

Written by the indexing model from the issue text.

Description

accessibility good first issue

The gallery thumbnail is the primary way to play an edit, and it's a <div data-play> with no tabindex, no role and no accessible name — so it is mouse-only. The progress bar (.bar i) has no role="progressbar" or aria-valuenow, and the live progress and log region has no aria-live, so a screen-reader user gets no indication that a render is advancing.

Task: make the thumbnail a real <button> (or give it role="button", tabindex="0" and key handling), name it after the edit, add the progressbar roles, and mark the status region aria-live="polite".

Where: easyedit/web/index.html:286-288 (the thumbnail in tile()), :272 (.bar i), and the progress/log region.

Done when: in python -m easyedit.web, pressing Tab reaches each finished edit's thumbnail, Enter or Space plays it, and the DevTools Accessibility pane shows a name that includes the edit's title. A running job's .bar exposes role="progressbar" with aria-valuenow equal to the percent shown, and the progress/log region has aria-live="polite".

Getting started: Python 3.10+, Node 22+, FFmpeg on PATH. npm install, pip install -r requirements.txt, then python -m easyedit.doctor. Run python -m unittest discover before opening a PR. Passing --llm none skips the model entirely, which is the fastest way to test. Comment here to claim it. Questions → Discord.

Dominant language
Python
Stars
168
Forks
24
Avg merge
2d 10h
Merged PRs (30d)
14

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from blixvip/easyedit

All issues in blixvip/easyedit

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.