From 07b1c024ed7d6519beefc6f8d5aca4d43ee908a8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 16 Aug 2026 04:53:23 +0000
Subject: [PATCH 1/4] fix: add dynamic aria-labels to icon-only toggle buttons
 in settings

Adds missing ARIA labels to icon-only buttons in AccountSettingsTab (password visibility and API token copy) and AISettingsTab (Groq API key visibility). The labels dynamically change based on the toggle state to accurately reflect the action that will be performed.

Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>
---
 .Jules/palette.md                               |  3 +++
 src/components/settings/tabs/AISettingsTab.vue  | 17 ++++++++++++-----
 .../settings/tabs/AccountSettingsTab.vue        |  9 +++++++--
 3 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 000000000..4cbb6cd44
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-08-16 - Dynamic ARIA labels for Toggle Buttons
+**Learning:** When a toggle button switches its icon based on state (e.g., Eye/EyeOff for passwords, or a generic toggle without text), a static `aria-label` is insufficient because the action the button performs changes depending on the current state.
+**Action:** Use a dynamic Vue binding (`:aria-label="condition ? 'Action A' : 'Action B'"`) corresponding to the boolean state of the toggle, ensuring screen readers announce the exact action the user will perform by clicking the button.
diff --git a/src/components/settings/tabs/AISettingsTab.vue b/src/components/settings/tabs/AISettingsTab.vue
index a0cbd741a..798e4919f 100644
--- a/src/components/settings/tabs/AISettingsTab.vue
+++ b/src/components/settings/tabs/AISettingsTab.vue
@@ -587,14 +587,19 @@ async function onClearMemories() {
       <div class="groq-key-row">
         <div class="groq-key-input-wrapper">
           <input
-            :type="showGroqKey ? 'text' : 'password'"
             v-model="groqKeyInput"
+            :type="showGroqKey ? 'text' : 'password'"
             placeholder="gsk_..."
             class="groq-key-input"
             spellcheck="false"
             autocomplete="off"
-          />
-          <button class="key-toggle-btn" @click="showGroqKey = !showGroqKey" :title="showGroqKey ? 'Hide' : 'Show'">
+          >
+          <button
+            class="key-toggle-btn"
+            :aria-label="showGroqKey ? 'Hide API key' : 'Show API key'"
+            :title="showGroqKey ? 'Hide' : 'Show'"
+            @click="showGroqKey = !showGroqKey"
+          >
             <EyeOff v-if="showGroqKey" :size="14" />
             <Eye v-else :size="14" />
           </button>
@@ -745,7 +750,7 @@ async function onClearMemories() {
               step="1"
               :value="(settingsStore.aiMonthlyBudgetCents / 100).toFixed(0)"
               @change="(e: Event) => settingsStore.updateSetting('aiMonthlyBudgetCents', Math.round(parseFloat((e.target as HTMLInputElement).value || '0') * 100))"
-            />
+            >
             <span class="budget-hint">/ month (informational)</span>
           </div>
         </div>
@@ -1021,7 +1026,9 @@ async function onClearMemories() {
           <HeartPulse :size="14" :class="{ spinning: memoryHealthRunning }" />
           {{ memoryHealthRunning ? 'Checking...' : 'Run Quick Check' }}
         </button>
-        <p class="mh-hint">Full assessment available in AI Hub &gt; Memory tab.</p>
+        <p class="mh-hint">
+          Full assessment available in AI Hub &gt; Memory tab.
+        </p>
 
         <div class="ai-memory-debug" data-testid="ai-memory-debug">
           <div class="ai-memory-debug-header">
diff --git a/src/components/settings/tabs/AccountSettingsTab.vue b/src/components/settings/tabs/AccountSettingsTab.vue
index e709c08a5..8c3f53574 100644
--- a/src/components/settings/tabs/AccountSettingsTab.vue
+++ b/src/components/settings/tabs/AccountSettingsTab.vue
@@ -342,7 +342,7 @@ const handleChangePassword = async () => {
                 class="form-input"
                 placeholder="Enter new password"
               >
-              <button class="toggle-visibility" @click="showPassword = !showPassword">
+              <button class="toggle-visibility" :aria-label="showPassword ? 'Hide password' : 'Show password'" @click="showPassword = !showPassword">
                 <Eye v-if="!showPassword" :size="16" />
                 <EyeOff v-else :size="16" />
               </button>
@@ -504,7 +504,12 @@ const handleChangePassword = async () => {
             class="form-input"
             @focus="(e) => (e.target as HTMLInputElement).select()"
           >
-          <button class="toggle-visibility" :title="localApiCopied ? 'Copied!' : 'Copy'" @click="copyLocalApiToken">
+          <button
+            class="toggle-visibility"
+            :aria-label="localApiCopied ? 'Copied' : 'Copy API token'"
+            :title="localApiCopied ? 'Copied!' : 'Copy'"
+            @click="copyLocalApiToken"
+          >
             <Check v-if="localApiCopied" :size="16" />
             <Copy v-else :size="16" />
           </button>

From df7d5c0b250639c06b2fdd90d7a4e2e39ad6f399 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 16 Aug 2026 06:30:32 +0000
Subject: [PATCH 2/4] fix: add dynamic aria-labels to icon-only toggle buttons
 in settings

Adds missing ARIA labels to icon-only buttons in AccountSettingsTab (password visibility and API token copy) and AISettingsTab (Groq API key visibility). The labels dynamically change based on the toggle state to accurately reflect the action that will be performed. Also drops an unintended auto-formatting change in other components from CI failures.

Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>

From 404a0467dc9b244ab79ea8bba6640294f21f26a1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 16 Aug 2026 07:40:26 +0000
Subject: [PATCH 3/4] fix: add dynamic aria-labels to icon-only toggle buttons
 in settings

Adds missing ARIA labels to icon-only buttons in AccountSettingsTab (password visibility and API token copy) and AISettingsTab (Groq API key visibility). The labels dynamically change based on the toggle state to accurately reflect the action that will be performed.

Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>

From d07cbfac1339161ce0c27093ed91865bdf07e6ed Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 16 Aug 2026 08:59:16 +0000
Subject: [PATCH 4/4] fix: add dynamic aria-labels to icon-only toggle buttons
 in settings

Adds missing ARIA labels to icon-only buttons in AccountSettingsTab (password visibility and API token copy) and AISettingsTab (Groq API key visibility). The labels dynamically change based on the toggle state to accurately reflect the action that will be performed.

Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>