AdvancedTable: create component (clean branch)

[shleewhite]

📌 Summary

If merged, this PR would add the AdvancedTable component and related sub-components

🛠️ Detailed description

AdvancedTable showcase

The easiest way to review this would be to step through each commit. I have also left a couple comments/questions inline.

chore: add changeset (easy peasy)

feat: copy Hds::Table and rework to Hds::AdvancedTable

Changes of note:

• component, class, and type names change
• components use div elements with roles instead of table elements
• styled with CSS Grid
  • note: some styles changed because of the grid, for example the cell background color is set on each cell instead of the row because the row now has display: contents which doesn't allow background-color
• Th scope attribute now maps to role "rowheader" or "columnheader"

feat: copy tests from Table and rework for AdvancedTable

Changes of note:

• changed selectors to the new classes
• omitted tests where the Table was defined "inline" (aka without model/columns)
• Created tests for rowspan/colspan that make sure aria-rowspan/colspan and grid-row/column are correct
• updated scope tests to check for correct role

feat: copy showcase from Table and rework for AdvancedTable

Changes of note:

• Omitted examples where Table was defined "inline" (aka without model/columns)
• Examples where it was impossible to have a model/columns (ie. Th/Td isolation tests), built fake advanced table with HTML and the component classes
• Copied relevant javascript for the route and controller from Table

feat: add keyboard navigation + related tests

Changes of note:

• new helpers file that exports
  • a function for when a grid cell is inserted in the dom. the function adds event handlers to any focusable content inside the cell for keyboard navigation
  • a function that adds keyboard events for grid cells
• directions for how to use the keyboard navigation in the showcase
• a new test file for the helpers file

feat: add @hasStickyHeader argument and related showcase example, test

Changes of note:

• adds @hasStickyHeader argument to advanced table
• adds an intersecton observer so the border radius can change when the header is pinned

feat: add nested rows, @childrenKey arg

Changes of note:

• adds new ExpandableTrGroup component
• AdvancedTable infers if there are nested rows based on the @childrenKey argument
• Adds guardrails so you can't have nested rows with isStriped argument, isSelectable argument, or if the columns are sortable
  • Note: these can be added later, but design/eng have found that there are not any use cases for them yet

chore: skip sticky header test for now

Will improve the sticky header test as a follow up pr.

fix: add cleanup for IntersectionObserver

• Adds a will-destroy lifecycle event to clean up the intersection observer.
• Doesn't add the intersection observer if in a testing environment because it isn't defined. Can circle back to this at the same time as the stikcy header test.

feat: use ember-focus-trap and tabbable libraries

• adds tabbable as a dependency (doesn't increase the bundle size because it is already a dependency of ember-focus-trap)
• use tabbable instead of custom functions to find all focusable or tabbable elements
• use ember-focus-trap to handle focus trapping within the th, td, and thSort components
• fix keyboard bug @alex-ju found with expandable rows by only doing the arrow key navigation if the target is the cell (was previously being run on focusable elements inside the cell too, which broke keyboard pattern)

📸 Screenshots

🔗 External links

Jira ticket: HDS-3965
Figma file: [if it applies]

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jan 16, 2025 8:11pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jan 16, 2025 8:11pm

[shleewhite]

@MelSumner heads up: I ended up using aria-describedby instead of aria-description for the advanced table caption because it needs to be aria-live="polite"

[shleewhite]

@MelSumner another heads up, after looking into the options for the issue with escape closing both the tooltip and re-focusing the cell - there is no option that scales well here to try and prevent that. It would be very hacky (like making a new tooltip just for advanced table) and wouldn't work if a consumer put something in a cell that also has an escape key handler.

Leaving the behavior as is.

[alex-ju]

Thanks for cleaning-up the git history for this work! 🙌

I did a first high-level pass, skimming through the code and checking the component in showcase. Here are my main findings so far:

Issue: keyboard navigation + expandable rows: navigate inside a cell (pressing Enter) and moving focus from the expand button to the next in-cell element (by pressing the right arrow key); at this stage pressing escape will not return focus to the table cell; the user has to return to the expand button and then press escape.

Issue: keyboard navigation + sticky header: navigating upwards (pressing the up key) results in a tricky state where the focused cell is overlapping the header

Issue: keyboard navigation: in-cell navigation works as expected for left/right arrows, but moves the focus outside the cell when up/down arrows are pressed.

[majedelass]

I found a few things. I believe Andrew will do an independent review too. But here are a few ones. Let me know if you need anything.