Skip to content

Fix Lighthouse accessibility issues in docs components - #1082

Merged
mdo merged 3 commits into
mainfrom
docs-a11y-lighthouse-fixes
Aug 25, 2026
Merged

Fix Lighthouse accessibility issues in docs components#1082
mdo merged 3 commits into
mainfrom
docs-a11y-lighthouse-fixes

Conversation

@mdo

@mdo mdo commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

Fixes several Lighthouse accessibility audit failures in the docs app (diffs + trees), from two chats. Scoped to component-level a11y only; the <main> landmark work and the separate SEO metadata pass are intentionally excluded (see below).

  • Rebuild the diff-style and playground toggles as a single label + native checkbox ToggleSwitch (apps/docs/components/ui/toggle-switch.tsx) instead of a <button> visually stacked with a Radix switch (which rendered a second, undersized <button>). This collapses each pill to one adequately sized tap target, fixing the target-size failure. Checked pills use the outline variant, unchecked use secondary with a transparent border so toggling never shifts layout.
  • Mark the remaining decorative switches (DemoGitStatus, DemoDragDropClient) aria-hidden + tabIndex={-1} so the adjacent button is the sole named control.
  • Name previously unlabeled controls: aria-label on the playground/AgentUi textareas and various buttons/switches.
  • Convert CopyCodeButton from a clickable <div> to a real <button> with an aria-label.
  • Convert the footer <h4> column headings to styled <p> elements to fix the heading-order violation (they were h4s with no preceding h2/h3).

@vercel

vercel Bot commented Aug 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pierre-diffshub Ready Ready Preview Aug 25, 2026 4:41am
pierre-docs-diffs Ready Ready Preview Aug 25, 2026 4:41am
pierre-docs-trees Ready Ready Preview Aug 25, 2026 4:41am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
pierrejs-diff-demo Skipped Skipped Aug 25, 2026 4:41am

Request Review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 206670851d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread apps/docs/components/ui/toggle-switch.tsx
Comment thread apps/docs/components/Header.tsx Outdated
mdo added 3 commits August 24, 2026 21:04
Rebuild the diff style/playground toggles as a single label + checkbox
ToggleSwitch (one adequately sized tap target instead of a button stacked
with a Radix switch), mark the remaining decorative switches aria-hidden,
name previously unlabeled buttons/switches/textareas, make CopyCodeButton a
real button, and convert the footer h4 column headings to styled paragraphs
to fix heading order.

Excludes the separate <main> landmark work and the SEO metadata changes.
Add a <main> landmark in the shared DocsLayout and ThemeLayout so the
/docs and /theme routes expose a single primary content region for
assistive tech. Other routes still lack a <main> and are handled
separately.
Wrap the primary content of the Diffs home, Trees home, and Edit pages in a <main> landmark. Also make the Header mobile toggle aria-label reflect what it opens: the site navigation menu when the Header owns the popover, or the docs table of contents otherwise.
@mdo
mdo force-pushed the docs-a11y-lighthouse-fixes branch from 4afe225 to 8a818d5 Compare August 25, 2026 04:39
@vercel
vercel Bot temporarily deployed to Preview – pierrejs-diff-demo August 25, 2026 04:39 Inactive
@mdo
mdo merged commit 80a59b4 into main Aug 25, 2026
8 checks passed
@mdo
mdo deleted the docs-a11y-lighthouse-fixes branch August 25, 2026 04:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants