sadpandajoe opened a new pull request, #35968: URL: https://github.com/apache/superset/pull/35968
<!--- Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/ Example: fix(dashboard): load charts correctly --> ### SUMMARY Table chart column headers were rendering with `id="header-undefined"` instead of meaningful IDs, breaking CSS customization and ARIA accessibility that worked in Superset 4.1.1. **Root Cause:** PR #31590 (Ant Design v5 migration) changed header IDs from `column.key` to `column.originalLabel`, but `originalLabel` is only set for time-comparison columns (added in PR #32665), leaving regular columns with undefined values. **Solution:** Implemented defensive fallback with sanitization: - Headers: `id="header-${sanitizeHeaderId(column.originalLabel || column.key)}"` - Cells: `aria-labelledby="header-${sanitizeHeaderId(column.originalLabel || column.key)}"` Column identifiers can contain CSS-unsafe characters (%, #, △, spaces), so added `sanitizeHeaderId()` helper to ensure valid CSS selectors and ARIA references. ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF <!--- Skip this if not applicable --> ### TESTING INSTRUCTIONS <!--- Required! What steps can be taken to manually verify the changes? --> **Manual Testing:** 1. **Test regular table chart:** ``` - Create a table chart with regular columns (non-time-comparison) - Inspect the DOM (browser dev tools) - Verify column headers have meaningful IDs like id="header-column_name" - Verify NO headers have id="header-undefined" - Verify table cells have matching aria-labelledby attributes ``` 2. **Test time-comparison table chart:** ``` - Create a table chart with time comparison enabled - Add metrics and enable comparison type - Inspect the DOM - Verify comparison columns have IDs like id="header-metric_1" - Verify NO headers have id="header-undefined" ``` 3. **Test special characters:** ``` - Create columns with special characters: %pct_nice, #count, etc. - Verify IDs are sanitized: id="header-percentpct_nice", id="header-hashcount" - Verify no spaces or invalid CSS characters in IDs ``` 4. **Test CSS customization (issue reporter's use case):** ```css /* Should now work */ #header-column_name { background-color: red; } ``` **Automated Testing:** ```bash # Run table chart tests npm test -- plugins/plugin-chart-table/test/TableChart.test.tsx # Run pre-commit validation pre-commit run --files plugins/plugin-chart-table/src/TableChart.tsx plugins/plugin-chart-table/test/TableChart.test.tsx ``` ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: Fixes #35783 - [ ] Required feature flags: - [ ] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
