fix(docs): add ARIA tab semantics to the ASM/SAT spec switcher#60
Open
dmchaledev wants to merge 1 commit into
Open
fix(docs): add ARIA tab semantics to the ASM/SAT spec switcher#60dmchaledev wants to merge 1 commit into
dmchaledev wants to merge 1 commit into
Conversation
The nav buttons that toggle between the ASM and SAT Redoc specs had no role or selected-state semantics, so screen reader users had no way to tell they were tabs or which spec was currently active. Adds role="tablist"/"tab"/"tabpanel", aria-controls, and aria-selected (kept in sync in the existing activate() handler). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017RsxuZiC7PrEJ7XkftvUqT
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
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.
Summary
docs/index.htmlrenders two buttons that switch the embedded Redoc viewer between the ASM and SAT OpenAPI specs. They had no ARIA roles or selected-state semantics — a screen reader user tabbing to them would hear two unlabeled buttons with no indication they're a tab pair or which one is currently showing.This adds the standard ARIA tab pattern:
role="tablist"on a wrapper around the two buttons (display: contentsso it doesn't affect the existing flex layout)role="tab"+aria-controls="redoc-container"on each buttonaria-selectedtoggled between"true"/"false"in the existingactivate()handler, kept in sync with the.activeCSS class it already managesrole="tabpanel"+aria-live="polite"on the Redoc container, so switching specs is announcedNo visual or behavioral change — purely additive markup/attributes.
Pre-flight duplicate check
docs/index.htmlaccessibility.)Related issues/PRs
None found.
Testing
git diffreviewed — change is confined todocs/index.htmlmarkup and theactivate()function.asm/openapi.yaml/sat/openapi.yamlalongside it, matching whatdeploy-docs.ymlproduces) and drove it with Playwright/Chromium:#tab-asmhasaria-selected="true",#tab-sathasaria-selected="false".asm=false,sat=true),role="tablist"/"tab"/"tabpanel"all present.display: contentswrapper doesn't introduce any visual box).Generated by Claude Code