Validate mobile sheet in browser (hamburger → sheet < md)

Open Beginner friendly
#16 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript

Research direction

Start with the mobile sheet follow-up in plans/web-shell.md and the public-screens PR review context. Run the browser checks with chrome-devtools-axi below 768px, covering opening, navigation, focus trapping, and close behavior. Done means the validated checks are added to the QA checklist.

Written by the indexing model from the issue text.

Description

During the web-shell plan implementation, the mobile sheet open/close was validated via jsdom tests (keyboard Escape key, aria attributes). Browser validation via chrome-devtools-axi was not possible at < md viewport width.

What to check:

  • At mobile viewport (< 768px), header collapses to: logo + hamburger + auth control
  • Tapping hamburger opens the Sheet from the right with stacked nav links
  • Sheet contains: Projects, Help Wanted, Members, Volunteer, separator, About section, search box
  • Focus is trapped while sheet is open
  • Sheet closes on Escape or overlay click and returns focus to the hamburger trigger

When to close: Add to the QA checklist for public-screens PR review.

From: plans/web-shell.md Follow-ups

Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
1d 20h
Merged PRs (30d)
25

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CodeForPhilly/codeforphilly-ng

All issues in CodeForPhilly/codeforphilly-ng

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.