fix(accessibility): add missing input labels and aria attributes

[Nightkilller]

Description

Resolved accessibility issue #304 by auditing form controls across the Editron codebase and ensuring all , , and <textarea> elements have proper accessible labeling. Changes Made Added missing aria-label attributes where visual labels were intentionally absent Added proper htmlFor / id associations for labeled form controls Improved accessibility coverage across dialogs, settings panels, forms, search inputs, and dashboard components Preserved all existing component behavior and styling Updated Areas GitHub import dialog ZIP upload input Terminal search Template search AI settings dialog Environment manager Package manager Deployment dialog Framework template grid Authentication page Preview page AI chat panel Fixes #304 Verification Verified TypeScript compilation Verified ESLint passes on modified files Confirmed accessibility improvements without behavioral regressions Ensured no duplicate IDs were introduced Checklist [x] Accessibility-focused changes only [x] Existing functionality preserved [x] Minimal and targeted modifications [x] Verified labels and aria attributes Summary by CodeRabbit Accessibility Improvements Added descriptive labels to input fields throughout the application to improve screen reader support, including search, authentication, chat, and deployment interfaces. Enhanced form accessibility with proper label-to-input associations in dialogs for improved keyboard navigation.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @Nightkilller!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 7226a31e-b796-4098-8293-8259f2b6ea91

📥 Commits

Reviewing files that changed from the base of the PR and between f12b223 and d3947ad.

📒 Files selected for processing (12)

• app/preview/page.tsx
• components/marketing/template-grid.tsx
• components/ui/auth-page.tsx
• modules/dashboard/components/github-import-dialog.tsx
• modules/dashboard/components/template-selecting-modal.tsx
• modules/dashboard/components/upload-zip.tsx
• modules/playground/components/ai-chat-panel.tsx
• modules/playground/components/ai-settings-dialog.tsx
• modules/playground/components/deploy-dialog.tsx
• modules/playground/components/env-manager.tsx
• modules/playground/components/package-manager.tsx
• modules/webcontainers/components/terminal.tsx

---

Walkthrough

This PR adds programmatic label associations to form inputs across the application by adding aria-label attributes to standalone inputs and establishing htmlFor/id pairs between labels and grouped form controls.

Changes

Accessibility input labeling

Layer / File(s)	Summary
aria-label additions for standalone inputs app/preview/page.tsx, components/marketing/template-grid.tsx, components/ui/auth-page.tsx, modules/dashboard/components/template-selecting-modal.tsx, modules/dashboard/components/upload-zip.tsx, modules/playground/components/ai-chat-panel.tsx, modules/playground/components/deploy-dialog.tsx, modules/playground/components/env-manager.tsx, modules/playground/components/package-manager.tsx, modules/webcontainers/components/terminal.tsx	Search, message, upload, and API token inputs receive aria-label attributes describing their purpose, enabling screen readers to announce unlabeled form controls.
htmlFor/id associations for grouped form controls modules/dashboard/components/github-import-dialog.tsx, modules/playground/components/ai-settings-dialog.tsx	Labels are now explicitly associated with their corresponding inputs via htmlFor and id attributes for monorepo directory selection and per-provider API key inputs, improving semantic HTML and keyboard navigation.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• piyushdotcomm/Editron#72: Both PRs modify modules/dashboard/components/template-selecting-modal.tsx, changing the template search input markup.

Suggested labels

accessibility, type:bug, quality:exceptional, level:beginner

Suggested reviewers

• piyushdotcomm

Poem

🐰 With care and intent, each input now speaks,
Labels and ARIA for those who seek,
A rabbit audits with focus so keen—
The most accessible interface you've seen! 🎨✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely summarizes the main change: adding missing input labels and aria attributes for accessibility improvements.
Description check	✅ Passed	The PR description thoroughly covers the changes, affected areas, and verification steps, though it lacks explicit mention of running npm commands.
Linked Issues check	✅ Passed	The PR successfully addresses issue #304 by adding aria-label attributes and htmlFor/id associations across all 12 affected form control areas.
Out of Scope Changes check	✅ Passed	All changes are strictly focused on accessibility improvements through labels and aria attributes; no behavioral, functional, or unrelated code modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Nightkilller]

Hi @piyushdotcomm,

Implemented the accessibility improvements requested in #304.

This PR audits and updates form controls across the targeted components to ensure proper accessible labeling using either htmlFor/id associations or descriptive aria-label attributes where visual labels are not present.

Verified the modified files for accessibility consistency and ensured no behavioral or styling regressions were introduced.

Please review when convenient. Thank you!