From e7be9ed521348e2a9ccfdd30b320efb13ad7381c Mon Sep 17 00:00:00 2001
From: Abhi666-max <abhijeet666k@gmail.com>
Date: Wed, 17 Jun 2026 19:00:18 +0530
Subject: [PATCH 1/2] feat(a11y): add global focus-visible and aria-labels
 (#126)

---
 public/admin.html    |  8 ++++++--
 public/css/style.css | 14 ++++++++++++++
 public/js/admin.js   | 14 +++++++++-----
 public/js/app.js     |  1 +
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/public/admin.html b/public/admin.html
index 37f6b44..a24d6a3 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -75,8 +75,12 @@
           <span class="sidebar-url-label">Your public link</span>
           <div class="sidebar-url-row">
             <span class="sidebar-url-text" id="publicUrlText">conn.app/u/...</span>
-            <button class="sidebar-url-copy" id="copyPublicUrl" title="Copy link">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            <button class="sidebar-url-copy" id="copyPublicUrl" title="Copy link" aria-label="Copy public link">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
             </button>
           </div>
         </div>
diff --git a/public/css/style.css b/public/css/style.css
index 9feb664..8b6b22a 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -842,3 +842,17 @@ input, textarea, select {
     transition:.2s;
 }
 
+/* ─── Focus Indicator for Keyboard Navigation ─── */
+*:focus-visible {
+  outline: 2px solid #a855f7;
+  outline-offset: 2px;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid #a855f7;
+  outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/public/js/admin.js b/public/js/admin.js
index f2ac341..3b26986 100644
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -248,7 +248,9 @@
       return;
     }
 
-    list.innerHTML = categories.map(cat => `
+    list.innerHTML = categories
+      .map(
+        (cat) => `
       <div class="category-item" data-id="${cat.id}">
         <div class="category-drag-handle">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -258,20 +260,20 @@
           </svg>
         </div>
         <div class="category-icon" style="background: ${cat.color}20; color: ${cat.color}">
-          ${cat.icon || '📁'}
+          ${cat.icon || "📁"}
         </div>
         <div class="category-info">
           <div class="category-name">${escapeHtml(cat.name)}</div>
           <div class="category-count">${cat.link_count || 0} links</div>
         </div>
         <div class="category-actions">
-          <button class="btn btn-icon btn-secondary" data-action="edit" data-id="${cat.id}" title="Edit">
+          <button class="btn btn-icon btn-secondary" data-action="edit" data-id="${cat.id}" title="Edit" aria-label="Edit category">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
               <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
             </svg>
           </button>
-          <button class="btn btn-icon btn-danger" data-action="delete" data-id="${cat.id}" title="Delete">
+          <button class="btn btn-icon btn-danger" data-action="delete" data-id="${cat.id}" title="Delete" aria-label="Delete category">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <polyline points="3 6 5 6 21 6"/>
               <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
@@ -279,7 +281,9 @@
           </button>
         </div>
       </div>
-    `).join('');
+    `,
+      )
+      .join("");
 
     // Add event listeners using event delegation
     list.querySelectorAll('[data-action="edit"]').forEach(btn => {
diff --git a/public/js/app.js b/public/js/app.js
index 4e56d47..01ef5be 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -276,6 +276,7 @@
           btn.rel = 'noopener noreferrer';
           btn.className = 'social-icon-btn';
           btn.title = platform.charAt(0).toUpperCase() + platform.slice(1);
+          btn.setAttribute("aria-label", `Visit our ${platform}`);
           btn.innerHTML = SOCIAL_ICONS[platform];
           socialsRow.appendChild(btn);
         });

From 161e5dc40cc6048d82d87afb096483b4bd9d1d59 Mon Sep 17 00:00:00 2001
From: Abhi666-max <abhijeet666k@gmail.com>
Date: Wed, 17 Jun 2026 19:26:18 +0530
Subject: [PATCH 2/2] feat(a11y): add focus indicator and ensure aria-labels

---
 public/css/home.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/css/home.css b/public/css/home.css
index e3411bb..4fe5a44 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -2040,5 +2040,8 @@
   }
 }
 
-
+*:focus-visible {
+  outline: 2px solid #a855f7 !important;
+  outline-offset: 2px;
+}