CodeForPhilly / CodeForPhilly/codeforphilly-ng

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

Open Beginner friendly
#16 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
5d 3h
Merged PRs (30d)
9

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_

Contributor guide

No contributing guide indexed for this repository

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.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.