OZG-7078 Add ods-focused class to link

alfa-client/libs/common/src/lib/accessibility-button/accessibility-button.component.ts

@@ -6,8 +6,9 @@ import { AccessibilityIconComponent, LinkComponent } from '@ods/system';
   selector: 'common-accessibility-button',
   standalone: true,
   imports: [CommonModule, AccessibilityIconComponent, LinkComponent],
-  template: `<ods-link [url]="url"><ods-accessibility-icon size="large" /></ods-link>`,
+  template: `<ods-link [url]="url" [linkTestId]="linkTestId"><ods-accessibility-icon size="large" /></ods-link>`,
 })
 export class AccessibilityButtonComponent {
   @Input({ required: true }) url!: string;
+  @Input() linkTestId: string | null = null;
 }

alfa-client/libs/design-system/src/lib/link/link.component.spec.ts

+import { getElementFromFixture } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { LinkComponent } from './link.component';
 
 describe('LinkComponent', () => {
   let component: LinkComponent;
   let fixture: ComponentFixture<LinkComponent>;
 
+  const linkElementSelector: string = getDataTestIdOf('testLink');
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [LinkComponent],
@@ -12,10 +16,34 @@ describe('LinkComponent', () => {
 
     fixture = TestBed.createComponent(LinkComponent);
     component = fixture.componentInstance;
+    component.linkTestId = 'testLink';
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('component', () => {
+    describe('isFocused', () => {
+      it('should be set to true on focus', () => {
+        const linkElement: HTMLLinkElement = getElementFromFixture(fixture, linkElementSelector);
+
+        linkElement.focus();
+        fixture.detectChanges();
+
+        expect(component.isFocused).toBe(true);
+      });
+
+      it('should be set to false on blue', () => {
+        component.isFocused = true;
+        const linkElement: HTMLLinkElement = getElementFromFixture(fixture, linkElementSelector);
+
+        linkElement.dispatchEvent(new Event('blur'));
+        fixture.detectChanges();
+
+        expect(component.isFocused).toBe(false);
+      });
+    });
+  });
 });

alfa-client/libs/design-system/src/lib/link/link.component.ts

@@ -10,6 +10,10 @@ import { twMerge } from 'tailwind-merge';
     [target]="openInNewTab ? '_blank' : '_self'"
     [href]="url"
     [class]="twMerge('block rounded text-text outline-2 outline-offset-2 outline-focus focus-visible:outline', class)"
+    [attr.data-test-id]="linkTestId"
+    (focus)="isFocused = true"
+    (blur)="isFocused = false"
+    [class.ods-focused]="isFocused"
   >
     <ng-content />
   </a>`,
@@ -18,6 +22,8 @@ export class LinkComponent {
   @Input({ required: true }) url!: string;
   @Input() openInNewTab: boolean = false;
   @Input() class: string = '';
+  @Input() linkTestId: string | null = null;
 
+  public isFocused: boolean = false;
   readonly twMerge = twMerge;
 }

alfa-client/libs/navigation/src/lib/header-container/header/header.component.html

@@ -31,7 +31,7 @@
     <alfa-vorgang-search-container></alfa-vorgang-search-container>
   </div>
   <div class="flex items-center text-ozggray-800 dark:text-ozggray-300">
-    <common-accessibility-button url="/" class="mr-3" data-test-id="accessibility-button" />
+    <common-accessibility-button url="/" class="mr-3" linkTestId="accessibility-button" />
     <alfa-help-menu [apiRootStateResource]="apiRootStateResource" data-test-id="help-menu"></alfa-help-menu>
     <alfa-user-settings-container data-test-id="user-settings"></alfa-user-settings-container>
     <alfa-user-profile-in-header-container data-test-id="current-user"></alfa-user-profile-in-header-container>