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 = ({
+
{description}