a11y: add ARIA semantics + reduced-motion support to the calculator component#12
Open
dmchaledev wants to merge 1 commit into
Open
a11y: add ARIA semantics + reduced-motion support to the calculator component#12dmchaledev wants to merge 1 commit into
dmchaledev wants to merge 1 commit into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The
<hailbytes-vuln-calculator>web component is designed to be embedded across marketing sites, but it currently ships with zero accessibility affordances:transform, transitions) ignoreprefers-reduced-motion, which can cause discomfort for motion-sensitive users.Fix
Pure presentation/markup changes inside the component — no calculation logic touched:
role="region"+aria-live="polite"+aria-atomic="true"on the results panelaria-hidden="true"on all decorative emoji (header, the 4 section labels, all 6 card titles, the placeholder icon)aria-label="Calculate Infrastructure"+type="button"on the Calculate button, with the ⚡ wrapped in anaria-hiddenspan@media (prefers-reduced-motion: reduce)rule disabling transitions/animations/hover transformVerification
npm testruns only the smoke suite today, but I ran the full suite locally — all 65 tests pass (the changes are additive markup, so nothing in the calculation engine is affected):Note (out of scope, spotted while here)
demo.htmllinks togithub.com/HailBytes/hailbytes-vulnerability-calculator, but the actual repo (perpackage.json) isHailBytes/vulnerability-calculator— thehailbytes-prefix appears copy-pasted from the sibling packages, so that footer link is dead. Happy to fold the one-line fix into this PR or open a separate one — let me know.Generated by Claude Code
https://claude.ai/code/session_01DmSERbkobLE4Hy5phDB7bW