[Fix] Move html table title out of the table caption to a separate element #130
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors table titles from using semantic <caption> elements inside tables to separate <p> elements positioned before the table. This resolves layout constraints imposed by the table element on its caption.
Key Changes:
- Replaced
<caption class="tableChart-caption">with<p class="tableChart-title">positioned outside the table - Added
aria-labelledbyattribute to link tables to their title elements for accessibility - Updated CSS class name from
tableChart-captiontotableChart-title
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/core/tables/htmlTable.ts | Refactored title rendering to create a <p> element outside the table instead of a <caption> element inside |
| src/react/components/globalStyle/globalStyle.ts | Updated CSS class selector from tableChart-caption to tableChart-title |
| src/react/components/chart/snapshots/tableView.test.tsx.snap | Updated test snapshots to reflect new title structure with <p> element and aria-labelledby |
| src/core/tables/snapshots/htmlTable.test.ts.snap | Updated test snapshots to reflect new title structure with <p> element and aria-labelledby |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
2 participants
Caption under table element was bound by the limits of the table causing issues