docs(react): updated storybook to use new prop to fix headers a11y is…

…sue (#10547) Co-authored-by: Alessandra Davila <[email protected]>
carbon-design-system · Feb 2, 2022 · 17cb3a6 · 17cb3a6
1 parent 47683d8
commit 17cb3a6
Showing 1 changed file with 34 additions and 12 deletions.
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
@@ -69,9 +69,12 @@ export const Usage = () => (
         <Table {...getTableProps()}>
           <TableHead>
             <TableRow>
-              <TableExpandHeader />
+              <TableExpandHeader id="expand" />
               {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
+                <TableHeader
+                  id={header.header}
+                  key={i}
+                  {...getHeaderProps({ header })}>
                   {header.header}
                 </TableHeader>
               ))}
@@ -138,9 +141,12 @@ export const ExtraSmallExpansion = () => (
         <Table {...getTableProps()} size="compact">
           <TableHead>
             <TableRow>
-              <TableExpandHeader />
+              <TableExpandHeader id="expand" />
               {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
+                <TableHeader
+                  id={header.header}
+                  key={i}
+                  {...getHeaderProps({ header })}>
                   {header.header}
                 </TableHeader>
               ))}
@@ -186,9 +192,12 @@ export const SmallExpansion = () => (
         <Table {...getTableProps()} size="sm">
           <TableHead>
             <TableRow>
-              <TableExpandHeader />
+              <TableExpandHeader id="expand" />
               {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
+                <TableHeader
+                  id={header.header}
+                  key={i}
+                  {...getHeaderProps({ header })}>
                   {header.header}
                 </TableHeader>
               ))}
@@ -234,9 +243,12 @@ export const MediumExpansion = () => (
         <Table {...getTableProps()} size="md">
           <TableHead>
             <TableRow>
-              <TableExpandHeader />
+              <TableExpandHeader id="expand" />
               {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
+                <TableHeader
+                  id={header.header}
+                  key={i}
+                  {...getHeaderProps({ header })}>
                   {header.header}
                 </TableHeader>
               ))}
@@ -282,9 +294,12 @@ export const ExtraLargeExpansion = () => (
         <Table {...getTableProps()} size="xl">
           <TableHead>
             <TableRow>
-              <TableExpandHeader />
+              <TableExpandHeader id="expand" />
               {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
+                <TableHeader
+                  id={header.header}
+                  key={i}
+                  {...getHeaderProps({ header })}>
                   {header.header}
                 </TableHeader>
               ))}
@@ -333,9 +348,16 @@ export const BatchExpansion = () => (
         <Table {...getTableProps()}>
           <TableHead>
             <TableRow>
-              <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+              <TableExpandHeader
+                id="expand"
+                enableToggle
+                {...getExpandHeaderProps()}
+              />
               {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
+                <TableHeader
+                  id={header.header}
+                  key={i}
+                  {...getHeaderProps({ header })}>
                   {header.header}
                 </TableHeader>
               ))}