Skip to content

Commit 4d2c1a2

Browse files
garyb1garyb1
authored
[Codú - #644] - Add a11y enhancements (#645)
1 parent 8f4686f commit 4d2c1a2

23 files changed

Lines changed: 362 additions & 66 deletions

File tree

‎.eslintrc.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
"parserOptions": {
44
"project": "./tsconfig.json"
55
},
6-
"plugins": ["@typescript-eslint"],
6+
"plugins": ["@typescript-eslint", "jsx-a11y"],
77
"extends": [
88
"next/core-web-vitals",
99
"plugin:@typescript-eslint/recommended",
1010
"prettier",
1111
"plugin:testing-library/react",
12-
"plugin:jest-dom/recommended"
12+
"plugin:jest-dom/recommended",
13+
"plugin:jsx-a11y/recommended"
1314
],
1415
"rules": {
1516
"@typescript-eslint/consistent-type-imports": "warn",

‎.github/workflows/alt-text-bot.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Accessibility-alt-text-bot
2+
on:
3+
issues:
4+
types: [opened, edited]
5+
pull_request:
6+
types: [opened, edited]
7+
issue_comment:
8+
types: [created, edited]
9+
discussion:
10+
types: [created, edited]
11+
discussion_comment:
12+
types: [created, edited]
13+
14+
permissions:
15+
issues: write
16+
pull-requests: write
17+
discussions: write
18+
19+
jobs:
20+
accessibility_alt_text_bot:
21+
name: Check alt text is set on issue or pull requests
22+
runs-on: ubuntu-latest
23+
steps:
24+
- name: Get action 'github/accessibility-alt-text-bot'
25+
uses: github/[email protected] # Set to latest

‎app/api/og/route.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export async function GET(request: Request) {
2929
style={{ padding: "0 88px" }}
3030
>
3131
<img
32+
alt="Codu Logo"
3233
style={{
3334
position: "absolute",
3435
height: "28px",

‎app/create/[[...paramsArr]]/_client.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -467,19 +467,27 @@ const Create = () => {
467467
</section>
468468
) : (
469469
<div className="px-4 py-6 sm:p-6 lg:pb-8">
470+
{/* TODO: FOLLOW UP WITH THIS, LABEL SHOULD BE VISIBLE */}
471+
<label htmlFor="article-title" className="sr-only">
472+
Article title
473+
</label>
470474
<input
471-
autoFocus
472475
className="border-none bg-white text-2xl leading-5 outline-none focus:bg-neutral-200 dark:bg-neutral-900 focus:dark:bg-black"
473476
placeholder="Article title"
474477
type="text"
475-
aria-label="Post Content"
478+
id="article-title"
476479
{...register("title")}
477480
/>
478481

482+
{/* TODO: FOLLOW UP WITH THIS, LABEL SHOULD BE VISIBLE */}
483+
<label htmlFor="article-content" className="sr-only">
484+
Enter Article Content
485+
</label>
479486
<CustomTextareaAutosize
480487
placeholder="Enter your content here 💖"
481488
className="mb-8 border-none bg-white text-lg shadow-none outline-none focus:bg-neutral-200 dark:bg-neutral-900 dark:focus:bg-black"
482489
minRows={25}
490+
id="article-content"
483491
{...register("body")}
484492
inputRef={textareaRef}
485493
/>

‎app/layout.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import { getServerAuthSession } from "@/server/auth";
99
import AuthProvider from "@/context/AuthProvider";
1010
import { Toaster } from "sonner";
1111
import NextTopLoader from "nextjs-toploader";
12+
import React from "react";
13+
import A11yProvider from "@/components/A11yProvider/A11yProvider";
14+
1215
// @TODO layout app in way that doesn't need to use client session check
1316
export const metadata = {
1417
title: "Codú - The Web Developer Community",
@@ -46,25 +49,28 @@ export default async function RootLayout({
4649
children: React.ReactNode;
4750
}) {
4851
const session = await getServerAuthSession();
52+
4953
return (
5054
<html lang="en" className="h-full">
5155
<Fathom />
5256
<body className="h-full" suppressHydrationWarning={true}>
53-
<NextTopLoader
54-
easing="linear"
55-
showSpinner={false}
56-
template='<div class="bar" role="bar"><div class="gradient"></div></div>'
57-
/>
58-
<Toaster />
59-
<AuthProvider>
60-
<ThemeProvider>
61-
<TRPCReactProvider headers={headers()}>
62-
<Nav session={session} />
63-
{children}
64-
<Footer />
65-
</TRPCReactProvider>
66-
</ThemeProvider>
67-
</AuthProvider>
57+
<A11yProvider>
58+
<NextTopLoader
59+
easing="linear"
60+
showSpinner={false}
61+
template='<div class="bar" role="bar"><div class="gradient"></div></div>'
62+
/>
63+
<Toaster />
64+
<AuthProvider>
65+
<ThemeProvider>
66+
<TRPCReactProvider headers={headers()}>
67+
<Nav session={session} />
68+
{children}
69+
<Footer />
70+
</TRPCReactProvider>
71+
</ThemeProvider>
72+
</AuthProvider>
73+
</A11yProvider>
6874
</body>
6975
</html>
7076
);

‎app/settings/_client.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,8 @@ const Settings = ({ profile }: { profile: User }) => {
204204
profilePhoto.status === "loading" ? (
205205
<div className="h-full w-full rounded-full border-2 bg-black" />
206206
) : (
207+
// TODO: review this
208+
// eslint-disable-next-line jsx-a11y/img-redundant-alt
207209
<img
208210
className="h-full w-full rounded-full border-2 border-white object-cover"
209211
src={`${
@@ -240,6 +242,8 @@ const Settings = ({ profile }: { profile: User }) => {
240242
profilePhoto.status === "loading" ? (
241243
<div className="h-100 w-100 h-full w-full rounded-full border-2 bg-black" />
242244
) : (
245+
// TODO: review this
246+
// eslint-disable-next-line jsx-a11y/img-redundant-alt
243247
<img
244248
className="relative h-full w-full rounded-full border-2 border-white object-cover"
245249
src={`${
@@ -338,15 +342,20 @@ const Settings = ({ profile }: { profile: User }) => {
338342
<div className="divide-y divide-neutral-200 pt-6">
339343
<div>
340344
<div className="text-neutral-600 dark:text-neutral-400">
341-
<h2 className="text-xl font-bold tracking-tight text-neutral-800 dark:text-white">
345+
<h2
346+
id="privacy-heading"
347+
className="text-xl font-bold tracking-tight text-neutral-800 dark:text-white"
348+
>
342349
Privacy
343350
</h2>
344351
<p className="mt-1 text-sm">
345352
We respect your privacy, change your settings here.
346353
</p>
347354
</div>
355+
{/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
348356
<ul
349357
role="list"
358+
aria-labelledby="privacy-heading"
350359
className="mt-2 divide-y divide-neutral-200"
351360
>
352361
<Switch.Group

‎bin/act‎

16.8 MB
Binary file not shown.

‎components/A11yProvider/A11yProvider.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client";
2+
3+
import React, { type ReactNode } from "react";
4+
import reportAccessibility from "@/utils/reportAccessibility";
5+
6+
const A11yProvider = ({ children }: { children: ReactNode }) => {
7+
reportAccessibility(React);
8+
return children;
9+
};
10+
11+
export default A11yProvider;

‎components/CommunityForm/CommunityForm.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,8 @@ export function CommunityForm(props: CommunityFormProps) {
194194
coverImage.status === "loading" ? (
195195
<div className="aspect-[16/9] h-full w-full w-full rounded-lg border-2 bg-black object-cover" />
196196
) : (
197+
// TODO Review
198+
// eslint-disable-next-line jsx-a11y/img-redundant-alt
197199
<img
198200
className="aspect-[16/9] h-full w-full w-full rounded-lg border-2 border-white object-cover object-cover"
199201
src={`${coverImage.url}`}
@@ -228,6 +230,8 @@ export function CommunityForm(props: CommunityFormProps) {
228230
coverImage.status === "loading" ? (
229231
<div className="aspect-[16/9] h-full w-full w-full rounded-lg border-2 bg-black object-cover" />
230232
) : (
233+
// TODO Review
234+
// eslint-disable-next-line jsx-a11y/img-redundant-alt
231235
<img
232236
className="relative aspect-[16/9] w-full rounded-lg border-2 border-white object-cover object-cover"
233237
src={coverImage.url}

‎components/EventForm/EventForm.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,8 @@ export function EventForm(props: EventFormProps) {
221221
coverImage.status === "loading" ? (
222222
<div className="aspect-[16/9] h-full w-full w-full rounded-lg border-2 bg-black object-cover" />
223223
) : (
224+
// TODO Review
225+
// eslint-disable-next-line jsx-a11y/img-redundant-alt
224226
<img
225227
className="aspect-[16/9] h-full w-full w-full rounded-lg border-2 border-white object-cover object-cover"
226228
src={`${coverImage.url}`}
@@ -255,6 +257,8 @@ export function EventForm(props: EventFormProps) {
255257
coverImage.status === "loading" ? (
256258
<div className="aspect-[16/9] h-full w-full w-full rounded-lg border-2 bg-black object-cover" />
257259
) : (
260+
// TODO Review
261+
// eslint-disable-next-line jsx-a11y/img-redundant-alt
258262
<img
259263
className="relative aspect-[16/9] w-full rounded-lg border-2 border-white object-cover object-cover"
260264
src={coverImage.url}

0 commit comments

Comments
 (0)