From e9c8a30dc787941105a2c32c68df200efe5ffde7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Berthaud-M=C3=BCller?=
 <gael.berthaud-muller@afnic.fr>
Date: Tue, 27 Feb 2024 17:19:31 +0100
Subject: [PATCH 1/2] close history modal on link click

---
 src/app/components/history/history.component.html | 2 +-
 src/app/components/history/history.component.ts   | 1 +
 src/app/components/result/result.component.html   | 8 ++++----
 src/app/components/result/result.component.ts     | 6 +++++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/components/history/history.component.html b/src/app/components/history/history.component.html
index cb92bc5e..ac7bbe43 100644
--- a/src/app/components/history/history.component.html
+++ b/src/app/components/history/history.component.html
@@ -24,7 +24,7 @@
 
   <ul *ngIf="filteredHistory.length > 0;else noHistory" class="list-group mb-3">
     <li *ngFor="let item of historyItems" class="list-group-item list-group-item-action list-group-item-{{item.color}} d-flex justify-content-between">
-      <a routerLink="/result/{{item.id}}">
+      <a routerLink="/result/{{item.id}}" (click)="onTestClicked.emit(item.id)">
         {{ item.local_creation_time | date:'yyyy-MM-dd HH:mm zzzz' }}
       </a>
       <small i18n="history info|singular undelegated" *ngIf="item.undelegated" class="text-muted">Undelegated</small>
diff --git a/src/app/components/history/history.component.ts b/src/app/components/history/history.component.ts
index b9e9ed06..8d7a4c64 100644
--- a/src/app/components/history/history.component.ts
+++ b/src/app/components/history/history.component.ts
@@ -13,6 +13,7 @@ import {AlertService} from '../../services/alert.service';
 export class HistoryComponent implements OnInit {
 
   @Input() history: any[];
+  @Output() onTestClicked: EventEmitter<any> = new EventEmitter();
 
   public page = 1;
   public pageSize = 10;
diff --git a/src/app/components/result/result.component.html b/src/app/components/result/result.component.html
index 32a2f79b..47bc2800 100644
--- a/src/app/components/result/result.component.html
+++ b/src/app/components/result/result.component.html
@@ -5,16 +5,16 @@ <h2 i18n="result subheader">Test another domain</h2>
   </app-run-test>
 </app-header>
 
-<section class="result">
+<section class="result" tabindex="-1" aria-labelledby="result-heading result-creation-time" #resultSection>
   <div>
     <div>
-      <h2>
+      <h2 id="result-heading">
         <ng-container i18n="result subheader">Test result for</ng-container>
         <strong> {{ unicodeDomain }}</strong>
         <ng-container *ngIf="asciiDomain !== unicodeDomain"> ({{ asciiDomain }})</ng-container>
       </h2>
       <div class="result-metadata">
-        <p class="result-test-datetime"><ng-container i18n="result test metadata">Created on</ng-container><time [dateTime]="test.creation_time ? test.creation_time.toISOString() : ''"> {{ test.creation_time | date:'medium' }}</time></p>
+        <p id="result-creation-time" class="result-test-datetime"><ng-container i18n="result test metadata">Created on</ng-container><time [dateTime]="test.creation_time ? test.creation_time.toISOString() : ''"> {{ test.creation_time | date:'medium' }}</time></p>
 
         <div class="actions-btn">
           <div>
@@ -229,6 +229,6 @@ <h4 class="modal-title" i18n="result history modal">History</h4>
     <button type="button" class="btn-close" i18n-aria-label="result history modal" aria-label="Close" i18n-title="result history modal" title="Close" (click)="d('Cross click')"></button>
   </header>
   <div class="modal-body">
-    <app-history [history]="history"></app-history>
+    <app-history [history]="history" (onTestClicked)="c($event)"></app-history>
   </div>
 </ng-template>
diff --git a/src/app/components/result/result.component.ts b/src/app/components/result/result.component.ts
index 1ea4f6b1..e53f6159 100644
--- a/src/app/components/result/result.component.ts
+++ b/src/app/components/result/result.component.ts
@@ -22,6 +22,7 @@ export class ResultComponent implements OnInit, OnDestroy {
   @Input('testId') testId: string;
   @ViewChild('resultView', {static: false}) resultView: ElementRef;
   @ViewChild('historyModal', {static: false}) historyModal: ElementRef;
+  @ViewChild('resultSection', {static: false}) resultSection: ElementRef;
 
   public displayForm = false;
   public form = {ipv4: true, ipv6: true, profile: 'default_profile', domain: ''};
@@ -108,7 +109,10 @@ export class ResultComponent implements OnInit, OnDestroy {
 
   public openModal(content) {
     this.modalService.open(content).result.then((result) => {
-      console.log(result)
+      console.log(result);
+      // NOTE: this is a hack, I don't like it.
+      // angular-bootstrap move the focus back to the history button, we move it to the result section at next tick
+      window.setTimeout(() => this.resultSection.nativeElement.focus(), 0);
     }, (reason) => {
       console.log(reason);
     });

From ff1f0af16a83d551ae3d327b6e5f0713f940c37b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Berthaud-M=C3=BCller?=
 <gael.berthaud-muller@afnic.fr>
Date: Tue, 27 Feb 2024 18:12:31 +0100
Subject: [PATCH 2/2] prefer moving focus on heading than section

---
 src/app/components/result/result.component.html | 4 ++--
 src/app/components/result/result.component.ts   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/result/result.component.html b/src/app/components/result/result.component.html
index 47bc2800..69e37eb1 100644
--- a/src/app/components/result/result.component.html
+++ b/src/app/components/result/result.component.html
@@ -5,10 +5,10 @@ <h2 i18n="result subheader">Test another domain</h2>
   </app-run-test>
 </app-header>
 
-<section class="result" tabindex="-1" aria-labelledby="result-heading result-creation-time" #resultSection>
+<section class="result">
   <div>
     <div>
-      <h2 id="result-heading">
+      <h2 id="result-heading" tabindex="-1" #resultSectionHeading aria-describedby="result-creation-time">
         <ng-container i18n="result subheader">Test result for</ng-container>
         <strong> {{ unicodeDomain }}</strong>
         <ng-container *ngIf="asciiDomain !== unicodeDomain"> ({{ asciiDomain }})</ng-container>
diff --git a/src/app/components/result/result.component.ts b/src/app/components/result/result.component.ts
index e53f6159..2abb9f6c 100644
--- a/src/app/components/result/result.component.ts
+++ b/src/app/components/result/result.component.ts
@@ -22,7 +22,7 @@ export class ResultComponent implements OnInit, OnDestroy {
   @Input('testId') testId: string;
   @ViewChild('resultView', {static: false}) resultView: ElementRef;
   @ViewChild('historyModal', {static: false}) historyModal: ElementRef;
-  @ViewChild('resultSection', {static: false}) resultSection: ElementRef;
+  @ViewChild('resultSectionHeading', {static: false}) resultSectionHeading: ElementRef;
 
   public displayForm = false;
   public form = {ipv4: true, ipv6: true, profile: 'default_profile', domain: ''};
@@ -112,7 +112,7 @@ export class ResultComponent implements OnInit, OnDestroy {
       console.log(result);
       // NOTE: this is a hack, I don't like it.
       // angular-bootstrap move the focus back to the history button, we move it to the result section at next tick
-      window.setTimeout(() => this.resultSection.nativeElement.focus(), 0);
+      window.setTimeout(() => this.resultSectionHeading.nativeElement.focus(), 0);
     }, (reason) => {
       console.log(reason);
     });