Upgrade ember-a11y-refocus to v5.1.0 (#3234)

Co-authored-by: shleewhite <lee.white@hahicorp.com>
Co-authored-by: Alexey Kulakov <uni_que@me.com>

Author: 3 people

.changeset/khaki-bananas-know.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/side-nav -->
+`SideNav` - Fixed the type of `@a11yRefocusRouteChangeValidator` to match the expected type from `ember-a11y-refocus`. The new type is `(transition: Transition) => boolean` instead of `string`.
+<!-- END -->
+
+<!-- START components/app-header -->
+`AppHeader` - Fixed the type of `@a11yRefocusRouteChangeValidator` to match the expected type from `ember-a11y-refocus`. The new type is `(transition: Transition) => boolean` instead of `string`.
+<!-- END -->

.changeset/puny-months-sit.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Upgraded `ember-a11y-refocus` dependency to version `5.0`
+Upgraded `@glimmer/component` dependency to version `2.0`

package.json

@@ -26,6 +26,7 @@
   },
   "pnpm": {
     "overrides": {
+      "@glimmer/component": "^2.0.0",
       "ember-composable-helpers": "npm:@nullvoxpopuli/ember-composable-helpers@^5.2.11"
     },
     "patchedDependencies": {

packages/components/package.json

@@ -58,7 +58,7 @@
     "clipboard-polyfill": "^4.1.1",
     "codemirror-lang-hcl": "^0.0.0-beta.2",
     "decorator-transforms": "^2.3.0",
-    "ember-a11y-refocus": "^4.1.4",
+    "ember-a11y-refocus": "^5.1.0",
     "ember-concurrency": "^4.0.4",
     "ember-element-helper": "^0.8.6",
     "ember-focus-trap": "^1.1.1",
@@ -83,7 +83,7 @@
     "@ember/test-helpers": "^4.0.4",
     "@embroider/addon-dev": "^7.1.5",
     "@eslint/js": "^9.23.0",
-    "@glimmer/component": "^1.1.2",
+    "@glimmer/component": "^2.0.0",
     "@glint/core": "^1.5.2",
     "@glint/environment-ember-loose": "^1.5.2",
     "@glint/environment-ember-template-imports": "^1.5.2",

packages/components/src/components/hds/advanced-table/th-resize-handle.ts

@@ -9,6 +9,7 @@ import { action } from '@ember/object';
 import { modifier } from 'ember-modifier';
 import { requestAnimationFrameWaiter } from './utils.ts';
 import { BORDER_WIDTH } from './index.ts';
+import type Owner from '@ember/owner';
 
 import type HdsAdvancedTableColumn from './models/column.ts';
 import type { HdsAdvancedTableSignature } from './index.ts';
@@ -90,7 +91,7 @@ export default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvance
   );
 
   constructor(
-    owner: unknown,
+    owner: Owner,
     args: HdsAdvancedTableThResizeHandleSignature['Args']
   ) {
     super(owner, args);

packages/components/src/components/hds/app-header/index.hbs

@@ -10,7 +10,6 @@
   ...attributes
 >
   {{#if (and this.hasA11yRefocus (not this._isOpen))}}
-    {{! @glint-expect-error - `ember-a11y-refocus` doesn't expose types yet }}
     <NavigationNarrator
       @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}
       @skipTo={{this.a11yRefocusSkipTo}}

packages/components/src/components/hds/app-header/index.ts

@@ -9,6 +9,7 @@ import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
 import { registerDestructor } from '@ember/destroyable';
 import type Owner from '@ember/owner';
+import type { NavigationNarratorSignature } from 'ember-a11y-refocus/components/navigation-narrator';
 
 import { hdsBreakpoints } from '../../../utils/hds-breakpoints.ts';
 
@@ -19,7 +20,7 @@ export interface HdsAppHeaderSignature {
     a11yRefocusSkipTo?: string;
     a11yRefocusSkipText?: string;
     a11yRefocusNavigationText?: string;
-    a11yRefocusRouteChangeValidator?: string;
+    a11yRefocusRouteChangeValidator?: NavigationNarratorSignature['Args']['routeChangeValidator'];
     a11yRefocusExcludeAllQueryParams?: boolean;
   };
   Blocks: {

packages/components/src/components/hds/side-nav/index.hbs

@@ -20,7 +20,6 @@
 >
   <:root>
     {{#if this.hasA11yRefocus}}
-      {{! @glint-expect-error - `ember-a11y-refocus` doesn't expose types yet }}
       <NavigationNarrator
         @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}
         @skipTo={{this.a11yRefocusSkipTo}}

packages/components/src/components/hds/side-nav/index.ts

@@ -11,6 +11,7 @@ import { registerDestructor } from '@ember/destroyable';
 
 import type { HdsSideNavBaseSignature } from './base';
 import type Owner from '@ember/owner';
+import type { NavigationNarratorSignature } from 'ember-a11y-refocus/components/navigation-narrator';
 
 export interface HdsSideNavSignature {
   Args: {
@@ -21,7 +22,7 @@ export interface HdsSideNavSignature {
     a11yRefocusSkipTo?: string;
     a11yRefocusSkipText?: string;
     a11yRefocusNavigationText?: string;
-    a11yRefocusRouteChangeValidator?: string;
+    a11yRefocusRouteChangeValidator?: NavigationNarratorSignature['Args']['routeChangeValidator'];
     a11yRefocusExcludeAllQueryParams?: boolean;
 
     onToggleMinimizedStatus?: (arg: boolean) => void;

packages/components/src/styles/@hashicorp/design-system-components.scss

@@ -10,6 +10,9 @@
 @use "helpers/focus-ring";
 @use "helpers/typography";
 
+// Vendor styles
+@use "./design-system-ember-a11y-refocus";
+
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/accordion";
@@ -58,6 +61,7 @@
 // END COMPONENT CSS FILES IMPORTS
 
 @use "../mixins/screen-reader-only" as *;
+
 // stylelint-disable-next-line selector-class-pattern
 .sr-only {
   @include screen-reader-only();