[gethinwebster]

Description

TableHeaderCell had no handling for a label wider than its column. In grid layout, a long label spilled across the neighbouring header cell, and the neighbour's background painted over it, so the label looked cropped.

Header labels now truncate with an ellipsis, using the same rule as TableBodyCell content (nowrap, overflow: hidden, text-overflow: ellipsis on the content wrapper). Cells with disablePaddings, such as a select-all control column, are left alone, as they are for body cells.

In visual refresh, the first column's content sits flush with the cell's start edge, so the new clip would cut off part of a focus ring on a control in that cell. The first cell's content wrapper now gets a start padding the size of the focus outline gutter and an equal negative start margin. The text stays in the same place, and the clip edge moves out far enough for the focus ring.

The existing Table is unaffected: it renders its header cells without the content wrapper these rules target.

Related links, issue #, if available: n/a

How has this been tested?

• New integration test (src/table-header-cell/__integ__/truncation.test.ts) on a new dev page, table-root/header-truncation, with columns narrower than their labels:
  • every header label truncates with an ellipsis and stays inside its cell;
  • the first column's clip edge sits at least the focus outline gutter outside its button, and the button still lines up with the first body cell's text.
• Both tests fail against main's styles (no ellipsis; no room for the ring) and pass with this change.
• Existing table-root integration tests and the table, table-root and table-header-cell unit tests pass.
• Manually, in visual refresh: a keyboard-focused sort button in the first column shows its full focus ring (a screenshot with the clip and one with it forced off are identical).

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.76%. Comparing base (8a3001d) to head (8c5ee29).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5225   +/-   ##
=======================================
  Coverage   97.76%   97.76%           
=======================================
  Files        1003     1003           
  Lines       32572    32572           
  Branches    12109    12110    +1     
=======================================
  Hits        31843    31843           
+ Misses        723      684   -39     
- Partials        6       45   +39     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.