Associate visible labels with their fields in SceneCard and CartoonScriptStep
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 78/100
- Issue type
- Feature
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- html, react, typescript
- Domain
- accessibility, frontend
Research direction
Start with frontend/src/components/video/SceneCard.tsx, frontend/src/components/cartoon/CartoonScriptStep.tsx, and frontend/src/components/video/ScriptStep.tsx to map each visible label to its field and identify controls that need aria-label. Use React useId() to generate unique IDs while preserving existing styling, then verify label clicks focus the intended controls. Run e2e/wizard-script-parse.spec.ts, npm run lint, and npm run build; completion means every listed control is associated and named accessibly without breaking existing placeholder-based selection.
Written by the indexing model from the issue text.
Description
Context
The video and cartoon wizards show visible <label> text, but none of these labels has an htmlFor, and the fields have no id. Clicking a label does not focus its field, and assistive tech does not get the field's name. These are the most-used fields in the app.
Where
frontend/src/components/video/SceneCard.tsx:106(Narration label) →:109textarea;:123(Visual Prompt label) →:127textarea;:177Ken Burns<select>, which has no label at allfrontend/src/components/cartoon/CartoonScriptStep.tsx:150→:153(Topic);:164/:174/:184→:165/:175/:185(Tone / Length / Platform selects);:124title input and:249per-scene narration textarea have only a placeholderfrontend/src/components/video/ScriptStep.tsx:111: title input with only a placeholder
What to do
- Use React
useId()(SceneCard renders once per scene, so ids must be unique) and connect eachlabelto its field withhtmlFor/id. - For fields that have no visible label, add an
aria-label("Ken Burns motion", "Cartoon title", "Scene N narration", "Video title"). - Keep the existing styling.
Acceptance criteria
- Clicking each visible label focuses its field
-
e2e/wizard-script-parse.spec.tsstill passes (it selects fields by placeholder) -
npm run lintandnpm run buildpass
Getting started
Read CONTRIBUTING.md for dev setup and the quality bar (no facades, evidence before done). Comment here to claim the issue.
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 3
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 5
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from BeyondITL/contentine-create
-
good first issue level: 1 ui
Difficulty 2/5 1-3 hours Newbie friendliness 94/100
BeyondITL/contentine-create#58 ·
Maintainers usually reply within 1 day
-
Fix Enter on the marketplace Buy button opening details instead of buyingPossibly taken @developedbyBob claimed this 3 days ago. Openaccessibility claimed good first issue level: 1
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
BeyondITL/contentine-create#57 · 3 comments · 1 assignee ·
Maintainers usually reply within 1 day
-
Enable JSX in vitest so React component tests can runPossibly taken @29miaoet claimed this 4 days ago. Openclaimed good first issue level: 1 testing
Difficulty 2/5 1-3 hours Newbie friendliness 92/100
BeyondITL/contentine-create#56 · 2 comments · 1 assignee ·
Maintainers usually reply within 1 day
-
good first issue level: 1 testing
Difficulty 2/5 1-3 hours Newbie friendliness 94/100
BeyondITL/contentine-create#55 ·
Maintainers usually reply within 1 day
-
good first issue level: 1 testing
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
BeyondITL/contentine-create#54 ·
Maintainers usually reply within 1 day
All issues in BeyondITL/contentine-create
Similar issues
-
[Bug] Pod detail shows CPU usage ten times too high, and throws on decimal memory suffixesPossibly taken @RaphaelFakhri claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 11 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
remotion-dev/remotion#12957 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
tyrasd/overpass-turbo#871 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 1 day