diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..b95310b5
--- /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 a0cbd741..ac3ea11d 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 e709c08a..153ec417 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>