Upgrade ember-a11y-refocus to v5.1.0

.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();

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

@@ -0,0 +1,31 @@
+// NOTE: this is currently required because we cannot import the CSS from ember-a11y-refocus directly without requiring consumers that use scss to add the dependency as well.
+
+// The styles are taken directly from the ember-a11y-refocus package here:
+#ember-a11y-refocus-nav-message {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+
+.ember-a11y-refocus-skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.25rem;
+  color: #fff;
+  font-size: 0.75rem;
+  text-decoration: none;
+  // stylelint-disable-next-line color-function-notation
+  background-color: rgb(0 0 0 / 75%);
+  transform: translateY(-100%);
+  transition: transform 0.3s ease-in-out;
+}
+
+.ember-a11y-refocus-skip-link:focus {
+  transform: translateY(0);
+}

packages/components/unpublished-development-types/global.d.ts

@@ -15,6 +15,7 @@ import type { EmbroiderUtilRegistry } from '@embroider/util';
 import type RenderModifiersRegistry from '@ember/render-modifiers/template-registry';
 import type EmberComposableHelpersRegistry from '@nullvoxpopuli/ember-composable-helpers/template-registry';
 import type EmberIntlRegistry from 'ember-intl/template-registry';
+import type EmberA11yRefocusRegistry from 'ember-a11y-refocus/template-registry';
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry
@@ -28,6 +29,7 @@ declare module '@glint/environment-ember-loose/registry' {
       RenderModifiersRegistry,
       EmberComposableHelpersRegistry,
       EmbroiderUtilRegistry,
+      EmberA11yRefocusRegistry,
       EmberIntlRegistry /*, other addon registries */ {
     // local entries
     Portal: typeof Portal;