perf/a11y: conditional Calendly load, shimmer viewport pause, skip link, ARIA tabs, reduced-motion fixes#65
Merged
Conversation
- Conditional Calendly CSS/JS load: only included on homepage, eliminating ~80KB of external assets on /blog, /privacy, etc. - Add preconnect hint for assets.calendly.com (homepage only) - Enable shimmer viewport pause: set data-shimmer-viewport-pause after initial IntersectionObserver fires so off-screen iridescent tiles pause their GPU animation - Add skip-to-main-content link for keyboard/screen-reader users with Phosphor-styled CSS in global.css - Services tabs: add ARIA-compliant keyboard navigation (ArrowLeft, ArrowRight, Home, End) per WAI-ARIA tabs pattern - RssFeed: skeleton loader now renders maxItems cards instead of a hardcoded 3, matching the real loaded count - Portfolio marquee: pause animation for prefers-reduced-motion users - Hero scroll indicator: suppress animate-bounce for reduced motion - Contact form: connect field error messages via aria-describedby for improved screen reader announcement
Copilot
AI
changed the title
perf/ux: performance, accessibility & animation improvements
perf/a11y: conditional Calendly load, shimmer viewport pause, skip link, ARIA tabs, reduced-motion fixes
May 29, 2026
Copilot created this pull request from a session on behalf of
jaypatrick
May 29, 2026 06:32
View session
jaypatrick
added
documentation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves site performance and accessibility across the Astro layout and several Svelte sections, while tightening reduced-motion behavior and fixing a small UX mismatch in the RSS skeleton loader.
Changes:
- Conditionally loads Calendly assets only on the homepage, adds a Calendly preconnect, and enables the shimmer viewport-pause gate.
- Adds a global skip-to-content link + styling, improves Services tab keyboard navigation, and connects Contact form errors to inputs via
aria-describedby. - Adds reduced-motion overrides for the Hero bounce indicator and Portfolio marquee; aligns RSS skeleton count with
maxItems.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | Adds reduced-motion suppression for .animate-bounce and introduces .skip-link styling. |
| src/layouts/BaseLayout.astro | Gates Calendly asset loading to /, adds skip link markup, and activates shimmer viewport pause via data-shimmer-viewport-pause. |
| src/components/sections/Services.svelte | Adds WAI-ARIA-style keyboard navigation for the services tablist. |
| src/components/sections/RssFeed.svelte | Uses maxItems to determine skeleton placeholder count. |
| src/components/sections/Portfolio.svelte | Disables the clients marquee animation under prefers-reduced-motion. |
| src/components/sections/Contact.svelte | Links field-level error text to inputs via stable IDs + aria-describedby. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
Several independent issues across performance, accessibility, and motion consistency — none breaking, but collectively worth addressing.
Performance
pathname === '/'. Eliminates an external stylesheet + script fetch on/blog,/privacy,404, etc.preconnectforassets.calendly.comadded alongside the conditional load.IntersectionObservertracked.shimmer-in-viewcorrectly, butdata-shimmer-viewport-pause="true"was never set on<html>, so the CSS gate (html[data-shimmer-viewport-pause="true"] .iridescent:not(.shimmer-in-view)::after { animation-play-state: paused }) never fired. Now set viarequestAnimationFrameafter initial IO callbacks to avoid a flash-of-paused-shimmer on visible tiles.Accessibility
<a href="#main-content" class="skip-link">that surfaces on focus; styled with Phosphor tokens.role="tab"markup was correct but no keydown handler existed. AddedArrowLeft,ArrowRight,Home,Endwith focus management per WAI-ARIA tabs pattern.<p>elements now have stable IDs (contact-name-error, etc.) and inputs have matchingaria-describedby, complementing the existingrole="alert".Motion consistency
.clients-trackmarquee had noprefers-reduced-motionoverride — added alongside the existingsignal-lock-sweepoverride in the same media block.animate-bounce(scroll indicator) had no reduced-motion guard — added to the global@media (prefers-reduced-motion: reduce)block inglobal.css.UX
maxItemsprop (default 5) — now usesmaxItemsso skeleton layout matches the loaded grid.