#### 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.
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} | [] | – |
| **Type of issue** | **Description** | **Illustration**Visual | **Change of 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} | [] | – |
| **Type of issue** | **Description** | **Illustration**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, there should be a full 2px box-shadow inset: | {F51857126} vs. {F51857878} | [] | – |
| **Type of issue** | **Description** | **Illustration** | [] | – |
| **Type of issue** | **Description** | **Illustration** | [] | – |
| **Type of issue** | **Description** | **Illustration** | [] | – |
| **Type of issue** | **Description** | **Illustration** | [] | – |
2. **Change of 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 elemets should be preserved across breakpoints.
{F51853255}
3. **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, there should be a full 2px box-shadow inset:
{F51857126} {F51857878}