Skip to content
Snippets Groups Projects
Commit f43601d6 authored by OZGCloud's avatar OZGCloud
Browse files

OZG-7078 Add ods-focused class to link

parent e98e67b3
Branches
Tags
No related merge requests found
......@@ -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;
}
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);
});
});
});
});
......@@ -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;
}
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment