Skip to content

Commit

Permalink
pkp/pkp-lib#9744 Update documentation for Table component
Browse files Browse the repository at this point in the history
  • Loading branch information
blesildaramirez committed Sep 9, 2024
1 parent 54f04a0 commit 661a912
Showing 1 changed file with 32 additions and 3 deletions.
35 changes: 32 additions & 3 deletions src/components/Table/Table.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -26,7 +55,7 @@ One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader)

<ArgTypes of={TableColumn} />

# TableCell Props
## TableCell Props

<ArgTypes of={TableCell} />

Expand Down

0 comments on commit 661a912

Please sign in to comment.