Skip to content

docs(theme): bump sidebar link min-height to 24px to satisfy a11y/touch-target - #284

Merged
aram-devdocs merged 1 commit into
mainfrom
docs/theme-a11y
May 8, 2026
Merged

docs(theme): bump sidebar link min-height to 24px to satisfy a11y/touch-target#284
aram-devdocs merged 1 commit into
mainfrom
docs/theme-a11y

Conversation

@aram-devdocs

Copy link
Copy Markdown
Owner

Summary

  • Adds docs/theme/css/custom.css and wires it via book.toml's additional-css.
  • Bumps sidebar chapter link min-height from ~22 px to 24 px so the docs site passes Plumb's own a11y/touch-target rule (default min_height_px = 24).

Why

From the share-readiness audit (finding H33). When plumb lint https://plumb.aramhammoudeh.com was run against the deployed docs site, the stock mdBook sidebar tripped Plumb's own a11y/touch-target rule because chapter anchors render at ~22 px on common viewports — below the 24 px WCAG 2.5.8 floor. Fixing this avoids the embarrassing "linter fails its own docs site" moment.

Approach

  • Targets .chapter li a (the sidebar anchors inside <ol class="chapter">) plus .chapter-item and .expanded permutations.
  • Uses min-height: 24px plus padding-top: 4px / padding-bottom: 4px and display: flex; align-items: center; so the touch target is honored even when the line-height alone wouldn't reach 24 px.
  • Leaves theme/head.hbs untouched so it can coexist with parallel theme work (PR 1's version-stamp).

Test plan

  • mdbook build succeeds; the hashed CSS (book/docs/theme/css/custom-<hash>.css) is referenced from book/index.html.
  • just validate passes on the branch.
  • After deploy: plumb lint https://plumb.aramhammoudeh.com no longer reports a11y/touch-target violations on the sidebar.

@github-actions

github-actions Bot commented May 7, 2026

Copy link
Copy Markdown
Contributor

I have everything I need. Here is the structured review.


Code review summary

PR: docs(theme): bump sidebar link min-height to 24px to satisfy a11y/touch-target
Author: Aram Hammoudeh
Base: main
File bucket: docsbook.toml, docs/theme/css/custom.css

No Rust source files are touched. Determinism, layering, error-handling, and unsafe invariants are out of scope.


Blockers

# Severity File Line Issue Suggestion
None

Warnings

# Severity File Line Issue Suggestion
None

Architecture compliance

  • [✅] No new unsafe outside plumb-cdp
  • [✅] No new unwrap / expect / panic! in library crates
  • [✅] No new println! / eprintln! outside plumb-cli
  • [✅] No new wall-clock or HashMap in observable-output paths
  • [✅] No new todo! / unimplemented! / dbg!

Anti-pattern scan

Pattern Status Details
AI-flavored prose in docs ✅ Clean CSS comment is technical; no "seamless / leverage / dive in"
book.toml additional-css path ✅ Correct Path is relative to repo root where book.toml lives
display: flex on sidebar links ✅ Safe mdBook <a> elements in .chapter contain only text ± icon; flex has no adverse nesting effect
Padding math vs. 24 px floor ✅ Passes min-height: 24px + padding: 4px 0 + line-height: 1.5 on ~14 px base = ~29 px effective height
Directory naming ambiguity ⚠️ Note docs/theme/css/ is unrelated to theme/ (the custom theme dir). Non-blocking — paths are independent — but a # NOTE in book.toml could help future readers. Not a blocker.

Quality assessment

The fix is minimal and precisely scoped: two files, 26 added lines, zero deleted lines. The motivation is verified (Plumb's own a11y/touch-target rule, min_height_px = 24, was tripping on the docs site's ~22 px sidebar links). The selectors cover all four .chapter li a states that mdBook renders. The second rule (.chapter li { line-height: 1.5; }) correctly handles non-anchor rows (dividers, numbered prefixes) to maintain visual rhythm.

Commit message follows Conventional Commits (docs(theme):). No test is warranted — CSS visual correctness is outside the scope of the Rust test suite, and no infrastructure for visual regression exists.


Scope check

  • Changes match PR description: ✅ Yes — book.toml wires additional-css; docs/theme/css/custom.css delivers the fix.
  • Scope creep detected: ✅ None.

Verdict: APPROVE

…ch-target

The docs site at https://plumb.aramhammoudeh.com previously failed
Plumb's own `a11y/touch-target` rule (default `min_height_px = 24`)
when self-linted: the stock mdBook sidebar produces ~22 px tall
chapter anchors on common viewports.

Add `docs/theme/css/custom.css` with a min-height + padding bump
on `.chapter li a` and wire it via `book.toml`'s `additional-css`.
This keeps the sidebar above the 24 px WCAG 2.5.8 floor without
touching `theme/head.hbs` (left untouched so it can coexist with
parallel theme work in PR 1).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant