Background
This task's purpose is to collect all issues detected while performing design verification and manual testing on the work-in-progress version of the MVP Table component. The findings are not listed in any particular order. Their severity and priority is to be assessed by the DST before the release of the initial version of this component.
Tests were performed in the main branch's demo page, and findings related to open patches were verified in their respective Netlify builds (e.g. accessibility issues were checked on the 1026173 patch build).
All tests were performed using macOS Sonoma 14.3 on Chrome 124, Safari 17.3 and Firefox 125. Screen reader technology: VoiceOver.
Findings
| Type of issue | Description | Illustration | Done? | Related task or patch |
| Visual | 🆕 🆕 🆕 Sort buttons overflow due to labels not wrapping 🆕 🆕 🆕: Long sort button labels make the buttons overflow and cause the sort icon to be hidden. In <th>s with end alignment, the problem is more accentuated (see top screenshot) due to an unwanted white space being added to the end of the cell. |   | ✅ | T365363 |
| Visual | [Known] Responsive limitations of header layout: The layout of the Table's header elements needs to be adjusted to flexibly handle cases where greater amounts of content exist within its slots (e.g., a combination of a long caption with a crowded header slot). Without wrapping and rearranging the elements, the caption text will to become harder to read |  | ✅ | Done as part of this task |
| Visual | Header slot changes flex direction under tablet breakpoint: In the “Table with Selection” demo, the flex-direction of the elements included within the header slot unnecessarily changes to “column” below the tablet breakpoint (640px). (There appears to be a media query applied to .cdx-docs-table-with-selection__header). The row direction of the header slot elements should be preserved across breakpoints. |  | ✅ | Done as part of this task |
| Visual | Incorrect focused style of sortable column headings: The focused state of the sorted column’s headings (See"With Sorting" instance) is inconsistent with the specifications. Nevertheless, the state is displayed correctly in the Table sandbox and other patches' builds. Instead of a bottom border, the heading should display a full 2px box-shadow inset. |  | ✅ | T363613 |
| Visual | Sorting icons display incorrect color: All sort icons (sort-vertical, up-triangle, down-triangle) should display a subtle color (@color-subtle) instead of base. |  | ✅ | DONE (See patch) |
| Interaction | Bulk selection checkbox should display indeterminate state: As stated in the guidelines and specifications, the heading-level checkbox that allows selecting all table rows in bulk should display an indeterminate state also when individual table rows are selected. |  | ✅ | T364927 |
| Accessibility | Caption redundancy: Since the visible caption is included in a div outside the table itself, the caption’s content is announced to screen reader users twice while they navigate through both elements. We could suggest table users (maybe in the Props table?) to apply aria-hidden="true” to .cdx-table__header__caption to avoid this redundancy. This attribute shouldn’t be added by default because removing the caption could be disorienting in case other elements are present within the header (they would be announced before the table without context). | ✅ | See patch | |
| Accessibility | Default sorting is not announced: In tables with sorting, users of screen readers should receive a heads-up informing them that column headings that contain buttons are sortable. The WAI ARIA Sortable table example uses a span to globally announce that “, column headers with buttons are sortable.” right after the table’s caption. | ✅ | See patch | |
| Accessibility | Faulty checkbox cell navigation (specially) in Firefox: When using VoiceOver in Firefox, it takes several presses of the modifier keys + right arrow (5 in total in case of the heading checkbox) to move from cells with checkboxes to their adjacent cells. The issue can also be reproduced in Safari and Chrome, but there only up to 2 extra steps are needed. |  | ✅ | T364929, T365756 (future work) |
| Accessibility | Redundant heading announcement in Chrome: When using VoiceOver in Chrome, all table headings (except for the one in the first column) are announced twice. This is also the case for row headings. The issue can be reproduced in all table demos (e.g., the sortable table too). | ✅ (declined) | T364930 | |
| Visual | Sort button padding issue: When a column name spans two lines, it disrupts the styles that aim to make "sort" buttons the full height of their th element. |  | ✅ (declined) | T364932 |
| Visual | Sort button transitions: The sort button should have standard transition rules, similar to the CdxButton. | n/a | ✅ | T364934 |
Other observations
- Header slot spacing: In the specs, a space of 16px was defined between the header actions and any custom text. Since all elements are included in a single header slot, they all have a common 8px gap. I believe addressing this issue may not warrant the associated costs of implementation changes. I recommend prioritizing other aspects that offer greater value.
- While testing, I applied a font-size of 0.875em to the demo in order to verify how the table would look in Vector. I found that the caption text didn't adjust to font-size changes made at body, main, or table level. Could this indicate that it won't be overridden by the skin?