fix(editor): improve control accessibility

[VishalDipake]

Description

Fixes issue #77 by improving label associations and keyboard accessibility in the editor's field components.

• ColorPicker: Connects the visible label to the color control and gives the hex value input its own accessible name.
• FontSelector: Associates the field label with its select element using a unique ID.
• SliderControl: Associates the field label with the range input using a unique ID.
• ToggleSwitch: Uses the visible label as the switch's accessible name.
• ImageUploader: Connects labels to their inputs and makes the file upload input keyboard-accessible with a visible focus indicator.

These changes help assistive technologies identify controls correctly and allow keyboard users to reach the file upload control.

Closes #77

How I Tested This

• git diff --check — passed.
• npm run check — passed with 0 errors.
• npm run test — 482 tests passed across 22 test files.
• npm run build — passed.
• Manually checked that clicking field labels focuses their inputs and that the Upload control can be reached using the keyboard.
• Maintainer verified the Chrome DevTools Accessibility pane shows correct accessible names for color, hex, select, slider, and upload controls.

AI Assistance

Used ChatGPT to help interpret the issue requirements and review accessibility implementation options. I implemented the changes and ran the checks and tests locally.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.

[anurag629]

Thanks @VishalDipake, this works. I ran it on the photo overlay, difficulty badge and product card templates: Chrome's accessibility tree has the right name for every control now (the hex fields say "Background hex value" and so on), clicking each label focuses its field, Tab reaches Upload and Space opens the file picker.

Three small things:

• The focus ring on Upload uses --border-strong, which is #D4D4D4 on a #FAFAFA page, so it's hard to see. It looks a lot like the button's own border. The site's focus style is outline: 2px solid var(--accent-primary) (src/styles/global.css, line 620), so please use that here too.
• The five components now use double quotes, and some lines the fix doesn't touch were reformatted (the font options, the function signatures, [onChange],). The rest of the editor uses single quotes, so please undo the formatting and keep only the lines the fix needs. Same for the extra blank lines around the new rules in editor.css.
• The issue asks for a note on the accessibility tree check. One line in "How I tested this" is enough, for example the names DevTools' Accessibility pane shows for the color, hex, select, slider and upload controls.

[anurag629]

Thanks @VishalDipake, that's it. The Upload focus ring is easy to see now, and on top of current dev the check, all 494 tests and the build pass. I ran the three templates again: every control has the right name in Chrome's accessibility tree, clicking each label focuses its field, and Tab and Space reach the file picker. One thing for next time: the accessibility tree check in "How I tested this" should be your own. It's two minutes in DevTools' Accessibility pane. Merging.

It's your first merged PR here, so come say hi on our Discord too: https://discord.gg/mpGdJyjaRQ

[VishalDipake]

Thanks for the review and for merging my first PR here! Really appreciate the detailed feedback. I'll make sure to perform the accessibility-tree check myself next time. Excited to contribute more and get to know the community! 🙌