diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts
index 072f3b3..0663021 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts
@@ -1,14 +1,36 @@
-import { Component, input, output } from '@angular/core';
+import { Component, ElementRef, HostListener, inject, input, OnDestroy, OnInit, output } from '@angular/core';
@Component({
selector: 'app-modal-shell',
templateUrl: './modal-shell.html',
styleUrl: './modal-shell.scss',
})
-export class ModalShell {
+export class ModalShell implements OnInit, OnDestroy {
readonly title = input.required
();
readonly closed = output();
+ private readonly el = inject(ElementRef);
+ private previousFocus: HTMLElement | null = null;
+
+ ngOnInit() {
+ this.previousFocus = document.activeElement as HTMLElement;
+ requestAnimationFrame(() => {
+ const focusable = this.el.nativeElement.querySelector(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ );
+ focusable?.focus();
+ });
+ }
+
+ ngOnDestroy() {
+ this.previousFocus?.focus();
+ }
+
+ @HostListener('keydown.escape')
+ onEscape() {
+ this.closed.emit();
+ }
+
onOverlayClick() {
this.closed.emit();
}
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.html b/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.html
index 2e09072..a631264 100644
--- a/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.html
+++ b/ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.html
@@ -48,9 +48,9 @@
- @if (promptSaved()) {
- ✓ Saved
- }
+
+ @if (promptSaved()) { ✓ Saved }
+