Skip to content

Commit b446c51

Browse files
Copilotrezwana-karim
Copilot
and
rezwana-karim
committed
Add Phase 3 legal/compliance pages: privacy, terms, code-of-conduct, accessibility, showcase
Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
1 parent dbc4269 commit b446c51

5 files changed

Lines changed: 1811 additions & 0 deletions

File tree

‎src/app/accessibility/page.tsx‎

Lines changed: 393 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
import { Container } from "@/components/ui/container"
2+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
3+
import { Button } from "@/components/ui/button"
4+
import { AccessibilityIcon, EyeOpenIcon, UpdateIcon } from "@radix-ui/react-icons"
5+
import type { Metadata } from "next"
6+
7+
export const metadata: Metadata = {
8+
title: "Accessibility Statement",
9+
description: "Our commitment to making CodeStorm Hub accessible to everyone, including people with disabilities.",
10+
openGraph: {
11+
title: "Accessibility Statement | CodeStorm Hub",
12+
description: "Our commitment to making CodeStorm Hub accessible to everyone, including people with disabilities.",
13+
},
14+
}
15+
16+
const accessibilityFeatures = [
17+
{
18+
title: "Keyboard Navigation",
19+
description: "Full keyboard navigation support for all interactive elements",
20+
details: [
21+
"Tab navigation through all interactive elements",
22+
"Skip links to main content and navigation",
23+
"Visible focus indicators",
24+
"Logical tab order throughout the site",
25+
],
26+
},
27+
{
28+
title: "Screen Reader Support",
29+
description: "Semantic HTML and ARIA labels for assistive technologies",
30+
details: [
31+
"Semantic HTML structure with proper headings",
32+
"Alt text for all informative images",
33+
"ARIA labels and descriptions where needed",
34+
"Screen reader tested with NVDA and JAWS",
35+
],
36+
},
37+
{
38+
title: "Visual Design",
39+
description: "High contrast and scalable design for better readability",
40+
details: [
41+
"WCAG AA compliant color contrast ratios",
42+
"Scalable text up to 200% without horizontal scrolling",
43+
"No use of color alone to convey information",
44+
"Clear visual hierarchy and spacing",
45+
],
46+
},
47+
{
48+
title: "Responsive Design",
49+
description: "Works across all devices and screen sizes",
50+
details: [
51+
"Mobile-first responsive design",
52+
"Touch-friendly interactive elements",
53+
"Consistent experience across devices",
54+
"Optimized for various screen sizes",
55+
],
56+
},
57+
]
58+
59+
const wcagCompliance = [
60+
{
61+
level: "Level A",
62+
status: "Compliant",
63+
description: "Basic accessibility features that don't interfere with standard website usage",
64+
},
65+
{
66+
level: "Level AA",
67+
status: "Mostly Compliant",
68+
description: "Standard level of accessibility that removes barriers for most users",
69+
},
70+
{
71+
level: "Level AAA",
72+
status: "Partially Compliant",
73+
description: "Highest level of accessibility - we're working toward full compliance",
74+
},
75+
]
76+
77+
export default function AccessibilityPage() {
78+
return (
79+
<div className="py-12">
80+
<Container>
81+
<div className="space-y-12">
82+
{/* Hero */}
83+
<div className="text-center space-y-4">
84+
<h1 className="text-4xl font-bold tracking-tight">Accessibility Statement</h1>
85+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
86+
CodeStorm Hub is committed to ensuring digital accessibility for all users,
87+
including people with disabilities. We continually work to improve the user experience for everyone.
88+
</p>
89+
<p className="text-sm text-muted-foreground">
90+
Last updated: January 15, 2024
91+
</p>
92+
</div>
93+
94+
{/* Commitment */}
95+
<Card className="bg-primary/5 border-primary/20">
96+
<CardHeader className="text-center">
97+
<div className="w-16 h-16 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
98+
<AccessibilityIcon className="h-8 w-8 text-primary" />
99+
</div>
100+
<CardTitle className="text-2xl">Our Commitment</CardTitle>
101+
</CardHeader>
102+
<CardContent className="text-center space-y-4">
103+
<p className="text-muted-foreground max-w-4xl mx-auto text-lg">
104+
We believe that the web should be accessible to everyone, regardless of ability or technology.
105+
Our goal is to create an inclusive experience that allows all users to access our content
106+
and participate in our community effectively.
107+
</p>
108+
<p className="text-muted-foreground max-w-4xl mx-auto">
109+
We are committed to conforming to the Web Content Accessibility Guidelines (WCAG) 2.1
110+
at Level AA, which are the international standards for web accessibility.
111+
</p>
112+
</CardContent>
113+
</Card>
114+
115+
{/* Accessibility Features */}
116+
<div>
117+
<div className="text-center mb-8">
118+
<h2 className="text-3xl font-bold mb-4">Accessibility Features</h2>
119+
<p className="text-muted-foreground max-w-2xl mx-auto">
120+
Here are some of the accessibility features we&apos;ve implemented to ensure
121+
our platform works for everyone.
122+
</p>
123+
</div>
124+
125+
<div className="space-y-6">
126+
{accessibilityFeatures.map((feature, index) => (
127+
<Card key={index}>
128+
<CardHeader>
129+
<CardTitle className="text-xl">{feature.title}</CardTitle>
130+
<CardDescription className="text-base">{feature.description}</CardDescription>
131+
</CardHeader>
132+
<CardContent>
133+
<ul className="space-y-2">
134+
{feature.details.map((detail, detailIndex) => (
135+
<li key={detailIndex} className="flex items-start gap-2 text-sm">
136+
<span className="w-1.5 h-1.5 bg-green-600 rounded-full mt-2 flex-shrink-0" />
137+
<span className="text-muted-foreground">{detail}</span>
138+
</li>
139+
))}
140+
</ul>
141+
</CardContent>
142+
</Card>
143+
))}
144+
</div>
145+
</div>
146+
147+
{/* WCAG Compliance */}
148+
<div>
149+
<div className="text-center mb-8">
150+
<h2 className="text-3xl font-bold mb-4">WCAG 2.1 Compliance</h2>
151+
<p className="text-muted-foreground max-w-2xl mx-auto">
152+
Our current compliance status with Web Content Accessibility Guidelines.
153+
</p>
154+
</div>
155+
156+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
157+
{wcagCompliance.map((item, index) => (
158+
<Card key={index} className="text-center">
159+
<CardHeader>
160+
<CardTitle className="text-lg">{item.level}</CardTitle>
161+
<div className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
162+
item.status === 'Compliant'
163+
? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
164+
: item.status === 'Mostly Compliant'
165+
? 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400'
166+
: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400'
167+
}`}>
168+
{item.status}
169+
</div>
170+
</CardHeader>
171+
<CardContent>
172+
<p className="text-sm text-muted-foreground">{item.description}</p>
173+
</CardContent>
174+
</Card>
175+
))}
176+
</div>
177+
</div>
178+
179+
{/* Testing and Validation */}
180+
<Card>
181+
<CardHeader>
182+
<CardTitle className="text-2xl">Testing and Validation</CardTitle>
183+
<CardDescription>
184+
How we ensure our accessibility standards
185+
</CardDescription>
186+
</CardHeader>
187+
<CardContent className="space-y-6">
188+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
189+
<div>
190+
<h3 className="text-lg font-semibold mb-3">Automated Testing</h3>
191+
<ul className="space-y-2 text-sm text-muted-foreground">
192+
<li>• axe-core accessibility testing in CI/CD pipeline</li>
193+
<li>• Lighthouse accessibility audits</li>
194+
<li>• WAVE Web Accessibility Evaluation Tool</li>
195+
<li>• Color contrast ratio verification</li>
196+
</ul>
197+
</div>
198+
<div>
199+
<h3 className="text-lg font-semibold mb-3">Manual Testing</h3>
200+
<ul className="space-y-2 text-sm text-muted-foreground">
201+
<li>• Keyboard navigation testing</li>
202+
<li>• Screen reader testing (NVDA, JAWS, VoiceOver)</li>
203+
<li>• User testing with people with disabilities</li>
204+
<li>• Cross-browser accessibility validation</li>
205+
</ul>
206+
</div>
207+
</div>
208+
209+
<div className="bg-muted/50 p-4 rounded-lg">
210+
<h4 className="font-semibold mb-2">Continuous Improvement</h4>
211+
<p className="text-sm text-muted-foreground">
212+
We conduct regular accessibility audits and user testing sessions to identify
213+
and address accessibility barriers. Our development process includes accessibility
214+
considerations from the design phase through implementation.
215+
</p>
216+
</div>
217+
</CardContent>
218+
</Card>
219+
220+
{/* Known Issues */}
221+
<Card className="border-orange-200 dark:border-orange-800">
222+
<CardHeader>
223+
<CardTitle className="text-2xl">Known Accessibility Issues</CardTitle>
224+
<CardDescription>
225+
Areas we&apos;re actively working to improve
226+
</CardDescription>
227+
</CardHeader>
228+
<CardContent className="space-y-4">
229+
<p className="text-muted-foreground">
230+
We are transparent about areas where we don&apos;t yet fully meet accessibility standards:
231+
</p>
232+
233+
<div className="space-y-4">
234+
<div>
235+
<h4 className="font-semibold mb-2">Third-Party Integrations</h4>
236+
<p className="text-sm text-muted-foreground">
237+
Some embedded content from third-party services (like GitHub widgets)
238+
may not fully meet our accessibility standards. We&apos;re working with providers
239+
to improve these experiences.
240+
</p>
241+
</div>
242+
243+
<div>
244+
<h4 className="font-semibold mb-2">Complex Interactive Elements</h4>
245+
<p className="text-sm text-muted-foreground">
246+
Some advanced interactive features are still being enhanced for full
247+
screen reader compatibility. We provide alternative access methods where possible.
248+
</p>
249+
</div>
250+
</div>
251+
252+
<div className="bg-orange-50 dark:bg-orange-900/20 p-4 rounded-lg border border-orange-200 dark:border-orange-800">
253+
<p className="text-sm text-orange-800 dark:text-orange-300">
254+
We&apos;re actively working to address these issues and expect to have improvements
255+
in upcoming releases. Check our roadmap for specific timelines.
256+
</p>
257+
</div>
258+
</CardContent>
259+
</Card>
260+
261+
{/* Assistive Technologies */}
262+
<Card>
263+
<CardHeader>
264+
<CardTitle className="text-2xl">Supported Assistive Technologies</CardTitle>
265+
</CardHeader>
266+
<CardContent className="space-y-4">
267+
<p className="text-muted-foreground">
268+
Our website is designed to be compatible with the following assistive technologies:
269+
</p>
270+
271+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
272+
<div>
273+
<h4 className="font-semibold mb-2">Screen Readers</h4>
274+
<ul className="space-y-1 text-sm text-muted-foreground">
275+
<li>• NVDA (Windows)</li>
276+
<li>• JAWS (Windows)</li>
277+
<li>• VoiceOver (macOS/iOS)</li>
278+
<li>• TalkBack (Android)</li>
279+
</ul>
280+
</div>
281+
<div>
282+
<h4 className="font-semibold mb-2">Other Technologies</h4>
283+
<ul className="space-y-1 text-sm text-muted-foreground">
284+
<li>• Voice recognition software</li>
285+
<li>• Switch navigation devices</li>
286+
<li>• Magnification software</li>
287+
<li>• Alternative keyboards</li>
288+
</ul>
289+
</div>
290+
</div>
291+
</CardContent>
292+
</Card>
293+
294+
{/* Feedback */}
295+
<Card className="bg-primary/5 border-primary/20">
296+
<CardHeader className="text-center">
297+
<div className="flex items-center justify-center gap-3">
298+
<EyeOpenIcon className="h-6 w-6 text-primary" />
299+
<CardTitle className="text-2xl">Accessibility Feedback</CardTitle>
300+
</div>
301+
<CardDescription className="text-base">
302+
Help us improve by sharing your experience
303+
</CardDescription>
304+
</CardHeader>
305+
<CardContent className="text-center space-y-4">
306+
<p className="text-muted-foreground max-w-2xl mx-auto">
307+
We welcome feedback on the accessibility of CodeStorm Hub. If you encounter
308+
accessibility barriers or have suggestions for improvement, please let us know.
309+
</p>
310+
311+
<div className="space-y-2 text-sm text-muted-foreground">
312+
<p><strong>Email:</strong> accessibility@codestorm-hub.org</p>
313+
<p><strong>Response time:</strong> We aim to respond within 2 business days</p>
314+
</div>
315+
316+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
317+
<Button asChild>
318+
<a href="/contact">
319+
Contact Us
320+
</a>
321+
</Button>
322+
<Button variant="outline" asChild>
323+
<a
324+
href="https://github.com/CodeStorm-Hub/CodeStorm-Hub.github.io/issues/new"
325+
target="_blank"
326+
rel="noopener noreferrer"
327+
>
328+
Report Issue
329+
</a>
330+
</Button>
331+
</div>
332+
</CardContent>
333+
</Card>
334+
335+
{/* Future Improvements */}
336+
<Card>
337+
<CardHeader>
338+
<div className="flex items-center gap-3">
339+
<UpdateIcon className="h-6 w-6 text-primary" />
340+
<div>
341+
<CardTitle className="text-2xl">Future Improvements</CardTitle>
342+
<CardDescription>
343+
Our roadmap for enhanced accessibility
344+
</CardDescription>
345+
</div>
346+
</div>
347+
</CardHeader>
348+
<CardContent className="space-y-4">
349+
<p className="text-muted-foreground">
350+
We&apos;re continuously working to improve accessibility. Here&apos;s what&apos;s coming next:
351+
</p>
352+
353+
<div className="space-y-3">
354+
<div className="flex items-start gap-2">
355+
<span className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2 flex-shrink-0" />
356+
<span className="text-sm text-muted-foreground">
357+
Enhanced keyboard navigation patterns for complex components
358+
</span>
359+
</div>
360+
<div className="flex items-start gap-2">
361+
<span className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2 flex-shrink-0" />
362+
<span className="text-sm text-muted-foreground">
363+
Improved screen reader announcements for dynamic content
364+
</span>
365+
</div>
366+
<div className="flex items-start gap-2">
367+
<span className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2 flex-shrink-0" />
368+
<span className="text-sm text-muted-foreground">
369+
High contrast theme option for better visual accessibility
370+
</span>
371+
</div>
372+
<div className="flex items-start gap-2">
373+
<span className="w-1.5 h-1.5 bg-blue-600 rounded-full mt-2 flex-shrink-0" />
374+
<span className="text-sm text-muted-foreground">
375+
Animation controls for users with vestibular disorders
376+
</span>
377+
</div>
378+
</div>
379+
380+
<div className="mt-4">
381+
<Button variant="outline" asChild>
382+
<a href="/roadmap">
383+
View Full Roadmap
384+
</a>
385+
</Button>
386+
</div>
387+
</CardContent>
388+
</Card>
389+
</div>
390+
</Container>
391+
</div>
392+
)
393+
}

0 commit comments

Comments
 (0)