Upgrade ember-a11y-refocus to v5.1.0

[shleewhite]

📌 Summary

This PR upgrades ember-a11y-refocus to v5.1.0, which required a few related dependency, type, and style updates to ensure everything compiles and functions correctly.

Changes

• Upgrade @glimmer/component to v2.0
  • Required for the EmberA11yRefocusRegistry to correctly import type signatures for NavigationNarrator.
  • Without this, NavigationNarrator would remain untyped.
  • Added a global override in package.json to force v2.0.0. This prevents build failures in Showcase and Website caused by mismatched versions.
• Fix types for @a11yRefocusNavigationText arguments
  • In SideNav and AppHeader, this arg was previously typed as string.
  • It now correctly uses (transition: Transition) => boolean since it is forwarded to the NavigationNarrator component.
• Correct Owner typing in th-resize-handle
  • @glimmer/[email protected] throws if Owner is not typed correctly.
  • Updated the last remaining usage of Owner being typed as unknown.
• Add NavigationNarrator styles to Website CSS
  • [email protected] no longer auto-imports its styles for the website nav.
  • Explicitly added them via website/ember-cli-build.js and website/app/styles/app.scss following the recommended usage.

Open discussion

There is still a question around what is the best way to handle the ember-a11y-refocus styles. Before, the way the build worked made it so the consumer would install ember-a11y-refocus by installing the design system and that would implicitly import the styles. This is no longer the case, so either we need to export the styles for them or they need to manually import them.

In this instance, we can treat the showcase app as a demo consumer of the design system. The easiest way to verify that the styles are imported are to check the SideNav skip link example in the showcase. If the link has an underline, the styles are not imported.

The solution in this PR is Lee's preference
Ultimately, the main style we need is text-decoration: none and ember-a11y-refocus is not likely to change the styles frequently so I think it is reasonably safe to copy their styles and include them in our exported stylesheet.

Option 2: Require all consumers add ember-a11y-refocus as a dependency

SPIKE PR: #3251

In this option, we don't export the ember-a11y-refocus styles so the consumer has to include the path in their ember-cli-build and add it as a dependency. This approach is similar to how the tokens styles work.

This would require all consumers to update their ember-cli-build file and we'd have to change the guidance on our website. If you don't do this, the design system package builds fine, but the showcase fails to build because it does not have access to the stylesheet.

---

👀 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.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Sep 25, 2025 10:33pm
hds-website	Ready	Preview	Sep 25, 2025 10:33pm

[aklkv]

we need to bring it styles manually now as addon it self now v2 which means styles will not be auto included https://github.com/ember-a11y/ember-a11y-refocus?tab=readme-ov-file#usage

also my comments on original PR is still valid #2950 (comment)

[MelSumner]

The addon has classes & Ember should let you add your own class when you invoke the component, so the styles shouldn't be an issue, even if usage has slightly changed out of necessity.

I think your preferred solution is fine, honestly. I don't plan to change the styles, it's one of those things that is meant to be as barebones as possible so folks can use the classnames in their apps if they want to change things to match their own visual presentation styles.

Fix types for @a11yRefocusNavigationText arguments

the navigation text should still be a string. Do you mean a11yRefocusRouteChangeValidator maybe?