Skip to content

Commit 1ccdb5c

Browse files
francineluccakodiakhq[bot]
francinelucca
and
kodiakhq[bot]
authored
chore(a11y): update to latest ruleset (#14171)
* chore(a11y): update to latest ruleset * fix(a11y): add aria labels for failing tests * chore(a11y): add accessibility naming guidance --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 7f623ee commit 1ccdb5c

14 files changed

Lines changed: 130 additions & 28 deletions

‎achecker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
const path = require('path');
1111

1212
module.exports = {
13-
ruleArchive: '26May2023',
13+
ruleArchive: 'latest',
1414
policies: ['Custom_Ruleset'],
1515
failLevels: ['violation'],
1616
reportLevels: [

‎packages/react/src/components/DataTable/DataTable.mdx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { Table, TableHead, TableHeader, TableRow, TableCell, TableBody } from '.
1515

1616
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
1717
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
18-
1918
## Table of Contents
2019

2120
- [Getting started](#getting-started)
@@ -33,6 +32,8 @@ import { Table, TableHead, TableHeader, TableRow, TableCell, TableBody } from '.
3332
- [Text Wrapping Alignment](#text-wrapping-alignment)
3433
- [Table with `experimentalAutoAlign = true`](#table-with-experimentalautoalign--true)
3534
- [Table with `experimentalAutoAlign = false`](#table-with-experimentalautoalign--false)
35+
- [Accessibility Considerations](#accessibility-considerations)
36+
- [Accessible Name](#accessible-name)
3637
- [Props](#props)
3738
- [Render props](#render-props)
3839
- [Prop getters](#prop-getters)
@@ -435,6 +436,14 @@ is experimental and might not be performant in tables with large datasets.
435436
</div>
436437
```
437438

439+
## Accessibility Considerations
440+
441+
### Accessible Name
442+
443+
To comply with accessibility requirements, make sure to supply the component with an accessible name by providing eiher the `aria-label`, `aria-labelledby` or
444+
`title` attribute to the `Table` component. Read more on the accessible naming rule
445+
[here](https://able.ibm.com/rules/archives/latest/doc/en-US/aria_accessiblename_exists.html).
446+
438447
## Props
439448

440449
<ArgsTable />

‎packages/react/src/components/DataTable/stories/DataTable-basic.stories.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const Default = () => {
102102
const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
103103

104104
return (
105-
<Table size="lg" useZebraStyles={false}>
105+
<Table size="lg" useZebraStyles={false} aria-label="sample table">
106106
<TableHead>
107107
<TableRow>
108108
{headers.map((header) => (
@@ -224,7 +224,7 @@ export const XLWithTwoLines = () => {
224224
const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
225225

226226
return (
227-
<Table size="xl" useZebraStyles={false}>
227+
<Table size="xl" useZebraStyles={false} aria-label="sample table">
228228
<TableHead>
229229
<TableRow>
230230
{headers.map((header) => (
@@ -311,7 +311,7 @@ export const Playground = (args) => {
311311
const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
312312

313313
return (
314-
<Table {...args}>
314+
<Table {...args} aria-label="sample table">
315315
<TableHead>
316316
<TableRow>
317317
{headers.map((header) => (

‎packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export const Default = () => (
140140
</Button>
141141
</TableToolbarContent>
142142
</TableToolbar>
143-
<Table {...getTableProps()}>
143+
<Table {...getTableProps()} aria-label="sample table">
144144
<TableHead>
145145
<TableRow>
146146
<TableSelectAll {...getSelectionProps()} />
@@ -241,7 +241,7 @@ export const Playground = (args) => (
241241
</Button>
242242
</TableToolbarContent>
243243
</TableToolbar>
244-
<Table {...getTableProps()}>
244+
<Table {...getTableProps()} aria-label="sample table">
245245
<TableHead>
246246
<TableRow>
247247
{args.radio ? (

‎packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export const Default = () => (
9191
<Button onClick={action('Button click')}>Primary Button</Button>
9292
</TableToolbarContent>
9393
</TableToolbar>
94-
<Table {...getTableProps()}>
94+
<Table {...getTableProps()} aria-label="sample table">
9595
<TableHead>
9696
<TableRow>
9797
{headers.map((header) => (
@@ -150,7 +150,7 @@ export const Playground = (args) => (
150150
<Button onClick={action('Button click')}>Primary Button</Button>
151151
</TableToolbarContent>
152152
</TableToolbar>
153-
<Table {...getTableProps()}>
153+
<Table {...getTableProps()} aria-label="sample table">
154154
<TableHead>
155155
<TableRow>
156156
{headers.map((header) => (

‎packages/react/src/components/DataTable/stories/DataTable-selection.stories.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const Default = () => (
5757
title="DataTable"
5858
description="With selection"
5959
{...getTableContainerProps()}>
60-
<Table {...getTableProps()}>
60+
<Table {...getTableProps()} aria-label="sample table">
6161
<TableHead>
6262
<TableRow>
6363
<TableSelectAll {...getSelectionProps()} />
@@ -99,7 +99,7 @@ export const WithRadioSelection = () => (
9999
title="DataTable"
100100
description="With radio selection"
101101
{...getTableContainerProps()}>
102-
<Table {...getTableProps()}>
102+
<Table {...getTableProps()} aria-label="sample table">
103103
<TableHead>
104104
<TableRow>
105105
<th scope="col" />
@@ -141,7 +141,7 @@ export const WithSelectionAndSorting = () => (
141141
title="DataTable"
142142
description="With selection"
143143
{...getTableContainerProps()}>
144-
<Table {...getTableProps()}>
144+
<Table {...getTableProps()} aria-label="sample table">
145145
<TableHead>
146146
<TableRow>
147147
<TableSelectAll {...getSelectionProps()} />
@@ -182,7 +182,7 @@ export const Playground = (args) => (
182182
title="DataTable"
183183
description="With selection"
184184
{...getTableContainerProps()}>
185-
<Table {...getTableProps()}>
185+
<Table {...getTableProps()} aria-label="sample table">
186186
<TableHead>
187187
<TableRow>
188188
{args.radio ? (

‎packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const Default = () => (
4141
<DataTable rows={rows} headers={headers} isSortable>
4242
{({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
4343
<TableContainer title="DataTable" description="With sorting">
44-
<Table {...getTableProps()}>
44+
<Table {...getTableProps()} aria-label="sample table">
4545
<TableHead>
4646
<TableRow>
4747
{headers.map((header) => (
@@ -70,7 +70,7 @@ export const Playground = (args) => (
7070
<DataTable isSortable rows={rows} headers={headers} {...args}>
7171
{({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
7272
<TableContainer title="DataTable" description="With sorting">
73-
<Table {...getTableProps()}>
73+
<Table {...getTableProps()} aria-label="sample table">
7474
<TableHead>
7575
<TableRow>
7676
{headers.map((header) => (

‎packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const Default = () => (
8080
<Button onClick={action('Button click')}>Primary Button</Button>
8181
</TableToolbarContent>
8282
</TableToolbar>
83-
<Table {...getTableProps()}>
83+
<Table {...getTableProps()} aria-label="sample table">
8484
<TableHead>
8585
<TableRow>
8686
{headers.map((header) => (
@@ -138,7 +138,7 @@ export const PersistentToolbar = () => (
138138
<Button onClick={action('Button click')}>Primary Button</Button>
139139
</TableToolbarContent>
140140
</TableToolbar>
141-
<Table {...getTableProps()}>
141+
<Table {...getTableProps()} aria-label="sample table">
142142
<TableHead>
143143
<TableRow>
144144
{headers.map((header) => (
@@ -199,7 +199,7 @@ export const SmallPersistentToolbar = () => (
199199
<Button onClick={action('Button click')}>Primary Button</Button>
200200
</TableToolbarContent>
201201
</TableToolbar>
202-
<Table {...getTableProps()} size="sm">
202+
<Table {...getTableProps()} size="sm" aria-label="sample table">
203203
<TableHead>
204204
<TableRow>
205205
{headers.map((header) => (
@@ -253,7 +253,7 @@ export const WithOverflowMenu = () => (
253253
<Button onClick={action('Button click')}>Primary Button</Button>
254254
</TableToolbarContent>
255255
</TableToolbar>
256-
<Table {...getTableProps()}>
256+
<Table {...getTableProps()} aria-label="sample table">
257257
<TableHead>
258258
<TableRow>
259259
{headers.map((header) => (
@@ -320,7 +320,7 @@ export const Playground = (args) => (
320320
<Button onClick={action('Button click')}>Primary Button</Button>
321321
</TableToolbarContent>
322322
</TableToolbar>
323-
<Table {...getTableProps()}>
323+
<Table {...getTableProps()} aria-label="sample table">
324324
<TableHead>
325325
<TableRow>
326326
{headers.map((header) => (

‎packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export const Default = () => {
154154
</TableToolbarMenu>
155155
</TableToolbarContent>
156156
</TableToolbar>
157-
<Table {...getTableProps()}>
157+
<Table {...getTableProps()} aria-label="sample table">
158158
<TableHead>
159159
<TableRow>
160160
<TableExpandHeader />
@@ -324,7 +324,7 @@ export const Playground = (args) => {
324324
</TableToolbarMenu>
325325
</TableToolbarContent>
326326
</TableToolbar>
327-
<Table {...getTableProps()}>
327+
<Table {...getTableProps()} aria-label="sample table">
328328
<TableHead>
329329
<TableRow>
330330
<TableExpandHeader />

‎packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const Default = () => (
5959
title="DataTable"
6060
description="With expansion"
6161
{...getTableContainerProps()}>
62-
<Table {...getTableProps()}>
62+
<Table {...getTableProps()} aria-label="sample table">
6363
<TableHead>
6464
<TableRow>
6565
<TableExpandHeader />
@@ -110,7 +110,7 @@ export const BatchExpansion = () => (
110110
title="DataTable"
111111
description="With batch expansion"
112112
{...getTableContainerProps()}>
113-
<Table {...getTableProps()}>
113+
<Table {...getTableProps()} aria-label="sample table">
114114
<TableHead>
115115
<TableRow>
116116
<TableExpandHeader
@@ -161,7 +161,7 @@ export const Playground = (args) => (
161161
title="DataTable"
162162
description="With expansion"
163163
{...getTableContainerProps()}>
164-
<Table {...getTableProps()}>
164+
<Table {...getTableProps()} aria-label="sample table">
165165
<TableHead>
166166
<TableRow>
167167
<TableExpandHeader />

0 commit comments

Comments
 (0)