Skip to content

Updates to improve lighthouse accessibility score - #20275

Merged
coolguyzone merged 1 commit into
masterfrom
coolguyzone/fix/lighthouse-a11y
Oct 28, 2026
Merged

coolguyzone merged 1 commit into
masterfrom
coolguyzone/fix/lighthouse-a11y

Conversation

@coolguyzone

@coolguyzone coolguyzone commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

DESCRIBE YOUR PR

Fixes every weighted accessibility failure flagged by a Chrome mobile Lighthouse run against docs.sentry.io. Verified with Lighthouse 13 against a local dev server: mobile accessibility 81 → 100, desktop also 100, with no weighted failures left in either.

To verify: run mobile lighthouse scan on https://sentry-docs-git-coolguyzone-fixlighthouse-a11y.sentry.dev/

Noticeable UI changes:

  1. Homepage inline links are now underlined — the most noticeable change.

  2. The "or" divider pill is a deeper purple — #8d84d0 → #6a5fc1. Subtle but visible side by side.

  3. The header "or" separator is darker and warmer — light purple-gray #bbadc6 → --gray-11. Desktop only (hidden md:inline).

Details:

  • Platform filter (src/components/platformFilter/) — the Radix Collapsible.Trigger was rendering aria-expanded onto a plain <div>, and each card wrapped its chevron in an empty <button> with no accessible name (14 of each on the homepage). The trigger is now a real <button type="button"> whose accessible name is the platform title, and the chevron is a <span>. Clears aria-allowed-attr and button-name. This fixes genuinely broken keyboard and screen-reader behavior on the platform list, not just the score.
  • Theme toggle — added aria-label="Toggle theme". The Radix tooltip supplies aria-describedby, not an accessible name.
  • Homepage "or" divider — color-mix(…, transparent 25%) rendered #8d84d0 on #f6f5fb, a contrast ratio of 3.05:1. Now var(--accent-purple) at 4.82:1.
  • Homepage inline links (.seeAllLink) — these sit inline in body copy with text-decoration: none and only 1.16:1 contrast against the surrounding text, so color alone distinguished them. Now always underlined.
  • Search bar "or" separator — var(--desatPurple10) on white is 2.08:1. Now var(--gray-11). This element is hidden md:inline, so it affects desktop only.

Worth flagging for reviewers: the desatPurple0–15 scale in app/globals.css is not overridden in .dark, so no fixed step on it clears 4.5:1 in both themes (step 6 is 5.24 light / 3.39 dark; step 8 is 3.48 light / 5.12 dark). That's why the search separator moved to the theme-aware Radix --gray-11 rather than a darker purple.

Two things reviewers should eyeball in the preview, since Lighthouse only audits light mode: the two color changes are deliberate visual deltas (the search separator goes from muted purple to warm gray), and dark mode is unverified.

IS YOUR CHANGE URGENT?

Help us prioritize incoming PRs by letting us know when the change needs to go live.
Select exactly one option. For deadlines, replace YYYY-MM-DD with the due date. You can update this information later by editing the PR description.

  • Urgent deadline (GA date, etc.): YYYY-MM-DD
  • Other deadline: YYYY-MM-DD
  • No deadline: Not urgent, can wait up to 1 week+

SLA

  • Teamwork makes the dream work, so please add a reviewer to your PRs.
  • Please give the docs team up to 1 week to review your PR unless you've supplied a deadline.

Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

  • Checked Vercel preview for correctness, including links
  • PR was reviewed and approved by any necessary SMEs (subject matter experts)
  • PR was reviewed and approved by a member of the Sentry docs team

EXTRA RESOURCES

🤖 Generated with Claude Code

@vercel

vercel Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
develop-docs Ready Ready Preview Oct 27, 2026 9:20pm UTC
sentry-docs Ready Ready Preview Oct 27, 2026 9:20pm UTC

Request Review

@coolguyzone
coolguyzone marked this pull request as draft October 27, 2026 21:14
@github-actions github-actions Bot added the Priority: Needs Triage The PR description is missing valid priority information label Oct 27, 2026
@cursor

cursor Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Checks were inconclusive · Rollout details

Status Service Environment
❔ Inconclusive so far develop-docs production
❔ Inconclusive so far sentry-docs production

The check did not reach a verdict. Mention @rollout in a comment to update the plan, or wait for the next deploy.

@github-actions github-actions Bot added Priority: Normal Docs review has no urgent deadline and removed Priority: Needs Triage The PR description is missing valid priority information labels Oct 27, 2026
@coolguyzone coolguyzone changed the title Updates to improve lighthouse performance score Updates to improve lighthouse accessibility score Oct 27, 2026
@coolguyzone
coolguyzone marked this pull request as ready for review October 28, 2026 22:47
@coolguyzone
coolguyzone merged commit afef694 into master Oct 28, 2026
38 of 40 checks passed
@coolguyzone
coolguyzone deleted the coolguyzone/fix/lighthouse-a11y branch October 28, 2026 23:06

This branch was successfully deployed

2 active deployments
Preview – sentry-docs — faee3bbc Deployed Oct 27, 2026 by vercel[bot]
Preview – develop-docs — faee3bbc Deployed Oct 27, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Priority: Normal Docs review has no urgent deadline

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants