Add support for Caption to Table

[scurker]

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 <caption> 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 <caption> 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

interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
  // ...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:

• <caption> 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

<Table caption="Descriptive Caption of Table Contents">
  ...
</Table>

Referencing Implementations

• USWDS Table: https://designsystem.digital.gov/components/table/
• ARIA Authoring Practices Guide Table: https://www.w3.org/WAI/ARIA/apg/patterns/table/