Render skip-to-main-content as <a href="#main-content"> instead of a button

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">

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');
+    });
+  });
 });

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)) {