From 4e9d1554502ccea2717cd13581814745f7394394 Mon Sep 17 00:00:00 2001
From: bram-atmire <bram@mire.be>
Date: Mon, 4 May 2026 11:15:06 +0200
Subject: [PATCH] Render skip-to-main-content as <a href="#main-content">
 instead of a button

The button worked in the running SPA via a JS click handler that focused
#main-content, but the canonical and most thoroughly assistive-tech-tested
skip-link pattern is a plain anchor. Anchors work without JavaScript, survive
hydration glitches, and need no custom focus handler.

Changes:
- root.component.html: replace <button (click)="skipToMainContent()"> with
  <a href="#main-content">. Add tabindex="-1" to <main id="main-content"> so
  the fragment navigation reliably moves focus across browsers.
- root.component.ts: drop the now-unused skipToMainContent() method.
- root.component.spec.ts: add specs verifying the anchor is rendered with the
  correct href and that the <main> target carries tabindex="-1".

References #5605
---
 src/app/root/root.component.html    |  6 +++---
 src/app/root/root.component.spec.ts | 16 ++++++++++++++++
 src/app/root/root.component.ts      |  8 --------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 91cb236abed..d08f78980ab 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -1,6 +1,6 @@
-<button (click)="skipToMainContent()" class="sr-only" id="skip-to-main-content">
+<a href="#main-content" class="sr-only" id="skip-to-main-content">
   {{ 'root.skip-to-content' | translate }}
-</button>
+</a>
 
 <div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader" [ngClass]="browserOsClasses.asObservable() | async" [@slideSidebarPadding]="{
      value: ((isSidebarVisible$ | async) !== true ? 'hidden' : (slideSidebarOver$ | async) ? 'unpinned' : 'pinned'),
@@ -11,7 +11,7 @@
     <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
     <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
     <ds-breadcrumbs></ds-breadcrumbs>
-    <main class="my-cs" id="main-content">
+    <main class="my-cs" id="main-content" tabindex="-1">
 
       @if (shouldShowRouteLoader) {
         <div class="container d-flex justify-content-center align-items-center h-100">
diff --git a/src/app/root/root.component.spec.ts b/src/app/root/root.component.spec.ts
index 2bcbc673f3f..a1ccbfc21d8 100644
--- a/src/app/root/root.component.spec.ts
+++ b/src/app/root/root.component.spec.ts
@@ -72,4 +72,20 @@ describe('RootComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('skip-to-main-content link', () => {
+    it('should be rendered as an anchor pointing to #main-content', () => {
+      const skipLink = fixture.nativeElement.querySelector('#skip-to-main-content');
+      expect(skipLink).not.toBeNull();
+      expect(skipLink.tagName).toBe('A');
+      expect(skipLink.getAttribute('href')).toBe('#main-content');
+    });
+
+    it('should target a <main> element with tabindex="-1" so the anchor can move focus', () => {
+      const mainContent = fixture.nativeElement.querySelector('#main-content');
+      expect(mainContent).not.toBeNull();
+      expect(mainContent.tagName).toBe('MAIN');
+      expect(mainContent.getAttribute('tabindex')).toBe('-1');
+    });
+  });
 });
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index e237736eb66..2493aa264ae 100644
--- a/src/app/root/root.component.ts
+++ b/src/app/root/root.component.ts
@@ -134,14 +134,6 @@ export class RootComponent implements OnInit {
     }
   }
 
-  skipToMainContent() {
-    const mainContent = document.getElementById('main-content');
-    if (mainContent) {
-      mainContent.tabIndex = -1;
-      mainContent.focus();
-    }
-  }
-
   getBrowserName(): string {
     const userAgent = this._window.nativeWindow.navigator?.userAgent;
     if (/Firefox/.test(userAgent)) {