From debc873b26b2e3addd8f7627feaa6b4887606299 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sat, 21 Mar 2026 08:06:37 +0000
Subject: [PATCH] fix: BYOP button accessibility compliance

- Add aria-label and aria-haspopup='dialog' to BYOP trigger button
- Add aria-label to close button and textarea
- Add role='status' and aria-live='polite' to result container
- Add role='alert' to error messages for screen reader announcement
- Fix textarea focus style: visible outline instead of outline:none
- Update cache busters
---
 public/index.html |  4 ++--
 public/packets.js | 12 ++++++------
 public/style.css  |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6a03ad5d..5757f9e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="MeshCore Analyzer">
   <meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
-  <link rel="stylesheet" href="style.css?v=1774290000">
+  <link rel="stylesheet" href="style.css?v=1774080385">
   <link rel="stylesheet" href="home.css">
   <link rel="stylesheet" href="live.css?v=1774058575">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -83,7 +83,7 @@
   <script src="region-filter.js?v=1774292000"></script>
   <script src="app.js?v=1774052279"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774080038"></script>
+  <script src="packets.js?v=1774080385"></script>
   <script src="map.js?v=1774083841" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774075538" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774290000" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index ec0cff0d..80b515c5 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -370,7 +370,7 @@
         <h2>Latest Packets <span class="count">(${totalCount})</span></h2>
         <div>
           <button class="btn-icon" data-action="pkt-refresh" title="Refresh">🔄</button>
-          <button class="btn-icon" data-action="pkt-byop" title="Bring Your Own Packet">📦 BYOP</button>
+          <button class="btn-icon" data-action="pkt-byop" title="Bring Your Own Packet" aria-label="Bring Your Own Packet - paste raw packet hex for analysis" aria-haspopup="dialog">📦 BYOP</button>
         </div>
       </div>
       <div class="filter-bar" id="pktFilters">
@@ -1066,11 +1066,11 @@
     const overlay = document.createElement('div');
     overlay.className = 'modal-overlay';
     overlay.innerHTML = '<div class="modal byop-modal" role="dialog" aria-label="Decode a Packet" aria-modal="true">'
-      + '<div class="byop-header"><h3>📦 Decode a Packet</h3><button class="btn-icon byop-x" title="Close">✕</button></div>'
+      + '<div class="byop-header"><h3>📦 Decode a Packet</h3><button class="btn-icon byop-x" title="Close" aria-label="Close dialog">✕</button></div>'
       + '<p class="text-muted" style="margin:0 0 12px;font-size:.85rem">Paste raw hex bytes from your radio or MQTT feed:</p>'
-      + '<textarea id="byopHex" class="byop-input" placeholder="e.g. 15C31A8D4674FEAE37..." spellcheck="false"></textarea>'
+      + '<textarea id="byopHex" class="byop-input" aria-label="Packet hex data" placeholder="e.g. 15C31A8D4674FEAE37..." spellcheck="false"></textarea>'
       + '<button class="btn-primary byop-go" id="byopDecode" style="width:100%;margin:8px 0">Decode</button>'
-      + '<div id="byopResult"></div>'
+      + '<div id="byopResult" role="status" aria-live="polite"></div>'
       + '</div>';
     document.body.appendChild(overlay);
 
@@ -1113,7 +1113,7 @@
       const hex = textarea.value.trim().replace(/[\s\n]/g, '');
       const result = document.getElementById('byopResult');
       if (!hex) { result.innerHTML = '<p class="text-muted">Enter hex data</p>'; return; }
-      if (!/^[0-9a-fA-F]+$/.test(hex)) { result.innerHTML = '<p class="byop-err">Invalid hex — only 0-9 and A-F allowed</p>'; return; }
+      if (!/^[0-9a-fA-F]+$/.test(hex)) { result.innerHTML = '<p class="byop-err" role="alert">Invalid hex — only 0-9 and A-F allowed</p>'; return; }
       result.innerHTML = '<p class="text-muted">Decoding...</p>';
       try {
         const res = await fetch('/api/decode', {
@@ -1124,7 +1124,7 @@
         if (data.error) throw new Error(data.error);
         result.innerHTML = renderDecodedPacket(data.decoded, hex);
       } catch (e) {
-        result.innerHTML = '<p class="byop-err">❌ ' + e.message + '</p>';
+        result.innerHTML = '<p class="byop-err" role="alert">❌ ' + e.message + '</p>';
       }
     }
   }
diff --git a/public/style.css b/public/style.css
index 2e4baa4d..ad6a23e1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -919,7 +919,7 @@ button.ch-item.selected { background: var(--selected-bg); }
   border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1);
   color: var(--text);
 }
-.byop-input:focus { border-color: var(--accent); outline: none; }
+.byop-input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
 .byop-err { color: #ef4444; font-size: .85rem; }
 .byop-decoded { margin-top: 8px; }
 .byop-section { margin-bottom: 14px; }