diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx index dec749af7..a2667d14b 100644 --- a/src/components/Table/Table.mdx +++ b/src/components/Table/Table.mdx @@ -14,9 +14,38 @@ Use the `Table` component to display tabular data when the user will sort, searc ## Accessibility -Table component requires aria-label attribute to describe content of table. +### General Guidelines -One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader) to improve screen reader experience. Its prop on TableCell, not on TableColumn as one would expect as it allows for significantly easier implementation. +To ensure the `Table` component is accessible: + +- The `aria-labelledby` and `aria-describedby` attributes are automatically linked when using the `label` and `description` slots, or they can be manually set with the `labelledBy` and `describedBy` props if using external labels and description for the table. +- If neither `labelledBy`/`describedBy` props nor `label`/`description` slots are provided, use the `ariaLabel` prop to provide accessible information about the table. +- One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader) to improve screen reader experience. It's a prop on TableCell, not on TableColumn as one would expect as it allows for significantly easier implementation. + +### Slots and ARIA Attributes + +If the table has a label or description, ensure that: + +- The `labelledBy` and `describedBy` props point to the correct element IDs, especially if the label or description is external to the component. +- If you're using the `label` or `description` slots, the component will automatically assign IDs and link them to the table via `aria-labelledby` and `aria-describedby`. + +## Slots + +### `label` + +This slot is used to provide a custom label for the table. + +### `description` + +Use this slot to provide additional information or context about the table's content. + +### `top-controls` + +The `top-controls` slot is used to add buttons or other interactive elements that appear above the table. + +### `bottom-controls` + +The `bottom-controls` slot is used for adding controls below the table, such as pagination controls, summary information, or other actionable elements. ## Table Props @@ -26,7 +55,7 @@ One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader) -# TableCell Props +## TableCell Props