🎨 Palette: Replace ARIA roles with semantic fieldsets#498
Conversation
* Replace generic `div role="group"` and `role="radiogroup"` with native HTML `<fieldset>` tags for grouping form elements. * Replace `<label>` pseudo-labels for groups with native HTML `<legend>` tags. * Update `popup.css` to reset default `<fieldset>` styling to maintain existing design. * Update `tests/popup.test.js` to assert on semantic tags instead of ARIA attributes. * Added `.Jules/palette.md` entry on using semantic fieldsets. Co-authored-by: n24q02m <135627235+n24q02m@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. |
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
1 participant
💡 What
This PR replaces the
divcontainers that were manually grouped usingrole="group"/role="radiogroup"andaria-labelledbywith native HTML<fieldset>and<legend>elements. It updates the CSS to reset default fieldset browser styling and maintain the existing visual design seamlessly. The associated tests were updated to assert on these semantic tags rather than ARIA attributes.🎯 Why
Native HTML tags like
<fieldset>and<legend>provide form control grouping out-of-the-box and are universally better supported by all screen readers and assistive technologies compared to applying manual ARIA bindings on non-semantic divs.📸 Before/After
The visual design remains identical, as the fieldset default stylings (
border,padding,margin) were properly stripped out.♿ Accessibility
This change improves keyboard and screen-reader accessibility by utilizing semantic HTML grouping out-of-the-box instead of relying purely on explicit ARIA links.
PR created automatically by Jules for task 4410483993863733008 started by @n24q02m