#### 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 [[ https://doc.wikimedia.org/codex/main/components/demos/table.html#with-sorting | 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 [[ https://1026173--wikimedia-codex.netlify.app/components/demos/table.html#with-sorting | 1026173 ]] patch build).
All tests were performed using macOS Sonoma 14.3 on Chrome 124, Safari 17.3 and Firefox. Screen reader technology: VoiceOver.
#### Findings ####
| **Type of issue** | **Description** | **Illustration** | **Fix before release?** | **Subtask** |
| 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 | {F51852534} | [] | – |
| Visual | **Header slot changes flex direction under tablet breakpoint**: In the “[[ https://doc.wikimedia.org/codex/main/components/demos/table.html#with-selection | 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. | {F51853255} | [] | – |
| Visual | **Incorrect focused style of sortable column headings**: The focused state of the sorted column’s headings (See"[[ https://doc.wikimedia.org/codex/main/components/demos/table.html#with-sorting | With Sorting ]]" instance) is inconsistent with the specifications. Nevertheless, the state is displayed correctly in the [[ https://1026173--wikimedia-codex.netlify.app/sandbox/demos/table.html | Table sandbox ]] and other patches' builds. Instead of a bottom border, the heading should display a full 2px box-shadow inset. | {F51857126} | [] | – |
| 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. | {F51862039} | [] | – |
| 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. | {F51863568} | [] | – |
| 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). | {F51866163} | [] | – |
| 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 [[ https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/ | WAI ARIA Sortable table example ]] uses a span to globally announce that “, column headers with buttons are sortable.” right after the table’s caption. | {F51872153} | [] | – |
| Accessibility | **Faulty checkbox cell navigation in Firefox**: When using VoiceOver in Firefox, it takes several presses of the modifier keys + right arrow (7 in total) to move from cells with checkboxes to their adjacent cells | {F51876920} | [] | – |
| 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. The issue can be reproduced in all table demos (e.g., the sortable table too). | {F51879008} | [] | – |
#### 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.