bug(skip link to main content): Adjusted the skip link to the main content so that it's href is correct and that the link functions as an anchor link (TV-645)

Squashed commit of the following:

commit 0dd109abc589949df5f82443eef3e53a7e380927
Merge: 944d7bec 002e26c0
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Fri Oct 1 12:52:35 2021 +0200

    Merge branch 'develop' into feature/TV-645

commit 944d7bec4d9493d26586ff108ca98f761a122be7
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Fri Oct 1 12:51:11 2021 +0200

    TV-645

apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.html

@@ -1 +1 @@
-<a [attr.href]="skipLinkPath" class="skip-to-content">Gå till sidans innehåll</a>
+<a [attr.href]="'#'+mainContentId" msfaAnchorLink class="skip-to-content"> Gå till sidans innehåll </a>

apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.ts

@@ -1,7 +1,5 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
-import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'msfa-skip-to-content',
@@ -11,19 +9,4 @@ import { filter } from 'rxjs/operators';
 })
 export class SkipToContentComponent extends UnsubscribeDirective {
   @Input() mainContentId: string;
-  skipLinkPath: string;
-
-  constructor(private router: Router, private changeDetectorRef: ChangeDetectorRef) {
-    super();
-    super.unsubscribeOnDestroy(
-      this.router.events.pipe(filter((event: NavigationEnd) => event instanceof NavigationEnd)).subscribe(({ url }) => {
-        const mainContentId = `#${this.mainContentId}`;
-        // Check if the current URL already includes the mainContentId.
-        const existsInUrl: boolean = url.substring(url.length - mainContentId.length, url.length) === mainContentId;
-
-        this.skipLinkPath = existsInUrl ? url : `${url}${mainContentId}`;
-        this.changeDetectorRef.markForCheck();
-      })
-    );
-  }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { AnchorLinkModule } from '@msfa-directives/anchor-link.module';
 import { SkipToContentComponent } from './skip-to-content.component';
 
 @NgModule({
   declarations: [SkipToContentComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, AnchorLinkModule],
   exports: [SkipToContentComponent],
 })
 export class SkipToContentModule {}

apps/mina-sidor-fa/src/app/shared/directives/anchor-link.directive.ts

@@ -9,12 +9,17 @@ export class AnchorLinkDirective {
     const target = event.target as HTMLElement;
     const link = target.tagName === 'a' ? target : target.closest('a');
     const href = link?.getAttribute('href');
-    const element = document.getElementById(href?.trim().replace('#', ''));
+    const elementId = href?.trim().replace('#', '');
+    const element = document.getElementById(elementId);
 
     if (element && element.focus) {
       element.focus();
     }
 
+    if (element.tabIndex < 0) {
+      element.scrollIntoView();
+    }
+
     event.stopPropagation();
     event.preventDefault();
   }