🎨 Palette: Add type=button and aria-label to inline section controls#514
🎨 Palette: Add type=button and aria-label to inline section controls#514aafre wants to merge 1 commit into
Conversation
…ion controls Added `type="button"` and explicit `aria-label` attributes to icon-only and inline control buttons across SectionEditor, ExperienceItem, and EducationItem components to improve screen reader accessibility and prevent accidental form submissions. Co-authored-by: aafre <8656674+aafre@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. |
There was a problem hiding this comment.
Code Review
This pull request improves accessibility and prevents accidental form submissions by adding type="button" and aria-label attributes to control buttons in the EducationItem, ExperienceItem, and SectionEditor components. The .Jules/palette.md documentation was also updated to include these standards. Feedback was provided to make aria-label values unique for list items by incorporating their indices, which helps screen reader users distinguish between similar actions.
| </div> | ||
| <button | ||
| type="button" | ||
| aria-label="Remove description point" |
There was a problem hiding this comment.
When rendering multiple identical controls in a list, the aria-label should be unique to help screen reader users distinguish between them. Including the index or a specific identifier for the item being removed would significantly improve accessibility. Additionally, ensure the button is conditionally rendered only when the removal handler is provided, and explicitly set type='button' to prevent unintended form submissions.
| aria-label="Remove description point" | |
| type="button" aria-label={'Remove description point ' + (descIndex + 1)} |
References
- For optional UI elements like a delete button, make the corresponding handler prop optional and conditionally render the element only when the prop is provided.
- Explicitly set type='button' on elements that are not intended to submit a form to prevent unintended form submissions.
| /> | ||
| <button | ||
| type="button" | ||
| aria-label="Remove item" |
There was a problem hiding this comment.
The aria-label for this button should be unique for each item in the list. Providing context, such as the item's index, ensures that screen reader users can identify which specific item they are interacting with when navigating by buttons. Additionally, ensure the button is conditionally rendered only when the removal handler is provided, and explicitly set type='button' to prevent unintended form submissions.
| aria-label="Remove item" | |
| type="button" aria-label={'Remove item ' + (itemIndex + 1)} |
References
- For optional UI elements like a delete button, make the corresponding handler prop optional and conditionally render the element only when the prop is provided.
- Explicitly set type='button' on elements that are not intended to submit a form to prevent unintended form submissions.
|
Closing duplicate — the most recent version of this change is PR #524. |
Understood. Acknowledging that this work is now obsolete and stopping work on this task. |
What: Added
type="button"and explicitaria-labelattributes to icon-only and inline control buttons across SectionEditor, ExperienceItem, and EducationItem components.Why: Prevents accidental form submissions and ensures screen reader users can understand the purpose of icon-only controls.
Before/After: No visual changes, purely accessibility and semantic HTML improvements.
Accessibility: Improves keyboard/screen-reader accessibility by providing clear labels for 'Save', 'Cancel', and 'Remove' actions that previously only relied on emoji or tooltips.
PR created automatically by Jules for task 13255535009312332919 started by @aafre