fix: reset focus to top after navigation (fixes #123)

microsoft · May 15, 2024 · 4ec17cc · 4ec17cc
1 parent 729288e
commit 4ec17cc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/packages/website/src/app/shared/focus.ts b/packages/website/src/app/shared/focus.ts
@@ -0,0 +1,8 @@
+export function resetFocus() {
+  // When the currently focused element is removed from the DOM,
+  // the browser will reset the focus of the page.
+  const input = document.createElement('input');
+  document.body.appendChild(input);
+  input.focus();
+  document.body.removeChild(input);
+}
diff --git a/packages/website/src/app/workshop/pagination.component.ts b/packages/website/src/app/workshop/pagination.component.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Workshop } from './workshop';
 import { setHash, setQueryParams } from '../router';
+import { resetFocus } from '../shared/focus';
 
 @Component({
   selector: 'app-pagination',
@@ -98,13 +99,15 @@ export class PaginationComponent {
     if (this.hasPrevious()) {
       setQueryParams({ step: this.workshop!.step - 1 });
       setHash();
+      resetFocus();
     }
   }
 
   next() {
     if (this.hasNext()) {
       setQueryParams({ step: this.workshop!.step + 1 });
       setHash();
+      resetFocus();
     }
   }
 }