From 8e1e8c1275fcd11efc24753da96e22091cd30f23 Mon Sep 17 00:00:00 2001
From: Siddh2024 <siddh.sharma.247@gmail.com>
Date: Sat, 11 Jul 2026 18:02:47 +0530
Subject: [PATCH] fix: add aria-labels to icon-only buttons for accessibility

Several icon-only buttons (toggle visibility, settings) lacked aria-label
attributes, making them inaccessible to screen readers.

Adds descriptive aria-label to:
- Toggle key visibility button in popup
- Settings button in popup header
- Toggle visibility buttons in options page

Fixes #865
---
 src/options.html | 12 ++++++++++--
 src/popup.html   |  8 ++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/options.html b/src/options.html
index 99a27e1a..f4ec8899 100644
--- a/src/options.html
+++ b/src/options.html
@@ -161,7 +161,11 @@ <h2 class="section-title">
           <p class="form-hint">Required for AI summarization</p>
           <div class="input-row">
             <input type="password" id="openai-key" class="form-input" placeholder="sk-..." />
-            <button class="toggle-vis" data-target="openai-key">
+            <button
+              class="toggle-vis"
+              data-target="openai-key"
+              aria-label="Toggle API key visibility"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
@@ -188,7 +192,11 @@ <h2 class="section-title">
           <p class="form-hint">Required for Speech-to-Text transcription</p>
           <div class="input-row">
             <input type="password" id="elevenlabs-key" class="form-input" placeholder="sk_..." />
-            <button class="toggle-vis" data-target="elevenlabs-key">
+            <button
+              class="toggle-vis"
+              data-target="elevenlabs-key"
+              aria-label="Toggle API key visibility"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
diff --git a/src/popup.html b/src/popup.html
index 324ef427..3393a517 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -40,7 +40,9 @@ <h1 class="setup-title">Initialize Copilot</h1>
           <label class="setup-label">OpenAI API Key</label>
           <div class="input-group">
             <input type="password" id="api-key-input" class="setup-input" placeholder="sk-..." />
-            <button id="toggle-key" class="toggle-btn">👁</button>
+            <button id="toggle-key" class="toggle-btn" aria-label="Toggle API key visibility">
+              👁
+            </button>
           </div>
 
           <button id="save-keys" class="setup-btn">
@@ -81,7 +83,9 @@ <h1 class="setup-title">Initialize Copilot</h1>
             </div>
           </div>
         </div>
-        <button id="settings-btn" class="icon-btn" title="Settings">⚙️</button>
+        <button id="settings-btn" class="icon-btn" title="Settings" aria-label="Settings">
+          ⚙️
+        </button>
       </header>
 
       <!-- Content Sections -->