prefer moving focus on heading that section

zonemaster · Feb 27, 2024 · c421bea · c421bea
1 parent 0097a21
commit c421bea
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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);
     });