Accessibility: Skip navigation & focus visibility

[n-lark]

Accessibility: Skip navigation & focus visibility

Relates to #4264

Problem

Keyboard and screen reader users face two barriers on our site:

1. No way to skip past navigation — Every page load forces keyboard users to Tab through the entire header and nav before reaching content. This violates WCAG 2.4.1 (Bypass Blocks).

2. Focus indicators removed without replacements — Several interactive elements (outline: none) give no visual feedback when focused via keyboard. Users lose track of where they are on the page. This violates WCAG 2.4.7 (Focus Visible). Affected areas:

   • Algolia search (blog, changelog, docs pages)
   • Range input styling
   • AI chat textarea

What this PR does

• Adds a "Skip to main content" link as the first focusable element — hidden by default, appears on Tab. Available on every page that doesn't already have a built-in autofocus element (e.g. search inputs); on those pages, the browser's autofocus takes priority.
• Restores visible focus indicators on the Algolia search button/form, range inputs, and the AI chat textarea wrapper
• All focus styles use theme(colors.indigo.*) to match existing button and link patterns

---

Test plan - all tests passed ✅

Skip to main content

• Load any page, press Tab once — a "Skip to main content" button should appear top-left
• Press Enter on the skip link — focus should jump past the nav to the main content area
• The link should be invisible when not focused (not visible to mouse users)
• Check on mobile viewport — link should still appear on focus and not break layout

Focus outlines — Algolia search (blog, changelog, docs pages only)

• Tab to the search button — should show an indigo outline
• Click into the search form — should show an indigo ring around the form
• Mouse click on search button — no jarring double-outline

Focus outlines — AI chat textarea

• Tab into the textarea — should show an indigo outline around the wrapper
• Verify the outline doesn't clip or overlap the "Tell Me How" button or surrounding elements

Focus outlines — Range slider

• N/A — no pages currently use a range input; CSS fix is preventative

General

• Spot check 2-3 page types (blog post, landing page, integrations) for visual regressions
• Test in Chrome and Firefox (Safari if possible)

Safari note: Safari does not include links or buttons in the Tab order by default. To test keyboard navigation, enable: Safari > Settings > Advanced > Accessibility > "Press Tab to highlight each item on a webpage". This is a browser-level user preference, not a bug.

Remaining accessibility work

Items 2, 3, and 5-8 from the full audit are planned for follow-up PRs.