From c421bea8ed041b0c938b5173e1aa8b806755e368 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] prefer moving focus on heading that 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 df813e5d..3b7e8d0f 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"><ng-container i18n="result subheader">Test result for</ng-container>&nbsp;<strong>{{ form.domain }}</strong></h2>
+      <h2 id="result-heading" tabindex="-1" #resultSectionHeading aria-describedby="result-creation-time"><ng-container i18n="result subheader">Test result for</ng-container>&nbsp;<strong>{{ form.domain }}</strong></h2>
       <div class="result-metadata">
         <p id="result-creation-time" class="result-test-datetime"><ng-container i18n="result test metadata">Created on</ng-container>&nbsp;<time [dateTime]="test.creation_time ? test.creation_time.toISOString() : ''">{{ test.creation_time | date:'medium' }}</time></p>
 
diff --git a/src/app/components/result/result.component.ts b/src/app/components/result/result.component.ts
index 7a20037c..afd49331 100644
--- a/src/app/components/result/result.component.ts
+++ b/src/app/components/result/result.component.ts
@@ -21,7 +21,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: ''};
@@ -109,7 +109,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);
     });