diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 1e9014600bea..4bc51d905595 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -871,9 +871,15 @@ Map { "description": Object { "type": "node", }, + "descriptionId": Object { + "type": "string", + }, "title": Object { "type": "node", }, + "titleId": Object { + "type": "string", + }, }, }, "TableExpandHeader": Object { @@ -1447,9 +1453,15 @@ Map { "description": Object { "type": "node", }, + "descriptionId": Object { + "type": "string", + }, "title": Object { "type": "node", }, + "titleId": Object { + "type": "string", + }, }, }, "TableExpandHeader" => Object { diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js index 7bb9ecace5fc..bc8d65a4222c 100644 --- a/packages/react/src/components/DataTable/DataTable.js +++ b/packages/react/src/components/DataTable/DataTable.js @@ -373,6 +373,8 @@ export default class DataTable extends React.Component { useStaticWidth, shouldShowBorder, stickyHeader, + 'aria-labelledby': `${this.getTablePrefix()}__table-container__title`, + 'aria-describedby': `${this.getTablePrefix()}__table-container__description`, }; }; @@ -383,6 +385,8 @@ export default class DataTable extends React.Component { const { stickyHeader } = this.props; return { + titleId: `${this.getTablePrefix()}__table-container__title`, + descriptionId: `${this.getTablePrefix()}__table-container__description`, stickyHeader, }; }; diff --git a/packages/react/src/components/DataTable/TableContainer.js b/packages/react/src/components/DataTable/TableContainer.js index 54bad0b7bf65..d18dad4648fc 100644 --- a/packages/react/src/components/DataTable/TableContainer.js +++ b/packages/react/src/components/DataTable/TableContainer.js @@ -16,7 +16,9 @@ const TableContainer = ({ className, children, title, + titleId, description, + descriptionId, stickyHeader, ...rest }) => { @@ -32,8 +34,12 @@ const TableContainer = ({
{title && (
-

{title}

-

+

+ {title} +

+

{description}

@@ -51,10 +57,20 @@ TableContainer.propTypes = { */ title: PropTypes.node, + /** + * Provide an element ID of the title for the Table + */ + titleId: PropTypes.string, + /** * Optional description text for the Table */ description: PropTypes.node, + + /** + * Provide an element ID of the description for the Table + */ + descriptionId: PropTypes.string, }; export default TableContainer; diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index e1aa558a66bc..b63705bcc2eb 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -1777,7 +1777,9 @@ exports[`DataTable should render 1`] = ` Object { "type": "return", "value": @@ -1954,7 +1958,9 @@ exports[`DataTable should render 1`] = ` translateWithId={[Function]} >

DataTable with toolbar

@@ -2776,8 +2788,10 @@ exports[`DataTable sticky header should render 1`] = ` Object { "type": "return", "value":

DataTable with toolbar