Fix broken CSS variable references and add dual-mode accessibility scans#545
Closed
Fix broken CSS variable references and add dual-mode accessibility scans#545
Conversation
Implement dynamic event pages at /events/[slug] with full event details, structured data (JSON-LD + Schema.org), per-event Open Graph meta tags, breadcrumb navigation, and accessible markup. - Add slug field to Event and ChildEvent TypeScript interfaces - Add getEventBySlug() GROQ query to Sanity client - Add getEventUrl() helper for generating internal event URLs - Create [slug].astro SSR route with event content, speakers list, child events, badges, and external website link - Extend default layout to accept description and ogType props - Update Event.vue, StaticEvent.astro, and EventChild.vue to link titles to internal event pages instead of external websites - Add backfill-slugs.mjs migration script for existing events - Add 16 E2E tests covering accessibility, structured data, meta tags, breadcrumbs, and 404 handling Closes #529, closes #531, closes #532, closes #533, closes #534, closes #535
The TimezoneSelector previously depended on EventList to fetch user geo data. When landing directly on an event detail page, geo was null and the switcher showed 'Loading timezone...' permanently. Now the component fetches /api/get-user-info itself if the data isn't already available.
EventDate and TimezoneSelector were separate Astro islands (separate Vue app instances) so they didn't share Vue reactivity. Changing the timezone in one island didn't trigger a re-render in the other. Fix by wrapping both in a single EventDateWithTimezone.vue component so they hydrate as one Vue island with shared reactive state.
Switch EventDateWithTimezone from client:load to client:only="vue" to prevent Shoelace event listener hydration mismatch that caused the timezone dropdown to stop working after a hard page refresh. Add /events/index.astro as a 301 redirect to the homepage.
Three CSS custom property references were missed when variables were renamed from --color-* to --s-color-* in the Dark Mode PR, causing the masthead foreground to fall back to inherited grey (invisible icon on purple background in light mode) and footer links to lose their color in both themes. Adds axe-core scans in explicit light and dark modes across all pages to catch theme-specific contrast regressions.
mattobee
added
bug
✅ Deploy Preview for eventua11y ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
|
|
||
| test.describe('Event detail page - 404 handling', () => { | ||
| test('non-existent slug redirects to 404', async ({ page }) => { | ||
| const response = await page.goto('/events/this-event-does-not-exist-12345'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
_light.cssand_dark.cssthat were missed when variables were renamed from--color-*to--s-color-*during the Dark Mode PR. The masthead foreground color (--c-masthead-color-fg) referenced the non-existent--color-on-primaryinstead of--s-color-on-primary, causing the theme switcher icon to render as grey on a purple background in light mode — a contrast failure. The same naming issue affected footer link colors in both themes.