fix(site): fix accessibility issues in the docs site

[redonkulus]

Fixes #1204.

Fixes every Lighthouse accessibility failure on the docs site except the ones that come from Pure's own CSS. Those are left as they are, since changing them would change Pure for everyone who uses it.

Lighthouse accessibility (13.5), 12 docs pages

	Production	This branch
Mobile	57–81	95–100
Desktop	73–90	93–100

8 of 12 pages now score 100. The only failures left are on /buttons/, /forms/, /layouts/ and /menus/. All of them come from Pure's own CSS:

• .pure-button-primary: white on #0078e7, 4.33:1
• .pure-button-disabled
• readonly inputs: #777 on #eee
• .pure-menu-link: #777 on white, 4.47:1

Production numbers are from pure-css.github.io. Every purecss.io/<path> URL currently 301s to the github.io homepage and drops the path. That redirect is set up outside this repo.

Changes

Site-wide (site/static/css/main.css, Layout.js, Menu.js, ui.js, CodeBlock.js)

• Colors. Each new value was checked against every background it sits on, including table stripes, #fafafa and code blocks:
  • Body text #777 → #666.
  • Subheads #888 → #666.
  • Links #3b8bba → #31739a.
  • Accent blue #1f8dd6 → #1a75b3. It's used for callouts, the Get Started button and the selected menu item.
• Links in running text (p, li, td, dd) are underlined, so they don't rely on color alone. Pure buttons and menu links are excluded. Links in callouts are now white.
• Code blocks use react-syntax-highlighter's a11y-light theme instead of docco.
• Page content is wrapped in <main>.
• The menu toggle has aria-label="Menu" and aria-controls="menu". aria-expanded is kept in sync by ui.js.
• Footer links are at least 24px tall, for touch targets.

Page-specific

• Homepage:
  • Size chart: Base and Buttons are darkened so white text passes. Forms, Tables and Menus keep their colors with dark text. The pale "size" tints are replaced with the label color.
  • Demo buttons keep their backgrounds, with text darkened to pass. Orange uses dark text, and Indigo is slightly deeper.
• Buttons: the "Colored buttons with rounded corners" example darkens green, orange and blue so white text passes. The copyable CSS changes to match.
• Forms: the read-only and rounded input examples get aria-labels. They also appear in the snippets.
• Tools: list descriptions moved inside their <li>s. The list had stray text nodes.

Visual impact

• The accent blue is a little darker everywhere.
• Links are darker and underlined in body text.
• Homepage chart labels are no longer two-tone.

I compared production and this branch side by side on each changed area, desktop and mobile. Screenshots are available on request.

Testing

• eslint passes.
• Site Playwright suite: 56 passed, 12 skipped (mobile-only tests skipped on desktop).
• Lighthouse was run against a local build (docusaurus serve) for all 12 pages in mobile and desktop modes.

🤖 Generated with Claude Code