Fix SEO, accessibility, and mobile-text issues in events template - #701
Open
keren-viner wants to merge 1 commit into
Open
Fix SEO, accessibility, and mobile-text issues in events template#701keren-viner wants to merge 1 commit into
keren-viner wants to merge 1 commit into
Conversation
Addresses the findings from an AGENTS.md-standards audit of astro/events: SEO - events/[slug].astro: fall back to a title built from the event's own data when the SEO tags service fails to load, instead of shipping a page with no <title> at all. - index.astro / about.astro: stop hardcoding <Layout title=...> on main pages so Wix's dashboard-managed SEO middleware can own them, matching the documented cms-catalog pattern. Accessibility - Layout.astro: restore a visible focus ring on .card (previously `all: unset` wiped it) and on .rsvp-field input (previously `outline: none` with no replacement). - EventDetail.jsx (RsvpForm): connect labels to inputs via htmlFor/id, add required/aria-required, wire aria-invalid/aria-describedby to the error message, move focus to the first invalid field on submit, and prefill name/email from the signed-in member instead of re-asking. - EventDetail.jsx / AppIsland.jsx: add aria-expanded to the mobile menu toggle, aria-label the header/footer nav landmarks, and give the ticket quantity +/- buttons real accessible names. - EventDetail.jsx: format ticket prices with Intl.NumberFormat instead of concatenating currency + value (the events Money type has no formatted-string field, unlike commerce's formattedAmount). - Layout.astro: fix color contrast on .body-copy, .muted, .card-action, .quote-sec, .footer-copy, and .tier-desc (several were rendering real content below the 4.5:1 minimum), and bump every text class under the 14px minimum (.error, .card-action, .tier-desc, .eyebrow, .pill.sm, .banner, .logout-btn, .card-name, .card-price, .rsvp-field label, .footer nav p) up to 14px.
👷 Deploy request for wix-commerce-ticketing-nextjs pending review.Visit the deploys page to approve it
|
👷 Deploy request for wix-appointments-subscriptions-nextjs pending review.Visit the deploys page to approve it
|
👷 Deploy request for wix-classes-subscriptions-nextjs pending review.Visit the deploys page to approve it
|
👷 Deploy request for wix-headless-example pending review.Visit the deploys page to approve it
|
👷 Deploy request for wix-cms-nextjs-template pending review.Visit the deploys page to approve it
|
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
Fixes from an AGENTS.md-standards audit of
astro/events(SEO, accessibility, mobile responsiveness). Mobile responsiveness passed cleanly, so this PR covers the SEO and accessibility findings only.SEO
events/[slug].astro: fall back to a title built from the event's own data when the SEO tags service fails to load, instead of shipping a page with no<title>at all.index.astro/about.astro: stop hardcoding<Layout title=...>on main pages so Wix's dashboard-managed SEO middleware can own them (matches the documentedcms-catalogpattern).Accessibility
.card(all: unsethad wiped it) and.rsvp-field input(outline: nonewith no replacement).RsvpForm: connected labels to inputs viahtmlFor/id, addedrequired/aria-required, wiredaria-invalid/aria-describedbyto the error message, moved focus to the first invalid field on submit, and prefilled name/email from the signed-in member instead of re-asking for known info.aria-expandedto the mobile menu toggle,aria-labels on the header/footer nav landmarks, and real accessible names on the ticket quantity +/- buttons.Intl.NumberFormatinstead of concatenatingcurrency + value—@wix/events'Moneytype has no pre-formatted string field (unlike commerce'sformattedAmount), so naive concatenation would misplace currency symbols/spacing in non-US locales..body-copy,.muted,.card-action,.quote-sec,.footer-copy, and.tier-desc— several were rendering real content below the 4.5:1 minimum..error,.card-action,.tier-desc,.eyebrow,.pill.sm,.banner,.logout-btn,.card-name,.card-price,.rsvp-field label,.footer nav p) up to 14px. Left the 12px avatar-monogram initial alone since it's a decorative single-letter glyph, not body text.Not addressed: the audit's hardcoded-
aria-label/i18n finding — this repo has no i18n infrastructure in any Astro template (single-language customer sites), so that rule doesn't apply here as written.Test plan
wix headless init --site-template events --template-path <copy-without-node_modules>per the repo's own testing instructions, then exercise: home page tab order and focus rings, mobile menu toggle (keyboard + screen reader), RSVP form validation/error announcement/focus, ticket picker quantity buttons and price display, About page contrast.