Close history modal

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>

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;

src/app/components/result/result.component.html

@@ -8,13 +8,13 @@ <h2 i18n="result subheader">Test another domain</h2>
 <section class="result">
   <div>
     <div>
-      <h2>
+      <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>
       </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>

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('resultSectionHeading', {static: false}) resultSectionHeading: 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.resultSectionHeading.nativeElement.focus(), 0);
     }, (reason) => {
       console.log(reason);
     });