From 2bb4c49c1efee7a4ea5a859f39ffdfc21c237fbe Mon Sep 17 00:00:00 2001 From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com> Date: Thu, 10 Apr 2025 13:59:55 +0200 Subject: [PATCH] OZG-7077 add sr-only block to icon --- alfa-client/apps/demo/src/app/app.component.html | 5 ++++- .../libs/design-system/src/lib/icon/icon.component.ts | 10 ++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html index 38a9c8847a..5f65c958e0 100644 --- a/alfa-client/apps/demo/src/app/app.component.html +++ b/alfa-client/apps/demo/src/app/app.component.html @@ -60,11 +60,14 @@ <h2 class="heading-2">Icons</h2> <div class="mb-6 flex gap-1"> <ods-icon name="account-circle" size="xxl" /> - <ods-icon name="accessibility" size="extra-large" fill="text" /> + <ods-icon name="accessibility" size="extra-large" fill="text" label="Barrierefreiheit" /> <ods-icon name="accessibility" size="large" fill="error" /> <ods-icon name="accessibility" class="fill-red-500" /> <ods-icon name="accessibility" size="small" /> <ods-icon name="admin-logo" size="full" /> + <ods-button variant="ghost" size="fit"> + <ods-icon icon name="accessibility" fill="text" label="Barrierefreiheitseite öffnen" /> + </ods-button> </div> <h1 class="mb-6 text-2xl font-semibold text-text">Auswertungen</h1> <ods-button text="Auswertung hinzufügen" /> 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 a545fcc93d..0c998775c8 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 @@ -56,15 +56,17 @@ type IconVariants = VariantProps<typeof iconVariants>; standalone: true, imports: [CommonModule, SvgIconComponent], template: `<svg-icon - [src]="'assets/icons/' + name + '.svg'" - [svgClass]="twMerge(iconVariants({ size, fill }), class)" - aria-hidden="true" - />`, + [src]="'assets/icons/' + name + '.svg'" + [svgClass]="twMerge(iconVariants({ size, fill }), class)" + aria-hidden="true" + /> + <span class="sr-only empty:hidden">{{ label }}</span>`, styles: [':host {@apply block size-fit}'], }) export class IconComponent { @Input({ required: true }) name!: string; @Input() class: string; + @Input() label: string = ''; @Input() size: IconVariants['size'] = 'medium'; @Input() fill: IconVariants['fill'] = 'primary'; -- GitLab