Skip to content

Commit b2bb296

Browse files
austinlparkeraustinlparker
committed
tweak visuals for accessibility and clarity
1 parent 2a238bd commit b2bb296

File tree

7 files changed

+419
-125
lines changed

7 files changed

+419
-125
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"next": "14.2.23",
1616
"react": "^18",
1717
"react-dom": "^18",
18+
"react-icons": "^5.4.0",
1819
"react-markdown": "^9.0.3",
1920
"remark-gfm": "^4.0.0"
2021
},

‎src/app/globals.css‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,50 @@
33
@tailwind utilities;
44

55
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
6+
--background: #ffffff;
7+
--foreground: #121212; /* Darker for better contrast */
8+
--link-color: #0051c3; /* WCAG AA compliant link color */
9+
--link-color-hover: #003584;
810
}
911

1012
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
13+
:root {
14+
--background: #121212;
15+
--foreground: #f8f8f8; /* Lighter for better contrast */
16+
--link-color: #60a5fa; /* WCAG AA compliant link color for dark mode */
17+
--link-color-hover: #93c5fd;
18+
}
1519
}
1620

1721
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
22+
color: var(--foreground);
23+
background: var(--background);
24+
font-family:
25+
var(--font-geist-sans),
26+
system-ui,
27+
-apple-system,
28+
sans-serif;
29+
line-height: 1.5;
30+
}
31+
32+
/* Add focus styles for keyboard navigation */
33+
*:focus-visible {
34+
outline: 3px solid #2563eb;
35+
outline-offset: 2px;
2136
}
2237

2338
@layer utilities {
24-
.text-balance {
25-
text-wrap: balance;
26-
}
39+
.text-balance {
40+
text-wrap: balance;
41+
}
42+
}
43+
44+
/* Reduced motion preferences */
45+
@media (prefers-reduced-motion: reduce) {
46+
* {
47+
animation-duration: 0.01ms !important;
48+
animation-iteration-count: 1 !important;
49+
transition-duration: 0.01ms !important;
50+
scroll-behavior: auto !important;
51+
}
2752
}

‎src/app/layout.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,23 @@ export default function RootLayout({
2424
children: React.ReactNode;
2525
}>) {
2626
return (
27-
<html lang="en">
27+
<html lang="en" className="h-full">
28+
<head>
29+
<meta name="viewport" content="width=device-width, initial-scale=1" />
30+
<meta
31+
name="description"
32+
content="Latest changes across OpenTelemetry repositories"
33+
/>
34+
</head>
2835
<body
29-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
36+
className={`${geistSans.variable} ${geistMono.variable} antialiased h-full`}
3037
>
38+
<a
39+
href="#main-content"
40+
className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-white focus:text-black"
41+
>
42+
Skip to main content
43+
</a>
3144
{children}
3245
</body>
3346
</html>

‎src/app/page.tsx‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getAllEntries } from "@/lib/store";
22
import { ChangelogList } from "@/components/list";
3+
import { RiRssFill, RiGithubFill, RiExternalLinkLine } from "react-icons/ri";
34

45
export const revalidate = 60;
56

@@ -9,7 +10,7 @@ export default async function Home() {
910
return (
1011
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
1112
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
12-
<header className="text-center mb-16">
13+
<header role="banner" className="text-center mb-16">
1314
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
1415
OpenTelemetry Changelog
1516
</h1>
@@ -19,7 +20,7 @@ export default async function Home() {
1920
Semantic Conventions, and Proto Definitions. The following items
2021
are tracked:
2122
</p>
22-
<ul className="list-disc pl-6 space-y-2 text-left">
23+
<ul className="list-disc pl-6 space-y-2 text-left" role="list">
2324
<li>Non-trivial specification changes and releases.</li>
2425
<li>
2526
New semantic convention areas or stability changes, as well as
@@ -31,57 +32,55 @@ export default async function Home() {
3132
The goal of this site is to give maintainers a single reference
3233
for important cross-functional changes.
3334
</p>
34-
<hr className="my-4" />
35+
<hr
36+
className="my-4 border-gray-200 dark:border-gray-700"
37+
role="presentation"
38+
/>
3539
<p>
3640
To add a Pull Request to this feed, label it with{" "}
37-
<code className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
41+
<code
42+
className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded"
43+
aria-label="Label name: changelog.opentelemetry.io"
44+
>
3845
changelog.opentelemetry.io
3946
</code>
4047
</p>
4148
</div>
4249
</header>
4350

44-
<main className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 p-6 sm:p-8">
51+
<main
52+
id="main-content"
53+
role="main"
54+
className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 p-6 sm:p-8"
55+
tabIndex={-1}
56+
>
4557
<div className="prose dark:prose-invert max-w-none">
4658
<ChangelogList entries={entries} />
4759
</div>
4860
</main>
4961

50-
<footer className="mt-16 text-center">
51-
<div className="space-x-6">
62+
<footer role="contentinfo" className="mt-16 text-center">
63+
<nav aria-label="Footer navigation" className="space-x-6">
5264
<a
5365
href="/feed/"
54-
className="inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
66+
className="inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1"
67+
aria-label="RSS Feed"
5568
>
56-
<svg
57-
className="w-4 h-4 mr-2"
58-
fill="currentColor"
59-
viewBox="0 0 20 20"
60-
aria-hidden="true"
61-
>
62-
<path d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z" />
63-
<path d="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1z" />
64-
<path d="M3 15a2 2 0 114 0 2 2 0 01-4 0z" />
65-
</svg>
66-
RSS Feed
69+
<RiRssFill className="w-4 h-4 mr-2" aria-hidden="true" />
70+
<span>RSS Feed</span>
6771
</a>
6872
<a
6973
href="https://github.com/open-telemetry"
7074
target="_blank"
7175
rel="noopener noreferrer"
72-
className="inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
76+
className="inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1"
77+
aria-label="OpenTelemetry on GitHub (opens in new tab)"
7378
>
74-
<svg
75-
className="w-4 h-4 mr-2"
76-
fill="currentColor"
77-
viewBox="0 0 24 24"
78-
aria-hidden="true"
79-
>
80-
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
81-
</svg>
82-
GitHub
79+
<RiGithubFill className="w-4 h-4 mr-2" aria-hidden="true" />
80+
<span>GitHub</span>
81+
<RiExternalLinkLine className="w-3 h-3 ml-1" aria-hidden="true" />
8382
</a>
84-
</div>
83+
</nav>
8584
<p className="mt-6 text-sm text-gray-500 dark:text-gray-400">
8685
Built with Next.js and Tailwind CSS
8786
</p>

0 commit comments

Comments
 (0)