Skip to content

Commit 2397045

Browse files
amanmahajan7amanmahajan7
authored
Fix a few accessibility issues (Comcast#3816)
* Add `aria-label` * group radiop buttons * Associate h1 with the main landmark * Apply lighthouse suggestions * Split nav * Revert 1 change * remove import
1 parent ac978ee commit 2397045

22 files changed

Lines changed: 103 additions & 59 deletions

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
56
<title>React Data Grid</title>
67
<meta name="description" content="Feature-rich and customizable data grid React component." />
78
</head>

‎website/Nav.tsx‎

Lines changed: 72 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,33 @@
1+
import { useId } from 'react';
12
import { Link } from '@tanstack/react-router';
23
import { css } from '@linaria/core';
34

45
import type { Direction } from '../src/types';
56

6-
const navClassname = css`
7-
display: flex;
8-
flex-direction: column;
9-
white-space: nowrap;
10-
7+
const headerClassname = css`
118
border-inline-start: 4px solid light-dark(hsl(210deg 50% 80%), hsl(210deg 50% 40%));
129
10+
h1 {
11+
font-size: 24px;
12+
}
13+
1314
h1,
1415
h2 {
1516
margin: 8px;
1617
}
18+
`;
19+
20+
const navClassname = css`
21+
display: flex;
22+
flex-direction: column;
23+
white-space: nowrap;
1724
1825
a {
1926
color: inherit;
2027
font-size: 14px;
2128
line-height: 22px;
2229
text-decoration: none;
23-
padding-block: 0;
30+
padding-block: 2px;
2431
padding-inline: 16px;
2532
transition: 0.1s background-color;
2633
@@ -49,57 +56,67 @@ interface Props {
4956
}
5057

5158
export default function Nav({ direction, onDirectionChange }: Props) {
59+
const demosNavId = useId();
60+
const linksNavId = useId();
61+
5262
return (
53-
<nav className={navClassname}>
63+
<header className={headerClassname}>
5464
<h1>react-data-grid</h1>
65+
<nav aria-labelledby={demosNavId} className={navClassname}>
66+
<h2 id={demosNavId}>Demos</h2>
67+
<Link to="/CommonFeatures">Common Features</Link>
68+
<Link to="/AllFeatures">All Features</Link>
69+
<Link to="/CellNavigation">Cell Navigation</Link>
70+
<Link to="/ColumnSpanning">Column Spanning</Link>
71+
<Link to="/ColumnGrouping">Column Grouping</Link>
72+
<Link to="/ColumnsReordering">Columns Reordering</Link>
73+
<Link to="/ContextMenu">Context Menu</Link>
74+
<Link to="/CustomizableRenderers">Customizable Renderers</Link>
75+
<Link to="/RowGrouping">Row Grouping</Link>
76+
<Link to="/HeaderFilters">Header Filters</Link>
77+
<Link to="/InfiniteScrolling">Infinite Scrolling</Link>
78+
<Link to="/MasterDetail">Master Detail</Link>
79+
<Link to="/MillionCells">A Million Cells</Link>
80+
<Link to="/NoRows">No Rows</Link>
81+
<Link to="/ResizableGrid">Resizable Grid</Link>
82+
<Link to="/RowsReordering">Rows Reordering</Link>
83+
<Link to="/ScrollToCell">Scroll To Cell</Link>
84+
<Link to="/TreeView">Tree View</Link>
85+
<Link to="/VariableRowHeight">Variable Row Height</Link>
86+
<Link to="/Animation">Animation</Link>
87+
</nav>
5588

56-
<h2>Demos</h2>
57-
<Link to="/CommonFeatures">Common Features</Link>
58-
<Link to="/AllFeatures">All Features</Link>
59-
<Link to="/CellNavigation">Cell Navigation</Link>
60-
<Link to="/ColumnSpanning">Column Spanning</Link>
61-
<Link to="/ColumnGrouping">Column Grouping</Link>
62-
<Link to="/ColumnsReordering">Columns Reordering</Link>
63-
<Link to="/ContextMenu">Context Menu</Link>
64-
<Link to="/CustomizableRenderers">Customizable Renderers</Link>
65-
<Link to="/RowGrouping">Row Grouping</Link>
66-
<Link to="/HeaderFilters">Header Filters</Link>
67-
<Link to="/InfiniteScrolling">Infinite Scrolling</Link>
68-
<Link to="/MasterDetail">Master Detail</Link>
69-
<Link to="/MillionCells">A Million Cells</Link>
70-
<Link to="/NoRows">No Rows</Link>
71-
<Link to="/ResizableGrid">Resizable Grid</Link>
72-
<Link to="/RowsReordering">Rows Reordering</Link>
73-
<Link to="/ScrollToCell">Scroll To Cell</Link>
74-
<Link to="/TreeView">Tree View</Link>
75-
<Link to="/VariableRowHeight">Variable Row Height</Link>
76-
<Link to="/Animation">Animation</Link>
77-
78-
<h2>Links</h2>
79-
<a
80-
href="https://github.com/adazzle/react-data-grid/blob/main/README.md"
81-
target="_blank"
82-
rel="noreferrer"
83-
>
84-
Documentation
85-
</a>
86-
<a
87-
href="https://github.com/adazzle/react-data-grid/blob/main/CHANGELOG.md"
88-
target="_blank"
89-
rel="noreferrer"
90-
>
91-
Changelog
92-
</a>
93-
<a
94-
href="https://github.com/adazzle/react-data-grid/discussions"
95-
target="_blank"
96-
rel="noreferrer"
97-
>
98-
Discussions
99-
</a>
100-
<a href="https://github.com/adazzle/react-data-grid/issues" target="_blank" rel="noreferrer">
101-
Issues
102-
</a>
89+
<nav aria-labelledby={linksNavId} className={navClassname}>
90+
<h2 id={linksNavId}>Links</h2>
91+
<a
92+
href="https://github.com/adazzle/react-data-grid/blob/main/README.md"
93+
target="_blank"
94+
rel="noreferrer"
95+
>
96+
Documentation
97+
</a>
98+
<a
99+
href="https://github.com/adazzle/react-data-grid/blob/main/CHANGELOG.md"
100+
target="_blank"
101+
rel="noreferrer"
102+
>
103+
Changelog
104+
</a>
105+
<a
106+
href="https://github.com/adazzle/react-data-grid/discussions"
107+
target="_blank"
108+
rel="noreferrer"
109+
>
110+
Discussions
111+
</a>
112+
<a
113+
href="https://github.com/adazzle/react-data-grid/issues"
114+
target="_blank"
115+
rel="noreferrer"
116+
>
117+
Issues
118+
</a>
119+
</nav>
103120

104121
<h2>Direction</h2>
105122
<label className={rtlCheckboxClassname}>
@@ -110,6 +127,6 @@ export default function Nav({ direction, onDirectionChange }: Props) {
110127
/>
111128
Right to left
112129
</label>
113-
</nav>
130+
</header>
114131
);
115132
}

‎website/routes/AllFeatures.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,7 @@ function AllFeatures() {
276276
</style>
277277
)}
278278
<DataGrid
279+
aria-label="All Features Example"
279280
columns={columns}
280281
rows={rows}
281282
rowKeyGetter={rowKeyGetter}

‎website/routes/Animation.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ function Animation() {
9393
</button>
9494
</div>
9595
<DataGrid
96+
aria-label="Animation Example"
9697
className={`${transitionClassname} fill-grid`}
9798
columns={columns}
9899
rows={rows}

‎website/routes/CellNavigation.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from 'react';
1+
import { useId, useState } from 'react';
22

33
import { DataGrid } from '../../src';
44
import type { CellKeyboardEvent, CellKeyDownArgs, Column } from '../../src';
@@ -77,6 +77,7 @@ function createRows(): Row[] {
7777
}
7878

7979
function CellNavigation() {
80+
const groupId = useId();
8081
const direction = useDirection();
8182
const [rows] = useState(createRows);
8283
const [cellNavigationMode, setCellNavigationMode] = useState<CellNavigationMode>('CHANGE_ROW');
@@ -144,8 +145,8 @@ function CellNavigation() {
144145

145146
return (
146147
<>
147-
<div style={{ marginBlockEnd: 5 }}>
148-
Cell Navigation Modes:
148+
<div role="radiogroup" aria-labelledby={groupId} style={{ marginBlockEnd: 5 }}>
149+
<span id={groupId}>Cell Navigation Modes:</span>
149150
<label>
150151
<input
151152
type="radio"
@@ -193,6 +194,7 @@ function CellNavigation() {
193194
</label>
194195
</div>
195196
<DataGrid
197+
aria-label="Cell Navigation Example"
196198
columns={columns}
197199
rows={rows}
198200
direction={direction}

‎website/routes/ColumnGrouping.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ function ColumnGrouping() {
9898

9999
return (
100100
<DataGrid
101+
aria-label="Column Grouping Example"
101102
columns={columns}
102103
rows={rows}
103104
topSummaryRows={[0]}

‎website/routes/ColumnSpanning.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ function ColumnSpanning() {
6060

6161
return (
6262
<DataGrid
63+
aria-label="Column Spanning Example"
6364
columns={columns}
6465
rows={rows}
6566
rowHeight={22}

‎website/routes/ColumnsReordering.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ function ColumnsReordering() {
146146
Reset Columns
147147
</button>
148148
<DataGrid
149+
aria-label="Columns Reordering Example"
149150
columns={reorderedColumns}
150151
rows={sortedRows}
151152
sortColumns={sortColumns}

‎website/routes/CommonFeatures.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,7 @@ function CommonFeatures() {
384384
</div>
385385
<DataGrid
386386
ref={gridRef}
387+
aria-label="Common Features Example"
387388
rowKeyGetter={rowKeyGetter}
388389
columns={columns}
389390
rows={sortedRows}

‎website/routes/ContextMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ function ContextMenuDemo() {
9696
return (
9797
<>
9898
<DataGrid
99+
aria-label="Context Menu Example"
99100
rowKeyGetter={rowKeyGetter}
100101
columns={columns}
101102
rows={rows}

0 commit comments

Comments
 (0)