dequelabs / dequelabs/cauldron

Add support for Caption to Table

Open
#2,073 0 comments 0 reactions 0 assignees View on GitHub
rfc
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.