Accessibility: labels, ARIA tab roles, modal keyboard operability, contrast (#402)#414
Merged
Conversation
Belongs with 9d8867e — the spec change was left unstaged when that commit staged only editor-core.js.
…ntrast (#402) Form labels: - media file inputs (all five engines): drop title="", add aria-label - Recents load select: aria-label; Model/Language span headings become real <label for> associations (deepgram, assemblyai, parakeet-hf) - import dialogs (export.js): the six span captions become <label for> ARIA tab roles: - remove role="tablist|tab|tabpanel" from the Local/Cloud switch and engine tabs — label/input don't allow role="tab" and the interleaved panels can't satisfy tablist's required structure; DaisyUI pairs by class so styling is unaffected, and the radios' native semantics (with aria-labels) announce correctly - fix the mobile tab-shrink CSS still targeting the old my_tabs_2 group name (dead since the Local/Cloud split) and the [role="tablist"] selector Modal toggles: - all thirteen modal-toggle checkboxes get aria-hidden + tabindex=-1 (they are opacity-0 CSS mechanisms that were focusable-but-invisible and flagged as unlabeled / multiply-labelled form fields); every ✕ gets aria-label="Close" - new js/a11y.js makes the visible label-buttons the keyboard surface instead: tabindex=0 + Enter/Space activation (MutationObserver covers late-injected dialogs), with a :focus-visible ring — modals are now keyboard-operable, which they previously weren't except via the invisible checkbox Contrast: - the Recents "No files saved." placeholder was opacity .55 (≈2.9:1 composited); raised to .75 (≈5.7:1). The file items themselves already passed. Verification: __TEST__/e2e/a11y.spec.mjs runs axe-core against the #402 rule set on the default view and transcribe modal, plus a keyboard-operability check; axe-core added as a devDependency.
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
1 participant
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.
Addresses the Lighthouse findings in #402 (items 1–4; item 5, the manual screen-reader pass, stays open).
Form labels
aria-label(replacing a uselesstitle="").aria-label. Model/Language headings converted from barespans to real<label for>(Deepgram, AssemblyAI, Parakeet-HF).export.js): all six field captions converted to<label for>.ARIA tab roles
role="tablist|tab|tabpanel"from the Local/Cloud switch and engine tabs —label/inputdon't allowrole="tab", and DaisyUI's interleaved panels can't satisfy tablist's required structure. Styling is class-based (.tab:checked+.tab-content), so nothing visual changes; the radios' native semantics +aria-labels announce correctly.my_tabs_2group (dead since the Local/Cloud split) — now targetslocal_tabs/cloud_tabs.Modal toggles + keyboard operability
modal-togglecheckboxes:aria-hidden+tabindex="-1"(they're opacity-0 CSS mechanisms that were focusable-but-invisible, flagged as unlabeled/multiply-labelled). Every ✕ getsaria-label="Close".js/a11y.js: the visible label-buttons become the keyboard surface —tabindex="0", Enter/Space activation,:focus-visiblering, MutationObserver for late-injected dialogs. Modals are now genuinely keyboard-operable (previously only via the invisible checkbox).Contrast
opacity .55(≈2.9:1) →.75(≈5.7:1). Measured live; the file items themselves already passed.Verification
__TEST__/e2e/a11y.spec.mjsruns axe-core (Lighthouse's engine) against the Accessibility: fix Lighthouse findings (labels, ARIA tab roles, contrast) #402 rule set on the default view + transcribe modal, plus a keyboard test (Enter on the info button opens the modal). Mutation-tested the net. Full suite: 23 e2e + 7 unit passing.axe-coreadded as a devDependency.