[DO NOT MERGE] Debugging acceptance test failure for the AdvancedTable

[didoo]

Warning

Do not merge - Test-only PR

📌 Summary

This PR has been opened to help debugging an issue triggered by a different way in which we include the component's CSS file, which in turn triggers a failure for the AdvancedTable acceptance test (which include an accessibility test too)

🛠️ Detailed description

While working on #3240 I started to notice failures in the acceptance test for the AdvancedTable Showcase page. After a long investigation (almost two days, due to the fact that nothing that I was seeing made sense) I was able to narrow down the "problem" to the changes introduced with this test PR: if we don't compile the CSS for the HDS components, but we use it directly via a stylesheet <link> in the index.html page, the test fails.

But this doesn't make sense: what I have done in this PR is simply:

• compile the design-system-components.css in the package/components folder, using the pnpm build command
• copy the generated file from packages/components/dist/styles/@hashicorp/design-system-components.css to showcase/public/assets/styles/@hashicorp/design-system-components.css so that when the showcase app is built, the CSS file is copied over in the dist/assets folder
• import in the showcase/app/index.html the CSS file has been copied over, using <link rel="stylesheet" href="{{rootURL}}assets/styles/@hashicorp/design-system-components.css">
• comment out the @use "@hashicorp/design-system-components" line in the showcase/app/styles/app.scss
• recompile the app and run the tests using the command pnpm test:ember -s -f "Acceptance | components/advanced-table”

This triggers the errors:

1. global failure: Error: ResizeObserver loop completed with undelivered notifications.
2. Promise rejected during "Components/advanced-table page passes automated a11y checks": The page should have no accessibility violations. Violations:

• [serious]: All touch targets must be 24px large, or leave sufficient space - Violated 8 times. -

In theory such change should not trigger such error, if the CSS is the same, which is something I have checked over and over in different ways. In reality, for some reasons, it triggers the error.

At the moment I am not sure what could be, I need input from other the other @hashicorp/hds-engineering devs to see if they may have some ideas.

symptoms

A few symptoms that something fishy is going on here:

• if I run a test, with the exact same configuration and code changes, for other components (eg. Acceptance | Component | hds/alert) the tests are all passing
• I see a 404 on a CSS file, but I see it for all the tests, not just this one

🔗 External links

Jira ticket: n/a

---

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Oct 13, 2025 2:56pm
hds-website	Ready	Preview	Oct 13, 2025 2:56pm

[didoo]

OK, in the end I've found the reason/solution: the HTML file used for testing (showcase/tests/index.html) is not the same as the one used to run the application (showcase/app/index.html)!

Adding the missing <link> import to the tests/index.html file fixed the issue.