From f59b05c8c3f5f221dbdcd4bd01c7f4b0627b512a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 22 Jul 2026 05:26:53 +0000
Subject: [PATCH] feat(a11y): Add ARIA labels and states to icon-only toggle
 buttons

Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>
---
 src/components/layout/ViewControls.vue            |  4 ++++
 src/components/settings/tabs/AISettingsTab.vue    |  8 +++++++-
 .../settings/tabs/AccountSettingsTab.vue          | 15 +++++++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/ViewControls.vue b/src/components/layout/ViewControls.vue
index 84a61f274..d288b4381 100644
--- a/src/components/layout/ViewControls.vue
+++ b/src/components/layout/ViewControls.vue
@@ -6,6 +6,8 @@
       class="filter-toggle"
       :class="{ active: showFilters }"
       title="Toggle filters"
+      aria-label="Toggle filters"
+      :aria-expanded="showFilters"
       @click="showFilters = !showFilters"
     >
       <SlidersHorizontal :size="20" :stroke-width="1.5" />
@@ -17,6 +19,8 @@
       class="done-toggle"
       :class="{ active: hideDoneTasks }"
       :title="hideDoneTasks ? 'Show completed tasks' : 'Hide completed tasks'"
+      :aria-label="hideDoneTasks ? 'Show completed tasks' : 'Hide completed tasks'"
+      :aria-pressed="hideDoneTasks"
       @click="$emit('update:hideDoneTasks', !hideDoneTasks)"
     >
       <EyeOff v-if="hideDoneTasks" :size="20" :stroke-width="1.5" />
diff --git a/src/components/settings/tabs/AISettingsTab.vue b/src/components/settings/tabs/AISettingsTab.vue
index a0cbd741a..730d29541 100644
--- a/src/components/settings/tabs/AISettingsTab.vue
+++ b/src/components/settings/tabs/AISettingsTab.vue
@@ -594,7 +594,13 @@ async function onClearMemories() {
             spellcheck="false"
             autocomplete="off"
           />
-          <button class="key-toggle-btn" @click="showGroqKey = !showGroqKey" :title="showGroqKey ? 'Hide' : 'Show'">
+          <button
+            class="key-toggle-btn"
+            :title="showGroqKey ? 'Hide API key' : 'Show API key'"
+            :aria-label="showGroqKey ? 'Hide API key' : 'Show API key'"
+            :aria-pressed="showGroqKey"
+            @click="showGroqKey = !showGroqKey"
+          >
             <EyeOff v-if="showGroqKey" :size="14" />
             <Eye v-else :size="14" />
           </button>
diff --git a/src/components/settings/tabs/AccountSettingsTab.vue b/src/components/settings/tabs/AccountSettingsTab.vue
index e709c08a5..df6998167 100644
--- a/src/components/settings/tabs/AccountSettingsTab.vue
+++ b/src/components/settings/tabs/AccountSettingsTab.vue
@@ -342,7 +342,13 @@ const handleChangePassword = async () => {
                 class="form-input"
                 placeholder="Enter new password"
               >
-              <button class="toggle-visibility" @click="showPassword = !showPassword">
+              <button
+                class="toggle-visibility"
+                :title="showPassword ? 'Hide password' : 'Show password'"
+                :aria-label="showPassword ? 'Hide password' : 'Show password'"
+                :aria-pressed="showPassword"
+                @click="showPassword = !showPassword"
+              >
                 <Eye v-if="!showPassword" :size="16" />
                 <EyeOff v-else :size="16" />
               </button>
@@ -504,7 +510,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"
+            :title="localApiCopied ? 'Copied!' : 'Copy'"
+            :aria-label="localApiCopied ? 'Copied!' : 'Copy'"
+            @click="copyLocalApiToken"
+          >
             <Check v-if="localApiCopied" :size="16" />
             <Copy v-else :size="16" />
           </button>