Skip to content

feat(wesnest): build accessible frontend with Wesleyan design system and interactive states - #53

Closed
ayushdwivedi-stack wants to merge 1 commit into
Builder106:mainfrom
ayushdwivedi-stack:feat/wesnest-accessible-frontend
Closed

ayushdwivedi-stack wants to merge 1 commit into
Builder106:mainfrom
ayushdwivedi-stack:feat/wesnest-accessible-frontend

Conversation

@ayushdwivedi-stack

Copy link
Copy Markdown

Fixes #50

Summary of Changes

  • Wesleyan Design System: Applied official brand colors (Cardinal Red #C41230, #990000, neutral slate #1F2937, and soft gray surfaces) with responsive, modern card layouts.
  • Direct Organization Links: Result cards now feature clickable links directly navigating to https://wesleyan.campuslabs.com/engage/organization/{slug} with external link indicators.
  • Category Chips & Match Indicators: Formatted comma-separated categories into distinct chip pills and added percentage match score badges (Math.round(score * 100)% match).
  • Interactive States & Controls:
    • Debounced search input (300ms) with smooth typing experience.
    • Interactive clear button (✕) to instantly reset input and results.
    • Loading spinner indicator during asynchronous /api/search requests.
  • Zero-State Suggestion Chips: Added clickable query suggestion pills (Robotics, Community Service, A Cappella, Debate, Coding, Film) that immediately populate search on click.
  • Accessibility (a11y):
    • Added aria-live="polite" live region status announcer (#search-status) communicating dynamic search result counts and loading states.
    • Added high-contrast focus rings (var(--wes-focus-ring)) and screen-reader accessible form labels.
    • Full keyboard navigability across input, suggestion chips, clear button, and result links.
  • Test Coverage:
    • Extended tests/frontend.spec.mjs to verify suggestion chips, clear button reset, empty states, direct links, and match scores.
    • All 10 Playwright tests (tests/scrapeClubs.spec.mjs, tests/frontend.spec.mjs, tests/responsiveness.spec.mjs) passing cleanly.

…and interactive states

- Implement Wesleyan brand palette (Cardinal Red #C41230, dark red #990000, gray scale)
- Add direct clickable links to WesNest organization URLs with external indicator
- Render category tags as distinct chip badges and show percentage match scores
- Provide debounced search with instant clear button (✕) and animated loading spinner
- Include zero-state suggestion query chips (Robotics, Community Service, A Cappella, Debate, Coding, Film)
- Add aria-live polite announcer for search results, screen-reader labels, and focus rings
- Expand Playwright test suite to verify suggestion chips, clear button, and empty state

Fixes Builder106#50
@Builder106

Copy link
Copy Markdown
Owner

This is for Code_Wes members only. Sorry.

@Builder106 Builder106 closed this Oct 24, 2026
@ayushdwivedi-stack

Copy link
Copy Markdown
Author

Understood, thank you for clarifying! Closing this PR now.

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.

wesnest: build accessible frontend with Wesleyan design system and interactive states

2 participants