From 59a09348941315f8937b5212624d10691a6ea4ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20G=C3=A5rdebrink?=
 <christian.gardebrink@arbetsformedlingen.se>
Date: Mon, 4 Oct 2021 15:42:36 +0200
Subject: [PATCH] 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
---
 .../skip-to-content.component.html            |  2 +-
 .../skip-to-content.component.ts              | 19 +------------------
 .../skip-to-content/skip-to-content.module.ts |  3 ++-
 .../directives/anchor-link.directive.ts       |  7 ++++++-
 4 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.html
index 96bb2d5..c0f2d34 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.html
+++ b/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>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.ts
index abc8e84..550206e 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.ts
+++ b/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 { NavigationEnd, Router } from '@angular/router';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 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();
-      })
-    );
-  }
 }
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.module.ts
index 98c05b6..344c141 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.module.ts
+++ b/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 {}
diff --git a/apps/mina-sidor-fa/src/app/shared/directives/anchor-link.directive.ts b/apps/mina-sidor-fa/src/app/shared/directives/anchor-link.directive.ts
index b405ef8..e6fe8ff 100644
--- a/apps/mina-sidor-fa/src/app/shared/directives/anchor-link.directive.ts
+++ b/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();
   }