From 34b63dbcf0137747d1152ed5004e5d648b879d61 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 16 Jun 2026 22:16:27 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement?= =?UTF-8?q?]=20-=20Semantic=20Form=20Group=20Accessibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 What: Replaced generic `
` groups using `role="group"` and `aria-labelledby` with native semantic `
` and `` HTML elements in `popup.html`. Updated `popup.css` to reset default fieldset styling and match the intended label styling. Updated relevant tests. 🎯 Why: Native HTML elements implicitly provide grouping and accessibility features without relying on complex, explicit ARIA attributes, reducing code complexity and improving screen reader reliability. 📸 Before/After: Visual layout remains identical (verified via Playwright). ♿ Accessibility: Improved robustness by leveraging the "First Rule of ARIA" (use native HTML when available). Co-authored-by: n24q02m <135627235+n24q02m@users.noreply.github.com> --- .Jules/palette.md | 3 +++ popup.css | 8 +++++++- popup.html | 24 ++++++++++++------------ tests/popup.test.js | 4 ++-- 4 files changed, 24 insertions(+), 15 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 6e3411a..7e2de75 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -31,3 +31,6 @@ ## 2026-06-09 - Empty State Feedback **Learning:** When a list or process finishes with zero results, an empty summary container gives no feedback, leaving the user wondering if it actually ran or failed silently. **Action:** Always provide a helpful empty state message explaining why no results might have occurred, using styles consistent with other hints to offer guidance without showing as an error. +## 2025-02-18 - Semantic Form Group Accessibility +**Learning:** Generic `
` containers combined with `role="group"` or `role="radiogroup"` and `aria-labelledby` attributes are often flagged by linters (like Biome) and can be unnecessarily complex. Native semantic HTML `
` and `` elements implicitly provide this accessibility structure without requiring explicit ARIA roles. +**Action:** Default to using `
` and `` when grouping related form controls (like radio buttons or segmented controls). Remember to apply a basic CSS reset (`border: none; padding: 0; margin: 0;`) to `
` and style `` to match `
+
+ Execution Mode +
-
+
Archive every task, ignoring state and matching open Pull Requests
-
- -
+
+ Scope +
-
+
diff --git a/tests/popup.test.js b/tests/popup.test.js index 3f3db03..9523d6c 100644 --- a/tests/popup.test.js +++ b/tests/popup.test.js @@ -437,9 +437,9 @@ describe('popup.html accessibility', () => { it('should use explicit visible labels for radio groups via aria-labelledby', () => { assert.ok(popupHtml.includes('id="execModeLabel"'), 'execModeLabel should exist') - assert.ok(popupHtml.includes('aria-labelledby="execModeLabel"'), 'mode radiogroup should use aria-labelledby') + // // assert.ok(popupHtml.includes('aria-labelledby="execModeLabel"'), 'mode radiogroup should use aria-labelledby') // Removed as fieldset provides native grouping // Removed as fieldset provides native grouping assert.ok(popupHtml.includes('id="scopeLabel"'), 'scopeLabel should exist') - assert.ok(popupHtml.includes('aria-labelledby="scopeLabel"'), 'scope radiogroup should use aria-labelledby') + // // assert.ok(popupHtml.includes('aria-labelledby="scopeLabel"'), 'scope radiogroup should use aria-labelledby') // Removed as fieldset provides native grouping // Removed as fieldset provides native grouping }) }) From 190a1f985ef88fa5966a3eae26b7ebeb6ed7c60e Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 16 Jun 2026 22:18:52 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement?= =?UTF-8?q?]=20-=20Semantic=20Form=20Group=20Accessibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 What: Replaced generic `
` groups using `role="group"` and `aria-labelledby` with native semantic `
` and `` HTML elements in `popup.html`. Updated `popup.css` to reset default fieldset styling and match the intended label styling. Updated relevant tests. Formatted CSS with Biome. 🎯 Why: Native HTML elements implicitly provide grouping and accessibility features without relying on complex, explicit ARIA attributes, reducing code complexity and improving screen reader reliability. 📸 Before/After: Visual layout remains identical (verified via Playwright). ♿ Accessibility: Improved robustness by leveraging the "First Rule of ARIA" (use native HTML when available). Co-authored-by: n24q02m <135627235+n24q02m@users.noreply.github.com> --- popup.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/popup.css b/popup.css index f3b4746..67270cc 100644 --- a/popup.css +++ b/popup.css @@ -50,7 +50,8 @@ section { border-radius: 6px; } -label, legend { +label, +legend { display: block; font-size: 12px; color: #94a3b8;