From e76ddcc7532d4dd06a2e8fe1c25ac8f60f5c1936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kubiak?= <pawel.kubiak.dev@gmail.com>
Date: Fri, 6 Sep 2024 18:22:37 +0200
Subject: [PATCH] fix(docs-infra): do not focus h1 from docs-top-level-banner
 (#57698)

fix(docs-infra): do not focus h1 from docs-top-level-banner

Do not focus heading from docs-top-level-banner.
Move the `Skip to main content` button to the top of DOM tree.

PR Close #57698
---
 adev/src/app/app.component.html | 3 ++-
 adev/src/app/app.component.ts   | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/adev/src/app/app.component.html b/adev/src/app/app.component.html
index 07ffbaf51b3..96308e1946d 100644
--- a/adev/src/app/app.component.html
+++ b/adev/src/app/app.component.html
@@ -1,8 +1,9 @@
+<button (click)="focusFirstHeading()" class="adev-skip">Skip to main content</button>
+
 @defer (when isBrowser) {
   <adev-progress-bar />
   <docs-top-level-banner expiry="2024-12-06" id="state-of-js-2024" link="https://survey.devographics.com/en-US/survey/state-of-js/2024?source=angular_homepage" text="Share your experience with Angular in The State of JavaScript 2024 survey"  />
 }
-<button (click)="focusFirstHeading()" class="adev-skip">Skip to main content</button>
 
 <div class="adev-nav"></div>
 @if (displaySecondaryNav()) {
diff --git a/adev/src/app/app.component.ts b/adev/src/app/app.component.ts
index f402a7f2d4c..d5d7811d23a 100644
--- a/adev/src/app/app.component.ts
+++ b/adev/src/app/app.component.ts
@@ -16,7 +16,7 @@ import {
   signal,
   WritableSignal,
 } from '@angular/core';
-import {NavigationEnd, NavigationSkipped, Router, RouterLink, RouterOutlet} from '@angular/router';
+import {NavigationEnd, NavigationSkipped, Router, RouterOutlet} from '@angular/router';
 import {filter, map, skip} from 'rxjs/operators';
 import {
   CookiePopup,
@@ -84,7 +84,7 @@ export class AppComponent implements OnInit {
       return;
     }
 
-    const h1 = this.document.querySelector<HTMLHeadingElement>('h1');
+    const h1 = this.document.querySelector<HTMLHeadingElement>('h1:not(docs-top-level-banner h1)');
     h1?.focus();
   }