Accessibility: Page & component fixes

[n-lark]

Page & component fixes

Wave 3 — Page & component fixes ✅ Implemented (Lighthouse-verified across /, /pricing/, /about/, /integrations/<page>, /platform/features/; /changelog/ confirmed unaffected)

One PR. Page-specific WCAG A/AA issues.

TL;DR — Wave 3 issue index

Issue	Title	WCAG	File(s)	Pages affected	Status
3.1	Testimonial carousel buttons missing accessible names	4.1.2 (A)	testimonials.njk	/	✅ Done
3.2	Pricing FAQ uses <h5> as accordion button	1.3.1, 4.1.2 (A)	faq.njk	/pricing/ (and any page using faq.njk)	✅ Done
3.3	Home page heading hierarchy skips levels	1.3.1 (A)	index.njk, get-started.njk, explore-more-content.njk	/, /platform/features/ (shared partials)	✅ Done
3.4	Inline links missing underline on light backgrounds	1.4.1 (A)	index.njk, contact-us-cta-line.njk, about.njk	/, /about/, anywhere contact-us-cta-line.njk is included	✅ Done
3.5	Tier-badge <div onclick> lacks keyboard support	2.1.1 (A)	tier-badges.njk	Anywhere tier badges render (changelog cards, blog posts with featureCatalog)	✅ Done
3.6	Pricing toggle insufficient contrast	1.4.3 (AA)	style.page.css	/pricing/	✅ Done
3.7	Integration tab buttons remove focus outline without replacement	2.4.7 (AA)	integration.njk	All /integrations/* pages	✅ Done
3.8	Lighthouse follow-ups: p.-mt-1 underline, h5 "Trusted by...", explore-more h5s, pricing tier h4s, chevron link	1.3.1, 1.4.1, 4.1.2 (A)	get-started.njk, index.njk, explore-more-content.njk, pricing/index.njk	/, /pricing/	✅ Done
3.9	/about/ follow-ups: social link aria-labels, .role contrast, h4→h2 + h5→h3, inline link	1.3.1, 1.4.3, 4.1.2 (A)	about.njk, values.njk, style.page.css	/about/	✅ Done
3.10	Integration callout h3 → h2	1.3.1 (A)	integration.njk	All /integrations/* pages	✅ Done
3.11	/platform/features/ page-specific heading skips	1.3.1 (A)	platform/features.njk	/platform/features/	✅ Done

---

Per-issue details

3.1 Testimonial buttons — testimonials.njk:32. Added aria-label="Show testimonial from {{ t.author }}, {{ t.company }}".

• Lighthouse: button.testimonial-button cleared on /
• Visual: testimonial carousel on /

3.2 Pricing FAQ accordion — faq.njk. Restructured <h5 class="question"> → <h3><button class="question ..." aria-expanded aria-controls type="button">. Button styled bg-transparent border-0 p-0 text-left text-lg font-semibold to match original h5 visual. JS updated to flip aria-expanded.

• Lighthouse: h5#question-X cleared on /pricing/
• Visual: pricing FAQ

3.3 Home heading hierarchy — heading promotions across index.njk, get-started.njk, explore-more-content.njk. All sized with explicit text-{size} utilities to preserve visuals.

• Lighthouse: heading-order cleared on / and /platform/features/
• Visual: home sections, get-started card, "Explore more" footer

Note after merge with origin/main: The original Wave 3 included a fix for <h5>Or get a quick look at FlowFuse in 90 seconds</h5> → h2. origin/main removed that entire video section (replaced with CTA buttons), so the fix was dropped — no longer applicable. The Unlock Powerful Solutions section was moved later in the file; its h4 → h3 fix was re-applied at the new location. Other Wave 3 fixes (Trusted by our customers, $50B/800h stats, capability eyebrows, Contact us underline) survived the merge intact.

3.4 Inline link underlines — index.njk:307, contact-us-cta-line.njk:2, about.njk:194, :197. Added class="underline" to 4 inline <a>s.

• Lighthouse: a and p.-mt-1 cleared on /
• Visual: underlines on / and /about/

3.5 Tier-badge keyboard support — tier-badges.njk. Added role="button", tabindex="0", aria-label, onkeydown for Enter/Space. Lighthouse can't detect <div onclick> issues so this needs manual keyboard testing.

• Tab-reachable + Enter/Space activates (code review)
• Manual keyboard test: Tab to a tier badge on a blog/changelog post, confirm visible focus + Enter/Space fires capture() (check console/network)
• Visual: tier badges on any page with featureCatalog entries

3.6 Pricing toggle contrast — style.page.css:354. .cloudText, .selfHostedText inactive color indigo-400 → indigo-600 (5.85:1, passes AA). First-pass indigo-500 rendered 4.04:1, still under threshold for 12px text.

• Lighthouse: span.selfHostedText, button.btnToggle cleared on /pricing/
• Visual: active (indigo-700) vs inactive (indigo-600) still distinguishable

3.7 Integration tab focus — integration.njk:103, :109. Swapped focus:outline-none → focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2.

• Lighthouse: focus violation cleared on /integrations/<page>
• Visual: hover/active states unchanged, focus ring visible on Tab

3.8 Lighthouse follow-ups — surfaced after / and /pricing/ re-runs:

• get-started.njk:3 — added underline to pricing link inside p.-mt-1

• index.njk:93 — h5 "Trusted by our customers" → h2 + text-lg font-semibold

• explore-more-content.njk:17, :40, :60 — 3 h5s → h4 + text-lg

• pricing/index.njk:59, :130, :184 — h4 tier names → h2 class="text-2xl font-medium" (matches original 24px / 500 from .pricing-tile h4 rule; first-pass text-xl was a regression)

• pricing/index.njk:249 — icon-only chevron link got aria-label="Scroll to feature comparison table"

• Lighthouse re-runs on / and /pricing/ clean

• Visual: explore-more post titles, "Trusted by..." subhead, pricing tier names

3.9 /about/ follow-ups — surfaced after /about/ re-run:

• about.njk:111-141 — 60+ team-member social links got contextual aria-label (e.g. "Email Nick O'Leary")

• style.page.css:532 — .member-info .title .role color indigo-400 → indigo-600

• about.njk:157 — added underline to "corporate values" link

• about.njk:64, :74 — Node-RED/Open Source h4 → h2 class="text-[1.4rem]" (exact match for default h4 size; first-pass text-xl was a regression)

• values.njk — 5 Corporate Values h5 → h3; CSS rule at style.page.css:406 extended to match h3

• Lighthouse re-run on /about/ clean

• Visual: team roles, Node-RED/Open Source headers, Corporate Values cards

3.10 Integration callout headings — integration.njk:72, :80. Certified/uncertified callout <h3> → <h2 class="text-3xl ..."> (1.875rem ≈ original h3 default 1.85rem).

• Lighthouse: heading-order cleared on integration pages
• Visual: callout heading size matches original

3.11 /platform/features/ heading skips — 3 page-specific skips beyond the shared-partial fix:

• features.njk:32 — h3 subhead → h2 (existing text-xl)

• features.njk:112 — h4 Connect/Collect/Visualise/Interact tiles → h3 (existing text-2xl)

• features.njk:150 — h4 feature cards → h3 class="... text-xl"

• Lighthouse: heading-order cleared on /platform/features/

• Visual: subhead, Connect tiles, feature cards