Associate the web UI's form labels with their inputs

Open Beginner friendly
#8 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Oyead is already working on this.

Since Nov 6, 2026.

Assessment

Difficulty
1/5
Estimated time
1-3 hours
Newbie friendliness
89/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
html
Domain
accessibility

Research direction

Open easyedit/web/index.html at the listed lines and inspect the Options panel fields, #movie, and #picture. Add label associations and run the stated grep checks; done when all ten fields have accessible names and no bare labels remain. The issue also specifies checking the computed names in the DevTools Accessibility pane.

Written by the indexing model from the issue text.

Description

accessibility good first issue

All eight fields in the Options panel use a bare <label> that neither wraps its input nor carries a for attribute, so screen readers announce the text inputs and selects as unlabeled:

<div><label>Speech scene (file, URL or search)</label><input id="speech" placeholder="auto"></div>

The main movie box and the picture-upload input have no label at all — only a placeholder and an accept list.

Task: add for/id pairs for the eight option fields, and a real (optionally visually-hidden) label for #movie and #picture.

Where: easyedit/web/index.html lines 132, 137-144, and 152.

Done when: the DevTools Accessibility pane shows a computed name for every field in the Options panel and for #movie and #picture (none are "unlabeled"), grep -c '<label for=' easyedit/web/index.html prints 10, and grep -n '<label>' easyedit/web/index.html prints nothing.


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.