diff --git a/alfa-client/libs/common/src/lib/accessibility-button/accessibility-button.component.ts b/alfa-client/libs/common/src/lib/accessibility-button/accessibility-button.component.ts index b356bd828f7b2c8515454fb92a4d09603d8f5f7d..978410aaa700e5c88ec2ad428586bb92e8ffb912 100644 --- a/alfa-client/libs/common/src/lib/accessibility-button/accessibility-button.component.ts +++ b/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; } diff --git a/alfa-client/libs/design-system/src/lib/link/link.component.spec.ts b/alfa-client/libs/design-system/src/lib/link/link.component.spec.ts index 3ddfc1899659b7c2723656a624184e9f989930e6..431c89518a427b7dc43111fa1ff4ffeb00213082 100644 --- a/alfa-client/libs/design-system/src/lib/link/link.component.spec.ts +++ b/alfa-client/libs/design-system/src/lib/link/link.component.spec.ts @@ -1,10 +1,14 @@ +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); + }); + }); + }); }); diff --git a/alfa-client/libs/design-system/src/lib/link/link.component.ts b/alfa-client/libs/design-system/src/lib/link/link.component.ts index e17d50d683ebb302df52f35d74972ac3026933e6..1d11015962993c60b5c4eea6b5687f6500a76d81 100644 --- a/alfa-client/libs/design-system/src/lib/link/link.component.ts +++ b/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; } diff --git a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html b/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html index 447076643c1eaaf8e7b23be9d7d9ab3f826ff31e..951b5d9b159905b31afd6908f9f088398f45f6f2 100644 --- a/alfa-client/libs/navigation/src/lib/header-container/header/header.component.html +++ b/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>