From 41316cce01bf2e990a69ac030720240dd651ba7b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 23 Jul 2026 04:57:11 +0000
Subject: [PATCH] fix(a11y): add dynamic aria labels to icon-only toggle
 buttons in settings

Adds dynamic `:aria-label` bindings to the password and API key visibility toggle buttons, as well as the local API token copy button, to improve screen reader accessibility and convey the current action accurately.

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 000000000..b95310b55
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-14 - Dynamic ARIA labels for icon-only toggles
+**Learning:** For accessibility in icon-only buttons where the action changes dynamically (like showing/hiding a password or an API key), a static `aria-label` or `title` is insufficient and can be confusing. Screen readers will misinterpret the current state if it's just "Toggle visibility".
+**Action:** Always dynamically bind the `:aria-label` attribute using a ternary operator based on the toggle state (e.g., `:aria-label="showPassword ? 'Hide password' : 'Show password'"`) to ensure screen readers announce the correct current action.
diff --git a/src/components/settings/tabs/AISettingsTab.vue b/src/components/settings/tabs/AISettingsTab.vue
index a0cbd741a..ac3ea11dd 100644
--- a/src/components/settings/tabs/AISettingsTab.vue
+++ b/src/components/settings/tabs/AISettingsTab.vue
@@ -594,7 +594,7 @@ async function onClearMemories() {
             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'" @click="showGroqKey = !showGroqKey" :title="showGroqKey ? 'Hide' : 'Show'">
             <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..153ec4175 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,7 @@ 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 local API token' : 'Copy local API token'" :title="localApiCopied ? 'Copied!' : 'Copy'" @click="copyLocalApiToken">
             <Check v-if="localApiCopied" :size="16" />
             <Copy v-else :size="16" />
           </button>