[4882] Accessibility: Skip navigation & focus visibility

[n-lark]

Description

See details here.

Related Issue(s)

Resolves #4882

Checklist

• I have read the contribution guidelines
• I have considered the performance impact of these changes
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
• For blog PRs, an Art Request has been created (instructions)

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	31b9315
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/69de8bcf98fadd000892d214
😎 Deploy Preview	https://deploy-preview-4883--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 87 (🟢 up 1 from production) Accessibility: 82 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[allthedoll]

Looks good, but have someone else test local as I'm on mobile.

[ZJvandeWeg]

Don't mean to overstep, but is simple enough to merge.

[Yndira-E]

Hey @n-lark, quick accessibility question: when the homepage loads, the AI chat box appears to already have a focused style (blue outline) visible by default, before any user interaction.

Is this intentional? Attaching a screenshot for reference.

[n-lark]

Hey @Yndira-E good catch! That's expected behavior. The homepage auto-focuses the AI chat text area on page load, which triggers the new focus outline. Since the field genuinely has keyboard focus at that point, showing the indicator is the correct accessible behavior. If a user starts tabbing, they'll know exactly where they are.