Skip to content

a11y: resolve testimonial keyboard trap and implement skip logic #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thewilloftheshadow merged 3 commits into from
Jan 28, 2026
Merged

a11y: resolve testimonial keyboard trap and implement skip logic #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8593776
a11y: resolve testimonial keyboard trap and implement skip logic
Jan 28, 2026
dfe4232
fix: keep testimonials clickable
thewilloftheshadow Jan 28, 2026
11d2d8f
fix: keep testimonials clickable (#18) (thanks @wilfriedladenhauf)
thewilloftheshadow Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

## 2026-01-27

- Home page: keep testimonial links clickable while skipping keyboard focus (#18, thanks @wilfriedladenhauf).

## 2026-01-16

- `install.sh`: warn when the user’s original shell `PATH` likely won’t find the installed `clawdbot` binary (common Node/npm global bin issues); link to docs.
Expand Down
42 changes: 40 additions & 2 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,14 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
<h2 class="section-title">
<span class="claw-accent">⟩</span> What People Say
</h2>
<a href="/shoutouts" class="section-link">View all →</a>
<a href="/shoutouts" class="section-link">View all <span class="sr-only">community shoutouts</span>
<span aria-hidden="true">→</span>
</a>
</div>
<div class="testimonials-track">
<div class="testimonials-row row-1" style={`--duration: ${duration1}s`}>
{row1.map((t) => (
<a href={t.url} target="_blank" rel="noopener" class="testimonial-card">
<a href={t.url} target="_blank" rel="noopener" class="testimonial-card" tabindex="-1">
<img
src={`https://unavatar.io/x/${t.author}`}
alt={t.author}
Expand Down Expand Up @@ -1765,6 +1767,10 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
);
}

.testimonials-track:focus-within .testimonials-row {
animation-play-state: paused;
}

.testimonials-row {
display: flex;
gap: 16px;
Expand Down Expand Up @@ -1958,4 +1964,36 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
font-size: 0.9rem;
}
}

/* Accessibility Utilities */

/* Hides content visually but keeps it available for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

/* Global Focus State: Replaces the default browser ring with your theme colors */
:focus-visible {
outline: 3px solid var(--cyan-bright);
outline-offset: 4px;
border-radius: 4px;
}

/* Respect user's system settings for reduced motion */
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
</style>