Table to core

[mark-tate]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5427de2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@salt-ds/core	Minor
@salt-ds/lab	Minor
@salt-ds/countries	Patch
@salt-ds/data-grid	Patch
@salt-ds/embla-carousel	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
saltdesignsystem	Ready	Preview	Comment	Nov 25, 2025 11:58am

[joshwooding]

FoundationColorView needs updating

[jake-costa]

Accessibility Defect: Table Reflow & Scrollable Region Support

Issue

The "Text alignment" table and likely similar containers with excessive data or text alignment properties, currently fails WCAG 1.4.10 (Reflow).

When reviewing the basic, text only examples on the site at smaller viewports (e.g. 320x256 CSS pixels), the content does not adapt responsively. Instead, content overlaps or is cut off because it does not add the necessary reflow/scrolling behavior, rendering the data unreadable and inaccessible (see screenshot below).

Recommended Remediation

To address this, we must ensure the table is responsive, preventing columns/content from overlapping and/or becoming more narrow than their content allows, while adding scrolling where necessary.

While WCAG 1.4.10 generally requires page content to reflow appropriately and not require scrolling in two dimensions (e.g. Horizontal or Vertical only), data tables are a recognized exception Understanding SC 1.4.10. For data tables, allowing two dimensional scrolling is compliant, provided the content remains readable and accessible.

We need to ensure the table reflows appropriately. Also, we should implement a scrollable region with keyboard support only when the table overflows:

1. Responsive Table Layout: Ensure tables adapt responsively for different viewports and become scrollable as needed.

2. Conditional Wrapper: Wrap the table in a container that applies role="region", an accessible name, and tabindex="0" only when the table content overflows its container (i.e., when it becomes scrollable).

   • Note: Do not apply tabindex="0" or role="region" with accessible name to the container if the table is not scrollable.

3. Keyboard Support (When scrollable): This ensures keyboard-reliant users can tab to the container and use arrow keys to scroll horizontally to view hidden columns.

4. Accessible Name (For scrollable container): This ensures screen reader-reliant users can identify the region and understand its purpose when entering the scrollable area.

Implementation Recommendation

We likely need to ensure teams provide an accessible name to support this pattern? (Maybe via prop?)

Since role="region" creates a landmark, we will need to apply an accessible name to the region to be valid ARIA: Region Role, we should require teams to provide a name via a visible <caption> (preferred) or aria-labelledby/aria-label?

• This would allow us to programmatically link that existing table name to the scrollable region wrapper.
• This ensures compliance with WCAG 4.1.2 and prevents "unnamed region" errors.

Supporting Resources

• W3C WAI: Understanding Reflow Exceptions
  • Documentation on why data tables are exempt from the single-column reflow requirement.
• W3C ACT Rules: Scrollable content can be reached with sequential focus navigation
  • Technical standards for meeting WCAG 2.1.1 for scrollable regions.
• W3C WAI: Technique ARIA11: Using ARIA landmarks to identify regions of a page
  • States: "A region landmark isn't exposed as a landmark region unless it has an accessible name."
• Adrian Roselli: Under-Engineered Responsive Tables
  • Detailed guidance on the role="region" + tabindex="0" pattern and why it should only be applied when scrollable.
• Deque University (Axe Core): Scrollable region must have keyboard access
  • Confirms the requirement for tabindex="0" on scrollable containers.

I'll also be reviewing this (his findings) and discussing updates for the table A11y documentation with @karlgoldstraw on Monday.