Make the docs nav usable on a phone - #2438
Draft
kylemclaren wants to merge 3 commits into
Draft
Conversation
Three changes to the nav accordion, all measured on fly.io/docs at 390x844: Collapsed sections were clipped with grid-rows/opacity only, so all 112 links in closed sections stayed focusable and stayed in the accessibility tree — a screen reader user swiped through 128 items to reach the 16 that were visible. Collapsed panels now carry `inert`. Section headers were two tap targets with no visible seam: on "Getting Started" the first 127px navigated to the section index and the remaining 221px toggled it. The header is now a single button that toggles, and the section's index page moves into the list as an "Overview" child. Sections whose links already include that page (8 of 15 in the main nav) are left alone rather than growing a duplicate. Triggers gained aria-controls pointing at the panel they own. The panels no longer claim role="region" — every closed section was announcing itself as a landmark, and a nav sublist is better left as a list. Breadcrumbs put `truncate` on every segment inside a flex row, so they all shrank together and a three-level path rendered as "D... > Fly Mac... > An introduction to Fly ..." on a phone. They now scroll sideways instead. Needs the matching CSS and JS in superfly/landing to land together. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The layout renders crumbs twice below lg: once in the sticky context bar and once inside the article for the desktop rail, with exactly one visible at any width. Both need different wrapper classes, so take an optional wrapper_class local instead of hard-coding "mb-11 flex". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The full trail does not fit the 44px sticky bar. Next to the "On this page" chip the crumbs get about 220px, so on /docs/machines/overview/ the trail overflowed by 175px and the bar became a sideways scroller — swiping it moved the strip under your thumb, which reads as the page being loose. Trading the trail for a single "up one level" link removes the motion and keeps the only thing the trail was doing at this width, since the page's own title is the h1 immediately below. Verified at every depth: /docs/machines/ goes up to Docs, /docs/machines/overview/ to Fly Machines, /docs/reference/regions/ to Fly.io reference. Wide screens keep the full trail in the article via mode: :trail. Co-Authored-By: Claude Opus 5 (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.
No description provided.