The page is built and the preview version is saved (preview version ID removed) — you can open the on-screen preview from the version card.
What it does:
Filters: Two labelled dropdowns — Topic (Art / Craft / Repair) and Places available (any / places available / full). They combine freely, and a Reset filters button clears both (also offered inside the empty state).
Results: A live count announces "N workshops match your filters" (screen-reader friendly via role="status"), and when nothing matches, an empty state explains what to try next.
Shortlist: Every card has an "Add to shortlist" toggle button (aria-pressed). The side panel lists shortlisted workshops with individual Remove buttons and a running total duration in hours/minutes. Full workshops can be shortlisted — they're labelled "planning only", and the panel explicitly states shortlisting is not a booking or reservation.
Accessibility: Semantic <select>/<button> controls with visible text labels, a skip link, strong visible focus rings, and availability shown with both a symbol (● / ■) and text — never colour alone. Fully responsive single-column-to-grid layout.
Self-contained: One file, no libraries, fonts, or network requests; all six workshops W1–W6 kept with their exact data, and the page is labelled as fictional demo data in the header banner and footer.
The downloadable single-file version is attached below — save it and open it in any browser, offline.
Riverside Community Workshops (fictional demo).html
Preview file
Preview