Skip to content

a11y: add ARIA semantics + reduced-motion support to the calculator component #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dmchaledev wants to merge 1 commit into
base: main
Choose a base branch
from
Open

a11y: add ARIA semantics + reduced-motion support to the calculator component #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 20 additions & 14 deletions hailbytes-vuln-calculator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -546,14 +546,20 @@ 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 ─────────────────────────────────────────────────────────────────

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>

Expand All @@ -562,15 +568,15 @@ 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">
</div>
</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">
Expand All @@ -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)
Expand All @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
`;
Expand Down
Loading