From a3c0818fefb12d05e5962b582b7a3dc4d7dc3d79 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 10 May 2026 23:21:27 -0400
Subject: [PATCH] Fix: inspector empty states and diagnostic button
 accessibility

- Replace .empty-state (removed class) with TDS lt-empty-state--sm in
  both error branches of renderInspector() and loadInspector()
- Diagnostic run button: add aria-label, apply lt-btn TDS classes for
  consistent styling instead of custom btn-diag-only styling

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/inspector.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/templates/inspector.html b/templates/inspector.html
index 9a2325c..495b5df 100644
--- a/templates/inspector.html
+++ b/templates/inspector.html
@@ -320,7 +320,9 @@ function renderPanel(swName, idx) {
     _apiData.hosts && _apiData.hosts[d.lldp.system_name]);
   const diagHtml = hasDiagTarget ? `
     <div class="diag-bar">
-      <button class="btn-diag" data-action="run-diagnostic" data-sw="${escHtml(swName)}" data-idx="${idx}">Run Link Diagnostics</button>
+      <button class="btn-diag lt-btn lt-btn-secondary lt-btn-sm" data-action="run-diagnostic"
+              data-sw="${escHtml(swName)}" data-idx="${idx}"
+              aria-label="Run link diagnostics for port ${idx} on ${escHtml(swName)}">Run Diagnostics</button>
       <span class="diag-status" id="diag-status"></span>
     </div>
     <div class="diag-results" id="diag-results"></div>` : '';
@@ -433,7 +435,7 @@ function renderInspector(data) {
   }
 
   if (!Object.keys(switches).length) {
-    main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
+    main.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">⬡</div><div class="lt-empty-state-title">No switch data available</div><div class="lt-empty-state-body">Monitor may still be initialising.</div></div>';
     return;
   }
 
@@ -460,7 +462,7 @@ async function loadInspector() {
     renderInspector(data);
   } catch (e) {
     document.getElementById('inspector-main').innerHTML =
-      '<p class="empty-state">Failed to load inspector data.</p>';
+      '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✕</div><div class="lt-empty-state-title">Failed to load inspector data</div></div>';
     lt.toast.error('Failed to load inspector data');
   }
 }