From 46f9fb6e2dd510f06045ee8a6b1151448a78233e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 22:17:36 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Use=20semantic=20fiel?=
 =?UTF-8?q?dsets=20for=20form=20grouping?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced generic `div` containers and pseudo-labels using `role="group"` and `role="radiogroup"` with native `<fieldset>` and `<legend>` elements. This inherently structures grouped form controls (like radio buttons or segmented buttons) for assistive technologies. We also added a CSS reset for browser default `fieldset` styles (`border`, `padding`, `margin`) and styled `<legend>` directly instead of managing `aria-labelledby` attributes. Updated unit tests accordingly.

Co-authored-by: n24q02m <135627235+n24q02m@users.noreply.github.com>
---
 .Jules/palette.md   |  3 +++
 popup.css           |  9 ++++++++-
 popup.html          | 24 ++++++++++++------------
 tests/popup.test.js |  9 ++++-----
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 6e3411a..193c5eb 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.
+## 2026-06-15 - Use Semantic Fieldsets for Form Grouping
+**Learning:** Generic `div` containers and pseudo-labels using `role="group"`, `role="radiogroup"`, and `aria-labelledby` can be entirely avoided by using native `<fieldset>` and `<legend>` elements. This inherently structures grouped form controls (like radio buttons or segmented buttons) for assistive technologies. We can then easily reset browser default `fieldset` styles (`border`, `padding`, `margin`) in CSS.
+**Action:** Next time I encounter `div`s with `role="radiogroup"` or `role="group"`, replace them with native `<fieldset>` and style `<legend>` directly instead of managing `aria-labelledby` attributes.
diff --git a/popup.css b/popup.css
index 85153c2..67270cc 100644
--- a/popup.css
+++ b/popup.css
@@ -50,7 +50,8 @@ section {
   border-radius: 6px;
 }
 
-label {
+label,
+legend {
   display: block;
   font-size: 12px;
   color: #94a3b8;
@@ -260,3 +261,9 @@ button.secondary:hover {
 .summary .skipped {
   color: #fbbf24;
 }
+
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
diff --git a/popup.html b/popup.html
index e4c322c..6a91a70 100644
--- a/popup.html
+++ b/popup.html
@@ -13,20 +13,20 @@ <h1>Jules Task Archiver</h1>
 
     <section class="options">
       <h2>Options</h2>
-      <div class="setting-row">
-        <label id="opModeLabel">Operation</label>
-        <div class="segmented" id="opMode" role="group" aria-labelledby="opModeLabel">
+      <fieldset class="setting-row">
+        <legend id="opModeLabel">Operation</legend>
+        <div class="segmented" id="opMode">
           <button type="button" data-value="archive" class="active" aria-pressed="true">Archive Tasks</button>
           <button type="button" data-value="suggestions" aria-pressed="false">Start Suggestions</button>
         </div>
-      </div>
-      <div class="setting-row">
-        <label id="execModeLabel">Execution Mode</label>
-        <div class="radio-group" role="radiogroup" aria-labelledby="execModeLabel">
+      </fieldset>
+      <fieldset class="setting-row">
+        <legend id="execModeLabel">Execution Mode</legend>
+        <div class="radio-group">
           <label><input type="radio" name="mode" value="dry" checked /> Dry Run</label>
           <label><input type="radio" name="mode" value="run" /> Run</label>
         </div>
-      </div>
+      </fieldset>
       <div class="setting-row">
         <label class="checkbox">
           <input type="checkbox" id="force" aria-describedby="forceHint" />
@@ -34,13 +34,13 @@ <h2>Options</h2>
         </label>
         <span class="hint" id="forceHint" style="display: block; margin-left: 20px; margin-top: 2px;">Archive every task, ignoring state and matching open Pull Requests</span>
       </div>
-      <div class="setting-row">
-        <label id="scopeLabel">Scope</label>
-        <div class="radio-group" role="radiogroup" aria-labelledby="scopeLabel">
+      <fieldset class="setting-row">
+        <legend id="scopeLabel">Scope</legend>
+        <div class="radio-group">
           <label><input type="radio" name="scope" value="current" /> Current tab</label>
           <label><input type="radio" name="scope" value="all" checked /> All Jules tabs</label>
         </div>
-      </div>
+      </fieldset>
     </section>
 
     <section class="settings">
diff --git a/tests/popup.test.js b/tests/popup.test.js
index 3f3db03..d2759ad 100644
--- a/tests/popup.test.js
+++ b/tests/popup.test.js
@@ -435,11 +435,10 @@ 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('id="scopeLabel"'), 'scopeLabel should exist')
-    assert.ok(popupHtml.includes('aria-labelledby="scopeLabel"'), 'scope radiogroup should use aria-labelledby')
+  it('should use explicit visible labels for radio groups via fieldset and legend', () => {
+    assert.ok(popupHtml.includes('<legend id="execModeLabel">'), 'execModeLabel legend should exist')
+    assert.ok(popupHtml.includes('<legend id="scopeLabel">'), 'scopeLabel legend should exist')
+    assert.ok(popupHtml.includes('<fieldset'), 'fieldset tags should be used for grouping')
   })
 })