From 4b0cf8d7079d3ee857289695492fdc4c56a8c5b9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 2 Jun 2026 09:11:02 +0000
Subject: [PATCH] a11y: add ARIA semantics and reduced-motion support to web
 component

The embeddable calculator had no accessibility affordances. This adds:

- aria-live="polite" region on the results panel so screen readers
  announce VM sizing/cost results when the user clicks Calculate
  (results were previously injected silently).
- aria-hidden="true" on all decorative emoji (header, section labels,
  card titles, placeholder) so assistive tech no longer reads them out
  (e.g. "magnifying glass tilted left").
- A clean aria-label and type="button" on the Calculate button.
- prefers-reduced-motion media query that disables hover transforms,
  transitions, and animations for users who request it.

No calculation logic changes; all 65 tests still pass.
---
 hailbytes-vuln-calculator.js | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/hailbytes-vuln-calculator.js b/hailbytes-vuln-calculator.js
index 1d2c2aa..c476eb1 100644
--- a/hailbytes-vuln-calculator.js
+++ b/hailbytes-vuln-calculator.js
@@ -546,6 +546,12 @@ const STYLES = `
     border-left: 3px solid var(--accent);
   }
   .rec-list li::before { content: '→'; color: var(--accent); flex-shrink: 0; }
+
+  /* Respect users who prefer reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { transition: none !important; animation: none !important; }
+    .calc-btn:hover { transform: none; }
+  }
 `;
 
 // ─── Template ─────────────────────────────────────────────────────────────────
@@ -553,7 +559,7 @@ const STYLES = `
 const TMPL = document.createElement('template');
 TMPL.innerHTML = `<style>${STYLES}</style>
 <div class="header">
-  <h1><span class="icon">🔍</span> Vulnerability Scanner Infrastructure Calculator <span class="hailbytes-badge">HailBytes</span></h1>
+  <h1><span class="icon" aria-hidden="true">🔍</span> Vulnerability Scanner Infrastructure Calculator <span class="hailbytes-badge">HailBytes</span></h1>
   <p>Size your scanning infrastructure — estimate VM requirements, cloud costs, and ROI entirely in the browser</p>
 </div>
 
@@ -562,7 +568,7 @@ TMPL.innerHTML = `<style>${STYLES}</style>
   <div class="form-panel">
 
     <div>
-      <div class="section-label">🎯 Target</div>
+      <div class="section-label"><span aria-hidden="true">🎯</span> Target</div>
       <div class="field">
         <label class="field-label" for="target_hosts">Target Hosts</label>
         <input type="number" id="target_hosts" min="1" max="50000" value="1000" placeholder="e.g. 1000">
@@ -570,7 +576,7 @@ TMPL.innerHTML = `<style>${STYLES}</style>
     </div>
 
     <div>
-      <div class="section-label">⚡ Scan Config</div>
+      <div class="section-label"><span aria-hidden="true">⚡</span> Scan Config</div>
       <div class="field" style="margin-bottom:8px">
         <label class="field-label" for="scan_intensity">Intensity</label>
         <select id="scan_intensity">
@@ -596,7 +602,7 @@ TMPL.innerHTML = `<style>${STYLES}</style>
     </div>
 
     <div>
-      <div class="section-label">🛠️ Scanning Tools</div>
+      <div class="section-label"><span aria-hidden="true">🛠️</span> Scanning Tools</div>
       <div class="cb-list" id="tools-list">
         <label class="cb-item checked">
           <input type="checkbox" name="tool" value="hailbytes_asm" checked>HailBytes ASM (free, self-hosted)
@@ -614,7 +620,7 @@ TMPL.innerHTML = `<style>${STYLES}</style>
     </div>
 
     <div>
-      <div class="section-label">📋 Compliance</div>
+      <div class="section-label"><span aria-hidden="true">📋</span> Compliance</div>
       <div class="cb-list" id="compliance-list">
         <label class="cb-item"><input type="checkbox" name="compliance" value="pci">PCI DSS</label>
         <label class="cb-item"><input type="checkbox" name="compliance" value="hipaa">HIPAA</label>
@@ -624,13 +630,13 @@ TMPL.innerHTML = `<style>${STYLES}</style>
       </div>
     </div>
 
-    <button class="calc-btn" id="calc-btn">⚡ Calculate Infrastructure</button>
+    <button class="calc-btn" id="calc-btn" type="button" aria-label="Calculate Infrastructure"><span aria-hidden="true">⚡</span> Calculate Infrastructure</button>
   </div>
 
   <!-- RESULTS PANEL -->
-  <div class="results-panel" id="results-panel">
+  <div class="results-panel" id="results-panel" role="region" aria-label="Infrastructure sizing results" aria-live="polite" aria-atomic="true">
     <div class="results-placeholder" id="placeholder">
-      <div class="big-icon">🖥️</div>
+      <div class="big-icon" aria-hidden="true">🖥️</div>
       <p>Configure your scan parameters and click <strong>Calculate Infrastructure</strong> to size your VM requirements.</p>
     </div>
     <div id="results-content" style="display:none">
@@ -715,7 +721,7 @@ class HailbytesVulnCalculator extends HTMLElement {
 
     const roiCard = r.has_asm ? `
       <div class="card roi-card full-width">
-        <div class="card-title"><span class="icon">💰</span> ROI: Self-Managed vs HailBytes ASM Managed Service</div>
+        <div class="card-title"><span class="icon" aria-hidden="true">💰</span> ROI: Self-Managed vs HailBytes ASM Managed Service</div>
         <div class="roi-compare">
           <div class="roi-side">
             <h4>Self-Managed (Cloud + Tools)</h4>
@@ -747,7 +753,7 @@ class HailbytesVulnCalculator extends HTMLElement {
     cards.innerHTML = `
       <!-- VM Requirements -->
       <div class="card">
-        <div class="card-title"><span class="icon">🖥️</span> VM Requirements</div>
+        <div class="card-title"><span class="icon" aria-hidden="true">🖥️</span> VM Requirements</div>
         <div class="metric-row">
           <span class="metric-label">CPU Cores</span>
           <span class="metric-value accent">${vm.cpu_cores} cores</span>
@@ -773,7 +779,7 @@ class HailbytesVulnCalculator extends HTMLElement {
 
       <!-- Timing -->
       <div class="card">
-        <div class="card-title"><span class="icon">⏱️</span> Scan Timing</div>
+        <div class="card-title"><span class="icon" aria-hidden="true">⏱️</span> Scan Timing</div>
         <div class="metric-row">
           <span class="metric-label">Total scan time</span>
           <span class="metric-value">${fmtMin(t.total_scan_time_minutes)}</span>
@@ -798,7 +804,7 @@ class HailbytesVulnCalculator extends HTMLElement {
 
       <!-- Infrastructure Cost -->
       <div class="card">
-        <div class="card-title"><span class="icon">☁️</span> Compute Cost</div>
+        <div class="card-title"><span class="icon" aria-hidden="true">☁️</span> Compute Cost</div>
         <div class="metric-row">
           <span class="metric-label">AWS (monthly)</span>
           <span class="metric-value accent">$${c.infrastructure_monthly_aws.toLocaleString()}</span>
@@ -819,7 +825,7 @@ class HailbytesVulnCalculator extends HTMLElement {
 
       <!-- Tool Licensing -->
       <div class="card">
-        <div class="card-title"><span class="icon">🔧</span> Tool Costs</div>
+        <div class="card-title"><span class="icon" aria-hidden="true">🔧</span> Tool Costs</div>
         <div class="metric-row">
           <span class="metric-label">Licensing (annual)</span>
           <span class="metric-value accent">$${c.tool_licensing_annual.toLocaleString()}</span>
@@ -839,7 +845,7 @@ class HailbytesVulnCalculator extends HTMLElement {
 
       <!-- Recommendations -->
       <div class="card full-width">
-        <div class="card-title"><span class="icon">💡</span> Recommendations</div>
+        <div class="card-title"><span class="icon" aria-hidden="true">💡</span> Recommendations</div>
         <ul class="rec-list">${recItems}</ul>
       </div>
     `;