SPEC-TEST-005/test/focus-selector

Focus Selector Test Harness & Verification Suite

Interactive QA sandbox verifying persona pills, URL parameter syncing, event dispatching, notice cards, location banners, strip toggles, card CTA shifts, and Click & Pledge widget suppression.

State Inspector Bar

Live URL State & Dispatched Event Log

Active Focus Value
newI'm New Overview
URL Search String (window.location.search)(none)
Last Dispatched Event Payload
No event dispatched yet
`focus-changed` Custom Window Event Log0 events
[Log ready - Click pills below to test events]
Component Under Test

FocusSelector.astro Instance

๐ŸŽฏ Customized Experience

Select your relationship with Street Youth Ministry to filter relevant programs and actions.

URL Sync (?focus=)
Introductory overview, core services, and popular ways to get involved.
#mock-client-section

Client / Get Help Location & Transit Notice

Visible on `client`, `new`, and `all` focus modes
๐Ÿ“ Location & Transit DirectionsYouth & Clients Seeking Service or Meals

๐Ÿ“ 2008 Justin Ln, Austin

Half a block off Bus 803 on Burnet Road at Justin Ln. Look for the building between the car dealership and the big churchโ€”look for the big Street Youth Ministry sign up high by the door to the building with all the murals on it.

Arrival Info: Sunshine Store arrival time is flexible within the scheduled event time window.

Section 4

Strip Visibility Toggle Test Container

Hides on `volunteer` & shows on `client` / `all`
๐Ÿ‘ฅ #mock-groups-strip: Group & Client ActivitiesVisible on: client, new, all

Simulated Event Strip container demonstrating reactive visibility. When switching focus to Give Help (volunteer), this client-only strip automatically hides from view.

Section 5

Dynamic CTA Card Shift Test Container

Button CTA swaps based on active focus mode
Event Card #MOCK-CTA-001Friday Drop-In Meal & Resource Fair

Youth & Volunteer Community Gathering

Fridays @ 2:00 PM โ€ข Street Youth Ministry Main Center

Section 6

Click & Pledge Floating Widget Status

Suppressed on focus === 'client'

The official single Click & Pledge giving widget (embedded via Layout.astro and anchored at bottom-right) is automatically suppressed when Get Help (client) mode is selected to avoid soliciting youth in need. Clicking "Give Online Now" in the Give Money (donor) banner triggers this Click & Pledge widget directly.

๐Ÿ” CnP Inspector
Click "Inspect DOM" or test buttons above...