Skip to content

fix(website): resolve typespec.io accessibility issues#11292

Open
timotheeguerin wants to merge 2 commits into
mainfrom
a11y-july-2026
Open

fix(website): resolve typespec.io accessibility issues#11292
timotheeguerin wants to merge 2 commits into
mainfrom
a11y-july-2026

Conversation

@timotheeguerin

Copy link
Copy Markdown
Member

Fixes six open A11y_TypeSpec website accessibility bugs (all Sev2, meta:website) filed against typespec.io.

Issue WCAG Fix
#10789 2.4.1 Bypass Blocks Added a visible-on-focus "Skip to main content" link + a focusable <main id tabindex="-1"> landmark to the non-docs page layout.
#10791 2.1.1 Keyboard Made the OpenAPI page sample carousel keyboard operable — converted the role="tab" anchors (no href) to <button>s with the full ARIA tabs pattern.
#10793 1.3.1 Info & Relationships Gave the docs sidebar a distinct landmark name ("Documentation") via an i18n override so it no longer duplicates the header's "Main" nav.
#10794 1.4.12 Text Spacing Kept the header on a single row under increased text spacing: hide the version banner in the narrow desktop range (1024–1200px) and let the nav wrap as a fallback instead of overlapping.
#10795 1.4.10 Reflow On docs pages the site header menu button overlapped Starlight's sidebar menu button (and the search button). Hid the redundant site menu button and reserved space for Starlight's; the site links remain reachable from the Starlight mobile menu.
#10796 1.4.4 Resize Text Same root cause as #10795 — resolved by the same change plus syncing --sl-nav-height to the real header height so content offsets track the header.

Verification

Each fix was verified in a locally running dev server with Playwright/Chromium:

  • Skip link is the first focusable element and moves focus to <main> on activation.
  • Carousel tabs are focusable buttons; ArrowLeft/Right switch panels and update aria-selected.
  • Docs page exposes distinct Main and Documentation nav landmarks.
  • Header stays a single row at all widths, including the tester's ~1918px text-spacing repro.
  • Only one menu button on docs pages at mobile widths, with no overlap against the search button; the Starlight menu contains the site links so nothing is hidden.

astro check (0 errors / 0 warnings / 0 hints), oxlint, and prettier all pass.

@typespec/website is a private package (not published), so no changelog entry is required.

Fixes six A11y_TypeSpec website bugs:

- #10789 (WCAG 2.4.1): add a "Skip to main content" link and a focusable
  <main> landmark to the non-docs page layout.
- #10791 (WCAG 2.1.1): make the OpenAPI page sample carousel keyboard
  operable by converting the tabs to buttons with the full ARIA tabs
  pattern.
- #10793 (WCAG 1.3.1): give the docs sidebar a distinct landmark name
  ("Documentation") so it no longer collides with the header nav.
- #10794 (WCAG 1.4.12): keep the header on a single row under increased
  text spacing; hide the version banner in the narrow desktop range and
  allow the nav to wrap as a fallback instead of overlapping.
- #10795 / #10796 (WCAG 1.4.10 / 1.4.4): stop the site header menu button
  from overlapping Starlight's sidebar menu button (and the search button)
  on docs pages by hiding the redundant control and reserving space; the
  site links remain reachable from the Starlight mobile menu.
@microsoft-github-policy-service microsoft-github-policy-service Bot added the meta:website TypeSpec.io updates label Jul 17, 2026
@github-actions

Copy link
Copy Markdown
Contributor

No changes needing a change description found.

@azure-sdk-automation

azure-sdk-automation Bot commented Jul 17, 2026

Copy link
Copy Markdown

You can try these changes here

🛝 Playground 🌐 Website 🛝 VSCode Extension

@timotheeguerin
timotheeguerin marked this pull request as ready for review July 17, 2026 14:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

meta:website TypeSpec.io updates

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant