Skip to content

fix(frontend): a11y, docs, and test coverage across 4 components - #1137

Open
nanlebenthel-web wants to merge 1 commit into
LabsCrypt:mainfrom
nanlebenthel-web:fix/issues-1028-1029-1030-1031
Open

fix(frontend): a11y, docs, and test coverage across 4 components#1137
nanlebenthel-web wants to merge 1 commit into
LabsCrypt:mainfrom
nanlebenthel-web:fix/issues-1028-1029-1030-1031

Conversation

@nanlebenthel-web

@nanlebenthel-web nanlebenthel-web commented Jul 29, 2026

Copy link
Copy Markdown

#1028 — Navbar.tsx mobile menu focus trap / Escape-to-close

The mobile menu was rendered as a plain conditional div with no keyboard containment, so Tab could escape into hidden background content while the drawer was open. The menu is now extracted into a MobileMenu component whose root is wired through the existing shared useModalDialog hook, giving it a focus trap, Escape-to-close, and focus restoration on close, consistent with other modals in the app. The hamburger button's aria-expanded already reflected the menu state and continues to do so.

Test plan

  • Open the mobile menu and confirm Tab/Shift+Tab cycles only within the menu
  • Confirm Escape closes the menu and returns focus to the trigger
  • frontend/src/components/Navbar.test.tsx passes

#1029 — Features.tsx test coverage

Added frontend/src/components/Features.test.tsx with a render test asserting each expected feature title is present and a count assertion on the number of rendered <h3> cards, so a future refactor that drops a card will fail a test instead of failing silently.

Test plan

  • npx vitest run src/components/Features.test.tsx passes (2 tests)

#1030 — MobileMockup.tsx alt text / responsive image

MobileMockup.tsx renders a fully CSS/SVG phone illustration — there is no raster <img> asset in the component, so there's nothing to move to next/image. Its fixed pixel dimensions (w-[280px] h-[580px] md:w-[320px] md:h-[640px]) already prevent layout shift. To address the accessibility gap, the outer container now exposes the illustration as a single accessible unit via role="img" and a descriptive aria-label, and the decorative inner nodes are hidden from assistive tech with aria-hidden="true".

Test plan

  • Screen reader announces one descriptive label for the mockup instead of reading through decorative markup
  • npx tsc --noEmit shows no new errors in this file

#1031 — Card.tsx documented prop API

UI_COMPONENTS.md already had a Props table for Card (children, className, glow, hover) matching Card.tsx's signature. Added a "Behavior Notes" section clarifying what glow and hover actually do visually and that children is required, so contributors don't have to read the component source to understand the effect of each prop.

Test plan

  • Documented props cross-checked line-by-line against Card.tsx's CardProps interface

Closes #1028
Closes #1029
Closes #1030
Closes #1031

@nanlebenthel-web
fix(frontend): a11y, docs, and test coverage across 4 components
f0224db 
- fix(Navbar): wire the mobile menu through useModalDialog for focus
  trap and Escape-to-close; hamburger button aria-expanded reflects
  the menu open state
- fix(MobileMockup): expose the CSS phone illustration as a single
  accessible unit via role="img" + aria-label, hide decorative inner
  nodes from assistive tech (fixed pixel dimensions already prevent
  layout shift; component has no raster/next/image asset)
- test(Features): add render coverage asserting all feature titles
  and card count
- docs(ui): add Card behavior notes to UI_COMPONENTS.md, cross-checked
  against Card.tsx's actual prop signature

Closes LabsCrypt#1028
Closes LabsCrypt#1029
Closes LabsCrypt#1030
Closes LabsCrypt#1031
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment