Skip to content

Commit 17cb3a6

Browse files
Tanner SummersAlessandra Davila
Tanner Summers
and
Alessandra Davila
authoredFeb 2, 2022
docs(react): updated storybook to use new prop to fix headers a11y issue (#10547)
Co-authored-by: Alessandra Davila <aledavila@ibm.com>
1 parent 47683d8 commit 17cb3a6

File tree

1 file changed

+34
-12
lines changed

1 file changed

+34
-12
lines changed
 

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

+34-12
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,12 @@ export const Usage = () => (
6969
<Table {...getTableProps()}>
7070
<TableHead>
7171
<TableRow>
72-
<TableExpandHeader />
72+
<TableExpandHeader id="expand" />
7373
{headers.map((header, i) => (
74-
<TableHeader key={i} {...getHeaderProps({ header })}>
74+
<TableHeader
75+
id={header.header}
76+
key={i}
77+
{...getHeaderProps({ header })}>
7578
{header.header}
7679
</TableHeader>
7780
))}
@@ -138,9 +141,12 @@ export const ExtraSmallExpansion = () => (
138141
<Table {...getTableProps()} size="compact">
139142
<TableHead>
140143
<TableRow>
141-
<TableExpandHeader />
144+
<TableExpandHeader id="expand" />
142145
{headers.map((header, i) => (
143-
<TableHeader key={i} {...getHeaderProps({ header })}>
146+
<TableHeader
147+
id={header.header}
148+
key={i}
149+
{...getHeaderProps({ header })}>
144150
{header.header}
145151
</TableHeader>
146152
))}
@@ -186,9 +192,12 @@ export const SmallExpansion = () => (
186192
<Table {...getTableProps()} size="sm">
187193
<TableHead>
188194
<TableRow>
189-
<TableExpandHeader />
195+
<TableExpandHeader id="expand" />
190196
{headers.map((header, i) => (
191-
<TableHeader key={i} {...getHeaderProps({ header })}>
197+
<TableHeader
198+
id={header.header}
199+
key={i}
200+
{...getHeaderProps({ header })}>
192201
{header.header}
193202
</TableHeader>
194203
))}
@@ -234,9 +243,12 @@ export const MediumExpansion = () => (
234243
<Table {...getTableProps()} size="md">
235244
<TableHead>
236245
<TableRow>
237-
<TableExpandHeader />
246+
<TableExpandHeader id="expand" />
238247
{headers.map((header, i) => (
239-
<TableHeader key={i} {...getHeaderProps({ header })}>
248+
<TableHeader
249+
id={header.header}
250+
key={i}
251+
{...getHeaderProps({ header })}>
240252
{header.header}
241253
</TableHeader>
242254
))}
@@ -282,9 +294,12 @@ export const ExtraLargeExpansion = () => (
282294
<Table {...getTableProps()} size="xl">
283295
<TableHead>
284296
<TableRow>
285-
<TableExpandHeader />
297+
<TableExpandHeader id="expand" />
286298
{headers.map((header, i) => (
287-
<TableHeader key={i} {...getHeaderProps({ header })}>
299+
<TableHeader
300+
id={header.header}
301+
key={i}
302+
{...getHeaderProps({ header })}>
288303
{header.header}
289304
</TableHeader>
290305
))}
@@ -333,9 +348,16 @@ export const BatchExpansion = () => (
333348
<Table {...getTableProps()}>
334349
<TableHead>
335350
<TableRow>
336-
<TableExpandHeader enableToggle {...getExpandHeaderProps()} />
351+
<TableExpandHeader
352+
id="expand"
353+
enableToggle
354+
{...getExpandHeaderProps()}
355+
/>
337356
{headers.map((header, i) => (
338-
<TableHeader key={i} {...getHeaderProps({ header })}>
357+
<TableHeader
358+
id={header.header}
359+
key={i}
360+
{...getHeaderProps({ header })}>
339361
{header.header}
340362
</TableHeader>
341363
))}

0 commit comments

Comments
 (0)