Skip to content

🎨 Palette: Add type=button and aria-label to inline section controls#514

Closed
aafre wants to merge 1 commit into
mainfrom
palette-accessibility-section-controls-13255535009312332919
Closed

🎨 Palette: Add type=button and aria-label to inline section controls#514
aafre wants to merge 1 commit into
mainfrom
palette-accessibility-section-controls-13255535009312332919

Conversation

@aafre
Copy link
Copy Markdown
Owner

@aafre aafre commented May 6, 2026

What: Added type="button" and explicit aria-label attributes 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

…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>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.

Suggested change
aria-label="Remove description point"
type="button" aria-label={'Remove description point ' + (descIndex + 1)}
References
  1. 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.
  2. 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"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.

Suggested change
aria-label="Remove item"
type="button" aria-label={'Remove item ' + (itemIndex + 1)}
References
  1. 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.
  2. Explicitly set type='button' on elements that are not intended to submit a form to prevent unintended form submissions.

@aafre
Copy link
Copy Markdown
Owner Author

aafre commented May 25, 2026

Closing duplicate — the most recent version of this change is PR #524.

@aafre aafre closed this May 25, 2026
@google-labs-jules
Copy link
Copy Markdown
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant