Table > Rethink responsive structure and behavior
Problem
Stacked layout has several issues that make it difficult or impossible to use or understand.
- No table headers (
<th>) are present. - Content added with CSS lacks any semantic meaning and isn't announced consistently by screen readers.
Solution
Rethink responsive tables and accessible options. Great responsive examples and considerations can be found at https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html.
Original description
Proposal
Determine when responsive tables should scroll horizontally vs. re-arrange to a single column
Background
I’ve always used a responsive table approach that allows the table to scroll horizontally without causing the entire page to overflow. Well, I guess I have worked with other tables that do a single column. I think we should consider both as we refine tables in Figma and Pajamas.
Source: https://gitlab.com/gitlab-org/gitlab-design/-/issues/1467#note_520658178
accessibility in GitLab.org / gitlab-services / Pajamas Design System ~"Category:FE/UX Foundations"