fix(website): workflow carousel dots — visible on mobile, hidden on desktop#198
Merged
Merged
Conversation
Two issues from the previous a11y PR: 1. The `::before` pseudo-element on the dot buttons rendered invisibly in Chromium. The button needs `display: inline-flex` + `appearance: none` for pseudo-elements to render reliably on `<button>`. Added both, and simplified the centering (flex instead of absolute + translate). 2. The dots were duplicating navigation: on desktop, the named tablist (Charter / AILOG / TDE / Compliance / Audit) is already the primary selector and both controls share `role="tablist"`. Hide dots on desktop entirely (`display: none` until 767px). On mobile the named tablist is hidden by an existing media query, so the dots remain as the only carousel navigation and keep the 24×24 hit area. Net effect: cleaner desktop (no redundant visual indicators below the named tabs), correct mobile (visible 8px dot with WCAG-compliant 24×24 touch target). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #197. Two corrections:
The dots disappeared visually after fix(website): Lighthouse accessibility + CLS fixes #197. Root cause: my previous fix used a
::beforepseudo-element on<button>withposition: absoluteto draw the 8px visible circle inside a 24×24 hit area, but Chromium does not reliably render pseudo-elements on<button>withoutdisplay: inline-flex+appearance: none. Fixed by switching to flex centering and addingappearance: none.The dots were redundant on desktop. The named tablist (Charter / AILOG / TDE / Compliance / Audit) already provides navigation with
role=\"tablist\". The dots had the same role and controlled the same carousel — duplicate UI. On mobile (<768px) the named tablist is hidden by an existing media query, so the dots remain there as the only navigation.Net: cleaner desktop (no redundant indicator strip below the named tabs), correct mobile (visible 8px dot with WCAG 2.2-compliant 24×24 touch target).
Test plan
/:target-sizeaudit still passes (24×24 hit area is preserved on mobile where dots render).🤖 Generated with Claude Code