Skip to content

Commit 9891f49

Browse files
Thomas StrombergThomas Stromberg
Thomas Stromberg
authored and
Thomas Stromberg
committed
accessibility improvements
1 parent dc4b0dc commit 9891f49

File tree

3 files changed

+82
-41
lines changed

3 files changed

+82
-41
lines changed

‎src/_layouts/base.njk‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2121
</head>
2222
<body>
23-
<nav class="nav">
23+
<a href="#main-content" class="skip-link">Skip to main content</a>
24+
<nav class="nav" aria-label="Main navigation">
2425
<div class="nav-accent-angle"></div>
2526
<div class="nav-logo">
2627
<a href="/"><span class="logo-prefix">≡</span>codeGROOVE</a>
@@ -33,7 +34,7 @@
3334
</ul>
3435
</nav>
3536

36-
<main>
37+
<main id="main-content">
3738
{{ content | safe }}
3839
</main>
3940
</body>

‎src/assets/css/style.css‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,10 @@ body {
104104
text-decoration: none;
105105
transition: color 0.2s;
106106
display: block;
107-
padding: 8px 0;
107+
padding: 8px 12px;
108+
min-height: 44px;
109+
display: flex;
110+
align-items: center;
108111
}
109112

110113
.nav-links a:hover {
@@ -116,6 +119,37 @@ body {
116119
opacity: 0.75;
117120
}
118121

122+
/* Accessibility: Focus Indicators */
123+
a:focus-visible,
124+
button:focus-visible {
125+
outline: 3px solid var(--cyan);
126+
outline-offset: 2px;
127+
}
128+
129+
/* Ensure sufficient touch target size for interactive elements */
130+
button,
131+
[role="button"] {
132+
min-width: 44px;
133+
min-height: 44px;
134+
}
135+
136+
/* Skip to content link */
137+
.skip-link {
138+
position: absolute;
139+
top: -40px;
140+
left: 0;
141+
background: var(--cyan);
142+
color: var(--black);
143+
padding: 8px 16px;
144+
text-decoration: none;
145+
font-weight: 700;
146+
z-index: 200;
147+
}
148+
149+
.skip-link:focus {
150+
top: 0;
151+
}
152+
119153
/* Hero Section */
120154
.hero {
121155
position: relative;
@@ -530,6 +564,12 @@ body {
530564
cursor: pointer;
531565
}
532566

567+
.screenshot-item a:focus-visible {
568+
outline: 3px solid var(--cyan);
569+
outline-offset: 4px;
570+
border-radius: 4px;
571+
}
572+
533573
.screenshot-item img {
534574
width: 100%;
535575
height: auto;

‎src/products/ready-to-review.njk‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ layout: base.njk
33
title: Ready to Review - Eliminate PR coordination overhead
44
---
55

6-
<section class="content-hero">
7-
<img src="/assets/hero-bg.jpg" alt="Abstract technical background pattern" class="content-hero-bg" />
6+
<section class="content-hero" aria-labelledby="page-title">
7+
<img src="/assets/hero-bg.jpg" alt="" role="presentation" class="content-hero-bg" />
88

99
<div class="content-hero-inner">
10-
<h1>READY TO REVIEW</h1>
10+
<h1 id="page-title">READY TO REVIEW</h1>
1111

1212
<div style="background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
1313
<div style="display: flex; align-items: center; gap: 30px; flex-wrap: wrap;">
@@ -45,42 +45,42 @@ title: Ready to Review - Eliminate PR coordination overhead
4545

4646
<h2>SCREENSHOTS</h2>
4747
<div class="screenshot-grid">
48-
<div class="screenshot-item">
49-
<a href="/assets/screenshots/slack-screenshot.png" target="_blank" rel="noopener noreferrer">
48+
<figure class="screenshot-item">
49+
<a href="/assets/screenshots/slack-screenshot.png" target="_blank" rel="noopener noreferrer" aria-label="View full size Slack channel notifications screenshot (opens in new tab)">
5050
<picture>
5151
<source srcset="/assets/screenshots/slack-screenshot.webp" type="image/webp">
52-
<img src="/assets/screenshots/slack-screenshot.png" alt="Slack channel notifications with real-time status updates" loading="lazy" />
52+
<img src="/assets/screenshots/slack-screenshot.png" alt="Slack channel showing Ready to Review bot posting PR status updates including CI checks and reviewer assignments" loading="lazy" />
5353
</picture>
5454
</a>
55-
<p class="screenshot-caption">Slack channel notifications with real-time status updates</p>
56-
</div>
57-
<div class="screenshot-item">
58-
<a href="/assets/screenshots/slack-screenshot-home.png" target="_blank" rel="noopener noreferrer">
55+
<figcaption class="screenshot-caption">Slack channel notifications with real-time status updates</figcaption>
56+
</figure>
57+
<figure class="screenshot-item">
58+
<a href="/assets/screenshots/slack-screenshot-home.png" target="_blank" rel="noopener noreferrer" aria-label="View full size Slack app home screenshot (opens in new tab)">
5959
<picture>
6060
<source srcset="/assets/screenshots/slack-screenshot-home.webp" type="image/webp">
61-
<img src="/assets/screenshots/slack-screenshot-home.png" alt="Slack app home showing user dashboard" loading="lazy" />
61+
<img src="/assets/screenshots/slack-screenshot-home.png" alt="Slack app home displaying personal dashboard with assigned PRs, review requests, and activity summary" loading="lazy" />
6262
</picture>
6363
</a>
64-
<p class="screenshot-caption">App home showing your personal dashboard</p>
65-
</div>
66-
<div class="screenshot-item">
67-
<a href="/assets/screenshots/goose-screenshot.png" target="_blank" rel="noopener noreferrer">
64+
<figcaption class="screenshot-caption">App home showing your personal dashboard</figcaption>
65+
</figure>
66+
<figure class="screenshot-item">
67+
<a href="/assets/screenshots/goose-screenshot.png" target="_blank" rel="noopener noreferrer" aria-label="View full size Goose desktop notifications screenshot (opens in new tab)">
6868
<picture>
6969
<source srcset="/assets/screenshots/goose-screenshot.webp" type="image/webp">
70-
<img src="/assets/screenshots/goose-screenshot.png" alt="Native desktop notifications from Goose" loading="lazy" />
70+
<img src="/assets/screenshots/goose-screenshot.png" alt="Native desktop notification from Goose showing PR review request with one-click action to open in browser" loading="lazy" />
7171
</picture>
7272
</a>
73-
<p class="screenshot-caption">Native notifications (macOS, Linux, Windows)</p>
74-
</div>
75-
<div class="screenshot-item">
76-
<a href="/assets/screenshots/r2r-800.png" target="_blank" rel="noopener noreferrer">
73+
<figcaption class="screenshot-caption">Native notifications (macOS, Linux, Windows)</figcaption>
74+
</figure>
75+
<figure class="screenshot-item">
76+
<a href="/assets/screenshots/r2r-800.png" target="_blank" rel="noopener noreferrer" aria-label="View full size Ready to Review web dashboard screenshot (opens in new tab)">
7777
<picture>
7878
<source srcset="/assets/screenshots/r2r-800.webp" type="image/webp">
79-
<img src="/assets/screenshots/r2r-800.png" alt="Ready to Review dashboard showing PR status and assignments" loading="lazy" />
79+
<img src="/assets/screenshots/r2r-800.png" alt="Ready to Review web dashboard displaying list of pull requests with status indicators, assigned reviewers, and next action needed" loading="lazy" />
8080
</picture>
8181
</a>
82-
<p class="screenshot-caption">Web dashboard - track all PRs at a glance</p>
83-
</div>
82+
<figcaption class="screenshot-caption">Web dashboard - track all PRs at a glance</figcaption>
83+
</figure>
8484
</div>
8585

8686
<div style="background: var(--black); border: 8px solid var(--yellow); border-radius: 20px; padding: 30px; margin: 40px 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);">
@@ -103,11 +103,11 @@ title: Ready to Review - Eliminate PR coordination overhead
103103
<p style="margin-top: 30px; margin-bottom: 0;"><strong>Result: 20X faster code reviews — but don't take our word for it, <a href="https://cost.github.codegroove.app/?mode=org">measure your own improvement</a></strong></p>
104104
</div>
105105

106-
<h2>PRICING</h2>
107-
<div class="pricing-grid">
108-
<div class="pricing-tier">
106+
<h2 id="pricing-section">PRICING</h2>
107+
<div class="pricing-grid" role="list" aria-labelledby="pricing-section">
108+
<article class="pricing-tier" role="listitem" aria-labelledby="tier-grassroots">
109109
<div class="pricing-tier-header">
110-
<h3 class="pricing-tier-name">Grass Roots</h3>
110+
<h3 class="pricing-tier-name" id="tier-grassroots">Grass Roots</h3>
111111
<div class="pricing-tier-price">
112112
<span class="pricing-price-amount">Free</span>
113113
</div>
@@ -122,11 +122,11 @@ title: Ready to Review - Eliminate PR coordination overhead
122122
<li>Leaderboard</li>
123123
</ul>
124124
</div>
125-
</div>
125+
</article>
126126

127-
<div class="pricing-tier pricing-tier-featured">
127+
<article class="pricing-tier pricing-tier-featured" role="listitem" aria-labelledby="tier-superfan">
128128
<div class="pricing-tier-header">
129-
<h3 class="pricing-tier-name">Super-fan</h3>
129+
<h3 class="pricing-tier-name" id="tier-superfan">Super-fan</h3>
130130
<div class="pricing-tier-price">
131131
<span class="pricing-price-currency">$</span><span class="pricing-price-amount">1</span><span class="pricing-price-period">/mo</span>
132132
</div>
@@ -138,11 +138,11 @@ title: Ready to Review - Eliminate PR coordination overhead
138138
<li>Support for private repos</li>
139139
</ul>
140140
</div>
141-
</div>
141+
</article>
142142

143-
<div class="pricing-tier pricing-tier-featured">
143+
<article class="pricing-tier pricing-tier-featured" role="listitem" aria-labelledby="tier-mainstage">
144144
<div class="pricing-tier-header">
145-
<h3 class="pricing-tier-name">Main Stage</h3>
145+
<h3 class="pricing-tier-name" id="tier-mainstage">Main Stage</h3>
146146
<div class="pricing-tier-price">
147147
<span class="pricing-price-currency">$</span><span class="pricing-price-amount">6</span><span class="pricing-price-period">/mo</span>
148148
</div>
@@ -156,11 +156,11 @@ title: Ready to Review - Eliminate PR coordination overhead
156156
<li>Priority support</li>
157157
</ul>
158158
</div>
159-
</div>
159+
</article>
160160

161-
<div class="pricing-tier">
161+
<article class="pricing-tier" role="listitem" aria-labelledby="tier-funkmaster">
162162
<div class="pricing-tier-header">
163-
<h3 class="pricing-tier-name">Funk Master</h3>
163+
<h3 class="pricing-tier-name" id="tier-funkmaster">Funk Master</h3>
164164
<div class="pricing-tier-price">
165165
<span class="pricing-price-currency">$</span><span class="pricing-price-amount">12</span><span class="pricing-price-period">/mo</span>
166166
</div>
@@ -173,7 +173,7 @@ title: Ready to Review - Eliminate PR coordination overhead
173173
<li>Security questionnaire support</li>
174174
</ul>
175175
</div>
176-
</div>
176+
</article>
177177
</div>
178178

179179
<div class="info-box" style="margin-top: 40px;">
@@ -185,7 +185,7 @@ title: Ready to Review - Eliminate PR coordination overhead
185185
<div class="groove-card groove-card--yellow" style="text-align: center; padding: 40px;">
186186
<p style="font-size: 24px; font-weight: 700; margin-bottom: 20px; color: var(--white);">Ready to merge 20X faster?</p>
187187
<p style="margin-bottom: 30px; font-size: 18px; color: var(--white);">Sign up takes 30 seconds. Free for open source projects, forever.</p>
188-
<a href="https://github.com/apps/ready-to-review-beta" style="display: inline-block; background: var(--cyan); color: var(--black); padding: 16px 32px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 18px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(92, 225, 230, 0.4);">Start Now →</a>
188+
<a href="https://github.com/apps/ready-to-review-beta" role="button" aria-label="Install Ready to Review GitHub App" style="display: inline-block; background: var(--cyan); color: var(--black); padding: 16px 32px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 18px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(92, 225, 230, 0.4);">Start Now →</a>
189189
<p style="margin-top: 30px; font-size: 16px; color: var(--white);">Questions? Email <a href="mailto:go-faster@codegroove.dev" style="color: var(--cyan); text-decoration: underline;">go-faster@codegroove.dev</a></p>
190190
</div>
191191
</div>

0 commit comments

Comments
 (0)