Skip to content

Fix website reflow, text spacing, and keyboard focus - #450

Open
robgruen wants to merge 1 commit into
mainfrom
dev/robgruen/website_fixes
Open

robgruen wants to merge 1 commit into
mainfrom
dev/robgruen/website_fixes

Conversation

@robgruen

Copy link
Copy Markdown
Contributor

Summary

  • Replace the absolutely positioned, small-screen-hidden copy button with a wrapping layout that keeps the install command readable and the copy action available.
  • Add shared keyboard-focus outlines with sufficient contrast in normal and forced-color modes, including navigation links, buttons, selects, and scrollable documentation code blocks.
  • Correct the copy button's accessible name and report clipboard failures instead of displaying success when the Clipboard API is unavailable.
  • Document the website build and accessibility verification checklist.

Validation

  • Website build: npm --prefix site run build.
  • JavaScript syntax and DOM type checks passed.
  • Ten browser layout scenarios passed, including an exact 320 x 256 CSS-pixel viewport, WCAG text-spacing overrides, and forced colors; no command/button overlap or horizontal overflow.
  • 216 real keyboard Tab stops passed across seven homepage/documentation scenarios, with all expected controls reachable.
  • Minimum measured focus contrast was 6.74:1 in normal colors and 21:1 in light/dark forced-color emulation, exceeding the 3:1 requirement.
  • Native Enter/Space activation passed with a stubbed clipboard, including the exact command payload, unavailable/rejected clipboard access, and feedback reset. These checks also passed at 320 x 256 with text spacing.
  • With JavaScript disabled, the inactive copy button is hidden and the install command remains readable.

Exact Windows Aquatic/Desert themes still need a manual check; browser forced-color emulation was used for automated verification.

Linked issues

Closes #229
Closes #230
Closes #231
Closes #232

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment