🎨 Palette: Add for attributes to labels for form accessibility#84
🎨 Palette: Add for attributes to labels for form accessibility#84longestmt wants to merge 1 commit into
for attributes to labels for form accessibility#84Conversation
Added `for` attributes to `<label>` elements matching their corresponding inputs across the application (Exercises, Plans, Workout, and RM Calculator components). This ensures screen readers can accurately associate the labels with inputs and improves focus management when the user clicks the labels. Co-authored-by: longestmt <1509654+longestmt@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What
Added explicit
forattributes to 12 missing<label>tags across the application's forms and modals, linking them to their correspondingidof inputs, textareas, and selects.Files updated:
src/pages/exercises.js(6 labels in "Add Custom Exercise" modal)src/pages/plans.js(3 labels in Plan creation form)src/pages/workout.js(1 label for "Gym Notes" textarea)src/components/rm-calculator.js(2 labels for "Weight" and "Reps" inputs)🎯 Why
Previously, these labels were implicitly wrapping nothing or only visually associated with inputs. Screen readers rely heavily on the
forattribute (oraria-labelledby) to establish a relationship. Addingformakes the forms far more accessible to assistive technologies and also allows users to click the text of the label to properly focus the form field, improving interaction smoothness for all users.📸 Before/After
There is no visual change in the layout.
(See attached verification screenshots for the preserved layouts of the Add Custom Exercise modal and the RM calculator)
♿ Accessibility
Greatly improved form accessibility. Screen readers will now announce "Name: e.g. Zercher Squat" instead of reading a disassociated label and then encountering an unlabeled input. Keyboard navigation and screen reader form modes will now behave as expected natively.
PR created automatically by Jules for task 13525237096484999903 started by @longestmt