feat(viewer): compact status and severity table icons

bible-local/architecture/data-model.md

@@ -43,7 +43,8 @@ For array sections:
 
 ## Special Field Handling
 
-- `status` is rendered as a colored badge
+- `status` is rendered as a colored badge; in table sections it may collapse to an icon-only presentation column
+- `severity` may render as both its source text field and a separate icon-only leading table column
 - arrays such as `mac_addresses` may be rendered as line-separated values or badges inside one cell
 - nested values such as `status_history` may be rendered in expandable detail blocks inside one cell
 

bible-local/architecture/runtime-flows.md

@@ -15,7 +15,16 @@
 1. read the raw `status` value from the payload
 2. normalize only for presentation matching (`OK`, `Warning`, `Critical`, `Unknown`, `Empty`)
 3. apply status badge class
-4. do not change the raw value shown to the user
+4. in dense table layouts, render `status` as an icon-only column with an empty header when it improves scanning
+5. preserve the raw status value in accessible labeling even when the visible cell shows only a pictogram
+
+## Severity Presentation Flow
+
+1. read the raw `severity` value from the payload
+2. map the raw value only to a presentation glyph/color class
+3. when a table includes `severity`, add a leftmost icon-only column for it
+4. keep the original textual `severity` column visible in the table
+5. preserve the raw severity value in accessible labeling for the pictogram cell
 
 ## Unknown Field Invariant
 

bible-local/architecture/ui-information-architecture.md

@@ -60,4 +60,6 @@ Preferred order:
 
 - tables must remain readable on desktop and mobile
 - section navigation must work without JavaScript
-- color must not be the only status indicator; always show text
+- color must not be the only status indicator; pair it with a shape or glyph
+- table `status` columns may use icon-only cells and an empty header when that improves scanability, but the raw status value must remain available via accessible labeling
+- table sections with `severity` may add a separate leftmost icon-only column for fast scanning while keeping the textual `severity` field visible

bible-local/decisions/2026-04-22-status-columns-use-icon-only-presentation.md

@@ -0,0 +1,31 @@
+# Decision: Status Table Columns Use Icon-Only Presentation
+
+**Date:** 2026-04-22
+**Status:** active
+
+## Context
+
+Dense hardware tables frequently repeat the same `status` values.
+
+Showing a textual `status` header and textual badges in every row wastes horizontal space and reduces scan speed, especially in sensor subtables.
+
+The viewer still needs to keep status meaning explicit and avoid relying on color alone.
+
+## Decision
+
+Table columns named `status` render as compact icon-only columns.
+
+This includes:
+
+- an empty visible header cell for the `status` column
+- a minimal-width table column sized for the pictogram
+- a glyph plus color to distinguish state
+- accessible labeling that preserves the raw status value without showing repeated text in the cell
+
+Object sections may continue to show status as a regular field value.
+
+## Consequences
+
+- Table layouts gain more room for source fields such as `name`, `model`, and `location`.
+- Status meaning remains available to assistive technologies even when the visible cell is icon-only.
+- Future table UI work should keep `status` compact instead of reintroducing wide text badges by default.

viewer/render.go

@@ -49,6 +49,7 @@ var hiddenTableFields = map[string]struct{}{
 const vendorDeviceIDField = "ven:dev"
 
 var commonPreferredColumns = []string{
+	"severity_icon",
 	"status",
 	"slot",
 	"location",
@@ -333,6 +334,9 @@ func collectColumns(section string, rows []map[string]any) []string {
 			}
 			seen[key] = struct{}{}
 		}
+		if hasSeverity(row) {
+			seen["severity_icon"] = struct{}{}
+		}
 		if hasVendorDeviceID(row) {
 			seen[vendorDeviceIDField] = struct{}{}
 		}
@@ -494,6 +498,9 @@ func formatStringValue(value string) string {
 }
 
 func formatRowValue(column string, row map[string]any) string {
+	if column == "severity_icon" {
+		return strings.TrimSpace(formatValue(row["severity"]))
+	}
 	if column == vendorDeviceIDField {
 		return formatVendorDeviceID(row)
 	}
@@ -589,6 +596,10 @@ func hasVendorDeviceID(value map[string]any) bool {
 	return formatVendorDeviceID(value) != ""
 }
 
+func hasSeverity(value map[string]any) bool {
+	return strings.TrimSpace(formatValue(value["severity"])) != ""
+}
+
 func isHiddenTableField(section string, key string) bool {
 	if isHiddenField(key) {
 		return true

viewer/render_test.go

@@ -47,6 +47,18 @@ func TestRenderHTMLIncludesKnownSectionsAndFields(t *testing.T) {
 			t.Fatalf("expected rendered html to contain %q", needle)
 		}
 	}
+	for _, needle := range []string{
+		`<th class="status-column" aria-label="status"></th>`,
+		`<td class="status-column">`,
+		`<span class="status-badge status-ok" role="img" aria-label="OK" title="OK"></span>`,
+	} {
+		if !strings.Contains(text, needle) {
+			t.Fatalf("expected rendered html to contain %q", needle)
+		}
+	}
+	if strings.Contains(text, "<th>status</th>") {
+		t.Fatalf("expected status table headers to be rendered without visible text")
+	}
 
 	if strings.Contains(text, "2026-03-15T12:00:00Z") {
 		t.Fatalf("expected RFC3339 timestamp to be rendered in human-readable form")
@@ -266,6 +278,12 @@ func TestRenderHTMLGroupsPCIeDevicesByClass(t *testing.T) {
 	if strings.Contains(text, "<th>device_class</th>") {
 		t.Fatalf("expected device_class column to be hidden from PCIe tables")
 	}
+	if !strings.Contains(text, `<th class="status-column" aria-label="status"></th>`) {
+		t.Fatalf("expected grouped PCIe tables to render compact status header cells")
+	}
+	if !strings.Contains(text, `<span class="status-badge status-warning" role="img" aria-label="Warning" title="Warning"></span>`) {
+		t.Fatalf("expected grouped PCIe tables to render icon-only status cells with accessible labels")
+	}
 	if strings.Index(text, "<h3>Display controller</h3>") > strings.Index(text, "<h3>Network controller</h3>") {
 		t.Fatalf("expected PCIe class groups to be sorted by device_class")
 	}
@@ -307,10 +325,17 @@ func TestRenderHTMLAddsSeverityFilterForEventLogs(t *testing.T) {
 		`<option value="info">Info</option>`,
 		`data-severity="critical"`,
 		`data-severity="info"`,
+		`<th class="status-column" aria-label="severity"></th>`,
+		`<span class="status-badge severity-info" role="img" aria-label="Info" title="Info"></span>`,
+		`<span class="status-badge severity-critical" role="img" aria-label="Critical" title="Critical"></span>`,
+		`<th>severity</th>`,
 		"/static/view.js",
 	} {
 		if !strings.Contains(text, needle) {
 			t.Fatalf("expected rendered html to contain %q", needle)
 		}
 	}
+	if strings.Contains(text, "<th>severity_icon</th>") {
+		t.Fatalf("expected synthetic severity icon column header to remain visually empty")
+	}
 }

web/embed.go

@@ -12,8 +12,9 @@ import (
 var content embed.FS
 
 var pageTemplate = template.Must(template.New("view.html").Funcs(template.FuncMap{
-	"statusClass": statusClass,
+	"statusClass":   statusClass,
-	"joinLines":   joinLines,
+	"severityClass": severityClass,
+	"joinLines":     joinLines,
 }).ParseFS(content, "templates/view.html"))
 
 var uploadTemplate = template.Must(template.New("upload.html").ParseFS(content, "templates/upload.html"))
@@ -59,6 +60,23 @@ func statusClass(value string) string {
 	}
 }
 
+func severityClass(value string) string {
+	switch strings.ToUpper(strings.TrimSpace(value)) {
+	case "INFO", "INFORMATIONAL":
+		return "severity-info"
+	case "WARNING", "WARN":
+		return "severity-warning"
+	case "ERROR":
+		return "severity-error"
+	case "CRITICAL", "FATAL":
+		return "severity-critical"
+	case "DEBUG", "TRACE":
+		return "severity-debug"
+	default:
+		return "severity-unknown"
+	}
+}
+
 func joinLines(value string) []string {
 	if strings.TrimSpace(value) == "" {
 		return nil

web/static/view.css

@@ -1,20 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');
+
 :root {
-  --bg:          #ffffff;
+  --bg: #f6f7fb;
-  --surface:     #ffffff;
+  --surface: #ffffff;
-  --surface-2:   #f9fafb;
+  --surface-2: #f2f4f8;
-  --border:      rgba(34, 36, 38, 0.15);
+  --border: #d9dee7;
-  --border-lite: rgba(34, 36, 38, 0.1);
+  --border-lite: #e8ecf2;
-  --ink:         rgba(0, 0, 0, 0.87);
+  --ink: #1d2433;
-  --muted:       rgba(0, 0, 0, 0.6);
+  --muted: #677287;
-  --accent:      #2185d0;
+  --accent: #2f6fed;
-  --accent-dark: #1678c2;
+  --danger-bg: #fff4f3;
-  --accent-bg:   #dff0ff;
+  --danger-border: #f2c3bc;
-  --crit-border: #e0b4b4;
+  --danger-text: #8b2f23;
-  --ok-bg:       #fcfff5; --ok-fg:      #2c662d;
+  --shadow: 0 10px 30px rgba(18, 30, 55, 0.06);
-  --warn-bg:     #fffaf3; --warn-fg:    #573a08;
-  --crit-bg:     #fff6f6; --crit-fg:    #9f3a38;
-  --unknown-bg:  #f9fafb; --unknown-fg: rgba(0, 0, 0, 0.5);
-  --empty-bg:    #f9fafb; --empty-fg:   rgba(0, 0, 0, 0.4);
 }
 
 * {
@@ -23,287 +21,264 @@
 
 body {
   margin: 0;
-  background: var(--bg);
+  background:
+    radial-gradient(circle at top left, rgba(47, 111, 237, 0.09), transparent 32%),
+    linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
   color: var(--ink);
-  font: 14px/1.5 Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-family: "Public Sans", "Segoe UI", sans-serif;
 }
 
-/* ── Header ──────────────────────────────────────── */
-
 .page-header {
-  background: #1b1c1d;
-  padding: 14px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
+  padding: 18px 24px;
+  border-bottom: 1px solid rgba(217, 222, 231, 0.9);
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(14px);
+  position: sticky;
+  top: 0;
+  z-index: 20;
 }
 
 .page-header h1 {
   margin: 0;
-  font-size: 18px;
+  font-size: clamp(22px, 3vw, 30px);
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.9);
+  letter-spacing: -0.03em;
 }
 
-/* ── Main layout ─────────────────────────────────── */
-
 .header-actions {
   display: flex;
   align-items: center;
+  gap: 10px;
 }
 
 .header-action {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 38px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(47, 111, 237, 0.18);
+  background: rgba(47, 111, 237, 0.08);
+  color: var(--accent);
   text-decoration: none;
-  border-radius: 4px;
+  font-weight: 600;
-  background: rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.85);
-  padding: 6px 14px;
-  font-size: 13px;
-  font-weight: 700;
-  white-space: nowrap;
-  transition: background 0.1s ease;
 }
 
 .header-action:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(47, 111, 237, 0.14);
 }
 
 .page-main {
-  width: min(1500px, calc(100vw - 48px));
+  width: min(1480px, calc(100vw - 40px));
-  margin: 28px auto 56px;
+  margin: 26px auto 40px;
 }
 
-/* ── Meta-panel and upload — классические карточки ── */
-
-.empty-panel,
-.meta-panel,
 .notice-panel,
-.upload-panel {
+.meta-panel,
-  background: var(--surface);
+.empty-panel,
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-  overflow: hidden;
-  margin-bottom: 28px;
-}
-
-.empty-panel h2,
-.meta-panel h2,
-.notice-panel h2,
-.upload-panel h2 {
-  display: block;
-  margin: 0;
-  padding: 13px 16px;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--border);
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--ink);
-}
-
-.empty-panel p,
-.notice-panel p,
-.upload-panel p {
-  margin: 0;
-  padding: 12px 16px 0;
-  color: var(--muted);
-}
-
-.empty-panel p:last-child {
-  padding-bottom: 16px;
-}
-
-/* ── Section cards — heading + table, без обёртки ─── */
-
 .section-card {
-  background: transparent;
+  background: rgba(255, 255, 255, 0.92);
-  border: none;
+  border: 1px solid rgba(217, 222, 231, 0.92);
-  box-shadow: none;
+  box-shadow: var(--shadow);
-  overflow: visible;
+  border-radius: 18px;
-  margin-bottom: 32px;
 }
 
+.notice-panel,
+.meta-panel,
+.empty-panel {
+  padding: 20px 22px;
+  margin-bottom: 18px;
+}
+
+.notice-panel h2,
+.meta-panel h2,
+.empty-panel h2,
 .section-card h2 {
-  display: block;
+  margin: 0 0 14px;
-  margin: 0 0 10px;
-  padding: 0;
-  background: transparent;
-  border: none;
   font-size: 18px;
   font-weight: 700;
-  color: rgba(0, 0, 0, 0.87);
+  letter-spacing: -0.02em;
 }
 
-/* таблица внутри section-card получает свой бордер */
+.notice-panel p,
-.section-card .table-wrap {
+.empty-panel p {
-  border: 1px solid var(--border);
+  margin: 0;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-  overflow-x: auto;
-}
-
-.section-card .kv-table {
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-}
-
-/* ── Upload ──────────────────────────────────────── */
-
-.upload-panel {
-  width: min(520px, 100%);
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.upload-dropzone {
-  display: block;
-  margin: 12px 16px 0;
-  border: 1px dashed var(--border);
-  border-radius: 4px;
-  padding: 16px;
-  background: var(--surface-2);
-  cursor: pointer;
-  transition: border-color 0.1s ease, background 0.1s ease;
-}
-
-.upload-dropzone:hover {
-  border-color: var(--accent);
-  background: var(--accent-bg);
-}
-
-.upload-dropzone input {
-  display: block;
-  width: 100%;
-  margin-bottom: 12px;
-  font: inherit;
-  color: var(--ink);
-}
-
-.upload-eyebrow {
-  display: block;
-  margin-bottom: 4px;
-  color: var(--accent);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.upload-dropzone strong {
-  display: block;
-  margin-bottom: 3px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--ink);
-}
-
-.upload-dropzone span:last-child {
   color: var(--muted);
-  font-size: 13px;
+  line-height: 1.55;
 }
 
-.upload-actions {
-  padding: 12px 16px 16px;
-}
-
-.upload-actions button {
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  padding: 8px 18px;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background 0.1s ease;
-}
-
-.upload-actions button:hover {
-  background: var(--accent-dark);
-}
-
-.upload-actions button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* ── Error ───────────────────────────────────────── */
-
-.error-box {
-  margin: 12px 16px;
-  border: 1px solid var(--crit-border);
-  border-radius: 4px;
-  padding: 10px 14px;
-  background: var(--crit-bg);
-  color: var(--crit-fg);
-}
-
-/* ── Sections grid ───────────────────────────────── */
-
 .sections-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0 32px;
+  gap: 18px;
 }
 
-.section-card-half { grid-column: span 1; }
+.section-card {
-.section-card-full { grid-column: 1 / -1; }
+  overflow: hidden;
+}
 
-/* ── Tables ──────────────────────────────────────── */
+.section-card h2 {
+  padding: 18px 20px 14px;
+}
 
-.kv-table,
+.section-card-half {
-.data-table {
+  grid-column: span 1;
+}
+
+.section-card-full {
+  grid-column: 1 / -1;
+}
+
+.section-card .kv-table,
+.section-card .table-wrap,
+.meta-panel .kv-table {
   width: 100%;
+}
+
+.section-card .table-wrap,
+.meta-panel .kv-table {
+  border-top: 1px solid var(--border-lite);
+}
+
+table {
   border-collapse: collapse;
-  font-size: 14px;
-  background: var(--surface);
 }
 
 .kv-table th,
 .kv-table td,
 .data-table th,
 .data-table td {
-  vertical-align: top;
+  border-bottom: 1px solid var(--border-lite);
-  text-align: left;
-  border-top: 1px solid var(--border-lite);
   padding: 11px 14px;
+  vertical-align: top;
 }
 
-.kv-table tr:first-child th,
+.kv-table tr:last-child th,
-.kv-table tr:first-child td,
+.kv-table tr:last-child td,
-.data-table tr:first-child th,
+.data-table tbody tr:last-child td {
-.data-table tr:first-child td {
+  border-bottom: none;
-  border-top: 0;
 }
 
 .kv-table th,
 .data-table th {
-  background: var(--surface-2);
+  text-align: left;
-  color: var(--ink);
   font-weight: 700;
-  white-space: nowrap;
+  color: var(--ink);
-  border-bottom: 1px solid var(--border-lite);
+  background: rgba(242, 244, 248, 0.72);
-  border-top: 0;
 }
 
 .kv-table th {
-  width: 1%;
+  width: 240px;
+}
+
+.kv-table td,
+.data-table td {
+  color: var(--ink);
+  line-height: 1.45;
+}
+
+.data-table {
+  width: 100%;
+  min-width: 680px;
+}
+
+.data-table tbody tr:nth-child(even) {
+  background: rgba(246, 247, 251, 0.55);
 }
 
 .data-table tbody tr:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: rgba(47, 111, 237, 0.06);
-  transition: background 0.1s ease;
 }
 
-/* table-wrap уже получил border в .section-card .table-wrap */
+.error-box {
+  margin-top: 18px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 1px solid var(--danger-border);
+  background: var(--danger-bg);
+  color: var(--danger-text);
+}
+
+.upload-shell {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+}
+
+.upload-panel {
+  width: min(620px, 100%);
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: 22px;
+  border: 1px solid rgba(217, 222, 231, 0.92);
+  box-shadow: 0 24px 60px rgba(16, 27, 49, 0.12);
+  padding: 28px 28px 24px;
+}
+
+.upload-panel h1 {
+  margin: 0 0 10px;
+  font-size: clamp(28px, 4vw, 36px);
+  letter-spacing: -0.04em;
+}
+
+.upload-panel p {
+  margin: 0 0 20px;
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.upload-form {
+  display: grid;
+  gap: 14px;
+}
+
+.upload-form label {
+  display: grid;
+  gap: 7px;
+  font-weight: 600;
+}
+
+.upload-form input[type="file"] {
+  border: 1px dashed var(--border);
+  border-radius: 14px;
+  padding: 16px;
+  background: var(--surface-2);
+  color: var(--muted);
+}
+
+.upload-form button {
+  justify-self: start;
+  min-height: 42px;
+  padding: 0 18px;
+  border: none;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #2f6fed 0%, #1746b3 100%);
+  color: #fff;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.upload-form button:hover {
+  filter: brightness(1.05);
+}
+
+.upload-error {
+  margin: 0 0 18px;
+}
+
+/* table-wrap already gets border from .section-card .table-wrap */
 .table-wrap {
   overflow-x: auto;
 }
 
-/* для meta-panel table-wrap без дублирования бордера */
+/* meta-panel table-wrap without duplicate border */
 .meta-panel .table-wrap {
   border: none;
   box-shadow: none;
@@ -365,6 +340,14 @@ body {
   color: var(--muted);
 }
 
+.data-table .status-column {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 /* ── Status ──────────────────────────────────────── */
 
 .status-badge {
@@ -385,6 +368,13 @@ body {
 .status-unknown::before  { content: '?'; color: rgba(0, 0, 0, 0.4); }
 .status-empty::before    { content: '–'; color: rgba(0, 0, 0, 0.3); }
 
+.severity-info::before     { content: 'i'; color: #2185d0; }
+.severity-warning::before  { content: '!'; color: #f2711c; }
+.severity-error::before    { content: '×'; color: #db2828; }
+.severity-critical::before { content: '✗'; color: #a33333; }
+.severity-debug::before    { content: '•'; color: rgba(0, 0, 0, 0.55); }
+.severity-unknown::before  { content: '?'; color: rgba(0, 0, 0, 0.4); }
+
 /* ── Responsive ──────────────────────────────────── */
 
 @media (max-width: 720px) {
@@ -409,14 +399,4 @@ body {
   .section-card-full {
     grid-column: auto;
   }
-
-  .table-toolbar {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .table-severity-filter {
-    min-width: 0;
-    width: 100%;
-  }
 }

web/templates/view.html

@@ -81,7 +81,7 @@
             <thead>
               <tr>
                 {{ range .Columns }}
-                <th>{{ . }}</th>
+                <th{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
                 {{ end }}
               </tr>
             </thead>
@@ -90,10 +90,12 @@
               <tr data-severity-row="true" data-severity="{{ .Severity }}">
                 {{ $row := . }}
                 {{ range $section.Columns }}
-                <td>
+                <td{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}>
                   {{ $value := index $row.Cells . }}
                   {{ if eq . "status" }}
-                  <span class="status-badge {{ statusClass $value }}">{{ $value }}</span>
+                  <span class="status-badge {{ statusClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $value }}"></span>
+                  {{ else if eq . "severity_icon" }}
+                  <span class="status-badge {{ severityClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $value }}"></span>
                   {{ else }}
                     {{ range joinLines $value }}
                     <div>{{ . }}</div>
@@ -134,7 +136,7 @@
               <thead>
                 <tr>
                   {{ range .Columns }}
-                  <th>{{ . }}</th>
+                  <th{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
                   {{ end }}
                 </tr>
               </thead>
@@ -143,10 +145,12 @@
                 <tr data-severity-row="true" data-severity="{{ .Severity }}">
                   {{ $row := . }}
                   {{ range $group.Columns }}
-                  <td>
+                  <td{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}>
                     {{ $value := index $row.Cells . }}
                     {{ if eq . "status" }}
-                    <span class="status-badge {{ statusClass $value }}">{{ $value }}</span>
+                    <span class="status-badge {{ statusClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $value }}"></span>
+                    {{ else if eq . "severity_icon" }}
+                    <span class="status-badge {{ severityClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $value }}"></span>
                     {{ else }}
                       {{ range joinLines $value }}
                       <div>{{ . }}</div>