fix(TableContainer): support id-ref for the header

This change adds a capability to specify the element ID of the `<h4>` in `<TableContainer>`. This allows application to set up our data table so VoiceOver announces the content in such `<h4>` when it announces "You are currently in a table" for `<table>`. Fixes #3805.
carbon-design-system · Dec 3, 2019 · 8399c7f · 8399c7f
1 parent 3d72825
commit 8399c7f
Show file tree

Hide file tree

Showing 13 changed files with 37 additions and 13 deletions.
diff --git a/packages/react/src/components/DataTable/TableContainer.js b/packages/react/src/components/DataTable/TableContainer.js
@@ -16,6 +16,7 @@ const TableContainer = ({
   className,
   children,
   title,
+  titleId,
   description,
   stickyHeader,
   ...rest
@@ -32,7 +33,9 @@ const TableContainer = ({
     <div {...rest} className={tableContainerClasses}>
       {title && (
         <div className={`${prefix}--data-table-header`}>
-          <h4 className={`${prefix}--data-table-header__title`}>{title}</h4>
+          <h4 id={titleId} className={`${prefix}--data-table-header__title`}>
+            {title}
+          </h4>
           <p className={`${prefix}--data-table-header__description`}>
             {description}
           </p>
@@ -51,6 +54,11 @@ TableContainer.propTypes = {
    */
   title: PropTypes.node,
 
+  /**
+   * Provide an element ID of the title for the Table
+   */
+  titleId: PropTypes.string,
+
   /**
    * Optional description text for the Table
    */

diff --git a/packages/react/src/components/DataTable/stories/default.js b/packages/react/src/components/DataTable/stories/default.js
@@ -33,9 +33,10 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With default options"
         {...getTableContainerProps()}>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               {headers.map(header => (

diff --git a/packages/react/src/components/DataTable/stories/with-batch-actions.js b/packages/react/src/components/DataTable/stories/with-batch-actions.js
@@ -54,6 +54,7 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With batch actions"
         {...getTableContainerProps()}>
         <TableToolbar>
@@ -92,7 +93,7 @@ export default props => (
             </Button>
           </TableToolbarContent>
         </TableToolbar>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               <TableSelectAll {...getSelectionProps()} />

diff --git a/packages/react/src/components/DataTable/stories/with-batch-expansion.js b/packages/react/src/components/DataTable/stories/with-batch-expansion.js
@@ -36,9 +36,10 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With expansion"
         {...getTableContainerProps()}>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               <TableExpandHeader

diff --git a/packages/react/src/components/DataTable/stories/with-boolean-column.js b/packages/react/src/components/DataTable/stories/with-boolean-column.js
@@ -97,6 +97,7 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With boolean column"
         {...getTableContainerProps()}>
         <Table {...getTableProps()}>

diff --git a/packages/react/src/components/DataTable/stories/with-dynamic-content.js b/packages/react/src/components/DataTable/stories/with-dynamic-content.js
@@ -116,6 +116,7 @@ export default props => {
           }) => (
             <TableContainer
               title="DataTable"
+              titleId="table-container-title"
               description="Use the toolbar menu to add rows and headers"
               {...getTableContainerProps()}>
               <TableToolbar>
@@ -153,7 +154,9 @@ export default props => {
                   </TableToolbarMenu>
                 </TableToolbarContent>
               </TableToolbar>
-              <Table {...getTableProps()}>
+              <Table
+                {...getTableProps()}
+                aria-describedby="table-container-title">
                 <TableHead>
                   <TableRow>
                     <TableExpandHeader />

diff --git a/packages/react/src/components/DataTable/stories/with-expansion.js b/packages/react/src/components/DataTable/stories/with-expansion.js
@@ -35,9 +35,10 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With expansion"
         {...getTableContainerProps()}>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               <TableExpandHeader />

diff --git a/packages/react/src/components/DataTable/stories/with-options.js b/packages/react/src/components/DataTable/stories/with-options.js
@@ -42,9 +42,10 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With options"
         {...getTableContainerProps()}>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               <TableExpandHeader />

diff --git a/packages/react/src/components/DataTable/stories/with-overflow-menu.js b/packages/react/src/components/DataTable/stories/with-overflow-menu.js
@@ -33,8 +33,11 @@ export default props => (
       getSelectionProps,
       getTableProps,
     }) => (
-      <TableContainer title="DataTable" description="With selection">
-        <Table {...getTableProps()}>
+      <TableContainer
+        title="DataTable"
+        titleId="table-container-title"
+        description="With selection">
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               <TableSelectAll {...getSelectionProps()} />

diff --git a/packages/react/src/components/DataTable/stories/with-selection--radio.js b/packages/react/src/components/DataTable/stories/with-selection--radio.js
@@ -35,9 +35,10 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="For selecting single rows"
         {...getTableContainerProps()}>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               <th scope="col" />

diff --git a/packages/react/src/components/DataTable/stories/with-selection.js b/packages/react/src/components/DataTable/stories/with-selection.js
@@ -35,9 +35,10 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With selection"
         {...getTableContainerProps()}>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               <TableSelectAll {...getSelectionProps()} />

diff --git a/packages/react/src/components/DataTable/stories/with-sorting.js b/packages/react/src/components/DataTable/stories/with-sorting.js
@@ -33,9 +33,10 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With sorting"
         {...getTableContainerProps()}>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               {headers.map(header => (

diff --git a/packages/react/src/components/DataTable/stories/with-toolbar.js b/packages/react/src/components/DataTable/stories/with-toolbar.js
@@ -41,6 +41,7 @@ export default props => (
     }) => (
       <TableContainer
         title="DataTable"
+        titleId="table-container-title"
         description="With toolbar"
         {...getTableContainerProps()}>
         <TableToolbar>
@@ -62,7 +63,7 @@ export default props => (
             <Button onClick={action('ButtonCLick')}>Primary Button</Button>
           </TableToolbarContent>
         </TableToolbar>
-        <Table {...getTableProps()}>
+        <Table {...getTableProps()} aria-describedby="table-container-title">
           <TableHead>
             <TableRow>
               {headers.map(header => (