From 16ba4a56d315eac9256ddea9fc2de6da3d435ee5 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Fri, 11 Apr 2025 11:35:05 +0200
Subject: [PATCH] OZG-7707 show sr label with if
---
.../src/lib/icon/icon.component.spec.ts | 24 +++++++++++++++++++
.../src/lib/icon/icon.component.ts | 4 +++-
2 files changed, 27 insertions(+), 1 deletion(-)
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts
index eef4c5ff9e..0e15e5ed23 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts
@@ -21,16 +21,20 @@
* Die sprachspezifischen Genehmigungen und Beschränkungen
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
+import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
import { provideHttpClient } from '@angular/common/http';
import { provideZoneChangeDetection } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { provideAngularSvgIcon } from 'angular-svg-icon';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { IconComponent } from './icon.component';
describe('IconComponent', () => {
let component: IconComponent;
let fixture: ComponentFixture<IconComponent>;
+ const labelSelector: string = getDataTestIdOf('sr-label');
+
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [IconComponent],
@@ -45,4 +49,24 @@ describe('IconComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ describe('component', () => {
+ describe('label', () => {
+ it('should show', () => {
+ component.label = 'test';
+
+ fixture.detectChanges();
+
+ existsAsHtmlElement(fixture, labelSelector);
+ });
+
+ it('should hide', () => {
+ component.label = '';
+
+ fixture.detectChanges();
+
+ notExistsAsHtmlElement(fixture, labelSelector);
+ });
+ });
+ });
});
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
index 0c998775c8..3a1d1d98bb 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
@@ -60,7 +60,9 @@ type IconVariants = VariantProps<typeof iconVariants>;
[svgClass]="twMerge(iconVariants({ size, fill }), class)"
aria-hidden="true"
/>
- <span class="sr-only empty:hidden">{{ label }}</span>`,
+ @if (label) {
+ <span class="sr-only" data-test-id="sr-label">{{ label }}</span>
+ }`,
styles: [':host {@apply block size-fit}'],
})
export class IconComponent {
--
GitLab