dequelabs / dequelabs/cauldron
Add support for Caption to Table
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 31
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 8
Description
# Table Caption Support
## Overview
Add support for table captions to the existing Table component, providing a semantic and accessible way to label and describe tables with optional visibility control.
### Problem Statement
The current Cauldron Table component lacks support for the HTML `` element, which is the most semantic and accessible way to provide a title or description for a table. While tables can currently be labeled using `aria-label` or `aria-labelledby`, the `` element offers several advantages:
- Native semantics vs aria (via `aria-label` or `aria-labelledby`)
- Better document structure
This enhancement would give developers the flexibility to choose the most appropriate labeling method for their use case while following accessibility best practices.
## Component Design
### Visual Design
TBD by @dequelabs/design-team
### Interface / Props
```tsx
interface TableProps extends React.HTMLAttributes {
// ...existing props
/**
* Caption content for the table. Provides an accessible label for the table.
*/
caption?: React.ReactNode;
/**
* When a caption is set, visually hides the caption.
*/
captionHidden?: boolean;
}
```
### Accessibility
Labeling Hierarchy:
The table component should follow this precedence for labeling:
- `` element (when provided)
- `aria-labelledby` (when caption not provided)
- `aria-label` (when neither caption nor aria-labelledby provided)
We should update documentation to reflect these semantics.
### Responsiveness
TBD by @dequelabs/design-team
### Usage Examples
```tsx
...
```
### Referencing Implementations
- USWDS Table: https://designsystem.digital.gov/components/table/
- ARIA Authoring Practices Guide Table: https://www.w3.org/WAI/ARIA/apg/patterns/table/
Contributor guide
Assessment
This issue has not been assessed yet.