Move Basic Table to Core

[bhoppers2008]

Publish Basic Table from Labs to Core in a known/stable state, following stakeholder feedback.

Will include documentation + examples.

Must have Figma assets.

[bhoppers2008]

PR for review: #5826

Requires VQA, Content and a11y review

[bhoppers2008]

@jake-costa please can you have this on your radar. Due for release this sprint (Next Tuesday)

[jake-costa]

@bhoppers2008 I left a comment on #5826 regarding a reflow issue. I'll also be reviewing (his and my findings) and discussing updates for the table A11y documentation with @karlgoldstraw on Monday.

[karlgoldstraw]

Draft documentation for the accessibility table

Tables can be complex, so we need to ensure tables are perceivable by as many users as possible. Sighted users can visually scan a table to make associations between data and the table. Non-sighted users cannot do this so we recommend the following best practices for basic table:

Use Captions and a summary

Users can benefit from human readable descriptions to explain complex or large tables. This is especially true for non-sighted assistive technology users. Tables can be hard to navigate using a screen reader.

• Use a <caption> element to describe a table in the same way you would use a heading. A caption helps users to find, navigate and understand tables.
• Provide a summary (visually or via aria-describedby) for complex tables.

Column and row headers

To help users more quickly navigate a table, both visually and programmatically we add headers to the table.

• th (table headers) and td (table data) cells should be used to identify headers and data cells in the table.
• Screen reader users need assistance with identifying whether a th (table header) is associated with a column or a row. We do this by adding scope="col" or scope="row" to the respective th.

Tables on small screens

When presenting a table on a small screen (e.g. 320x256 CSS pixels), ensure the table stays visually perceivable by allowing it to scroll in two dimensions- vertically and horizontally. Do this by implementing a conditional scrollable region around the table 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.

[joshwooding]

Update: We will add a TableContainer component to manage the accessibility side