From 7590ea6a159cafb612471f86a5102c6764214a0a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 4 Jul 2026 06:31:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20icon-only=20buttons]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added missing aria-labels to the refresh, close and copy buttons in the VaultDashboard.tsx file. Also ensure that the copy button toggles between "Copy share link" and "Link copied" for better accessibility.

Co-authored-by: secrooq <81346684+secrooq@users.noreply.github.com>
---
 .jules/palette.md                 | 4 ++++
 src/components/VaultDashboard.tsx | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..cefaadc
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2026-07-04 - Dynamic ARIA Labels for Toggle States
+**Learning:** Interactive elements which toggle states (e.g. copy buttons that show a checkmark) require their `aria-label` to dynamically update to reflect the current state to screen readers.
+**Action:** Always use dynamic `aria-label={state ? 'Copied' : 'Copy'}` syntax for state-toggling buttons.
diff --git a/src/components/VaultDashboard.tsx b/src/components/VaultDashboard.tsx
index f603d2f..e689fbf 100644
--- a/src/components/VaultDashboard.tsx
+++ b/src/components/VaultDashboard.tsx
@@ -516,7 +516,7 @@ export default function VaultDashboard() {
             />
           </div>
 
-          <button onClick={loadFiles} className="text-slate-400 hover:text-white transition-colors shrink-0 ml-auto md:ml-0" title="Refresh index">
+          <button onClick={loadFiles} className="text-slate-400 hover:text-white transition-colors shrink-0 ml-auto md:ml-0" title="Refresh index" aria-label="Refresh index">
             <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
           </button>
         </div>
@@ -635,6 +635,7 @@ export default function VaultDashboard() {
                 onClick={() => setSharingFile(null)} 
                 disabled={isPreparingShare}
                 className="text-slate-400 hover:text-white transition-colors"
+                aria-label="Close share dialog"
               >
                 <X className="w-4 h-4" />
               </button>
@@ -777,6 +778,7 @@ export default function VaultDashboard() {
                           setTimeout(() => setCopied(false), 2000);
                         }}
                         className="px-3 py-2 rounded-lg bg-[#d4af37] hover:bg-[#e5c158] text-[#141310] border border-[#d4af37]/20 transition-all flex items-center justify-center shrink-0"
+                        aria-label={copied ? "Link copied" : "Copy share link"}
                       >
                         {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
                       </button>