From 4742b840b0196808a8443ad7f2b4942e44bee194 Mon Sep 17 00:00:00 2001
From: Oliver Schmidt <kontakt@webkreation.de>
Date: Wed, 5 Feb 2025 21:50:25 +0100
Subject: [PATCH 1/2] OZG-7161-7545 fix dropdown layout, opt screenreader, open
link in new tab
---
.../dropdown-menu-link-item.component.ts | 7 ++++---
.../dropdown-menu-text-item.component.ts | 2 +-
.../dropdown-menu/dropdown-menu/dropdown-menu.component.ts | 2 +-
.../lib/icons/open-link-icon/open-link-icon.component.ts | 1 +
.../lib/ui/open-url-button/open-url-button.component.html | 4 ++--
.../help-menu/documentation/documentation.component.html | 4 +---
6 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts
index 1d0258ddbc..5c5d0d9a19 100644
--- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link-item/dropdown-menu-link-item.component.ts
@@ -7,10 +7,11 @@ import { OpenLinkIconComponent } from '../../icons/open-link-icon/open-link-icon
standalone: true,
imports: [LinkComponent, OpenLinkIconComponent],
styles: [':host {@apply first:mt-2}'],
- template: ` <ods-link [url]="url" class="bg-whitetext">
+ template: ` <ods-link [url]="url" class="bg-whitetext" [openInNewTab]="true">
<div class="flex items-center gap-2 px-4 py-3">
- <p class="text-primary">{{ text }}</p>
- <ods-open-link-icon size="small" />
+ <p class="font-medium text-primary">{{ text }}</p>
+ <ods-open-link-icon class="size-5" />
+ <span class="sr-only">Öffnet in einem neuen Tab</span>
</div>
</ods-link>`,
})
diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-text-item/dropdown-menu-text-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-text-item/dropdown-menu-text-item.component.ts
index 1282e9fbd3..270bdeef42 100644
--- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-text-item/dropdown-menu-text-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-text-item/dropdown-menu-text-item.component.ts
@@ -5,7 +5,7 @@ import { Component, Input } from '@angular/core';
selector: 'ods-dropdown-menu-text-item',
standalone: true,
imports: [CommonModule],
- styles: [':host {@apply flex min-h-12 items-start gap-4 px-4 py-3 text-start first:mt-2}'],
+ styles: [':host {@apply flex min-h-12 items-start gap-4 px-4 py-3 text-start}'],
template: `
<ng-content select="[icon]" />
<div class="w-80 whitespace-normal">
diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts
index 5a7a7bba99..04a15c7eec 100644
--- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts
@@ -48,7 +48,7 @@ import { twMerge } from 'tailwind-merge';
</button>
<div
*ngIf="isPopupOpen"
- class="absolute z-50 max-h-120 min-w-44 max-w-96 animate-fadeIn overflow-y-auto rounded bg-dropdownBg shadow-md focus:outline-none"
+ class="absolute z-50 max-h-120 min-w-44 max-w-96 animate-fadeIn overflow-y-auto rounded bg-dropdownBg shadow-md ring-1 ring-grayborder focus:outline-none"
[ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'"
role="menu"
aria-modal="true"
diff --git a/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts
index 3e0eac83af..e4774466ae 100644
--- a/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts
@@ -34,6 +34,7 @@ import { iconVariants, IconVariants } from '../iconVariants';
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
[ngClass]="twMerge(iconVariants({ size }), 'fill-primary', class)"
+ aria-hidden="true"
>
<path
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h7v2H5v14h14v-7h2v7c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm4.7-5.3-1.4-1.4L17.6 5H14V3h7v7h-2V6.4l-9.3 9.3Z"
diff --git a/alfa-client/libs/ui/src/lib/ui/open-url-button/open-url-button.component.html b/alfa-client/libs/ui/src/lib/ui/open-url-button/open-url-button.component.html
index 39ef61cb64..a23a433b03 100644
--- a/alfa-client/libs/ui/src/lib/ui/open-url-button/open-url-button.component.html
+++ b/alfa-client/libs/ui/src/lib/ui/open-url-button/open-url-button.component.html
@@ -29,11 +29,11 @@
[href]="url"
[target]="targetName"
[attr.aria-label]="text"
- [tooltip]="tooltip"
[color]="'primary'"
[title]="tooltip"
class="button"
>
- <mat-icon>open_in_new</mat-icon>
<span class="text-sm">{{ text }}</span>
+ <mat-icon>open_in_new</mat-icon>
+ <span class="sr-only">{{ tooltip }}</span>
</a>
diff --git a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html
index f3fc4cab0d..9ec99cebda 100644
--- a/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html
+++ b/alfa-client/libs/user-assistance/src/lib/help-menu/documentation/documentation.component.html
@@ -24,12 +24,10 @@
-->
<ods-dropdown-menu-text-item
- class="border-b border-b-grayborder border-t-grayborder bg-whitetext first:border-t"
+ class="border-b border-b-grayborder border-t-grayborder bg-whitetext"
title="Benutzerleitfaden"
description="Alle Funktionen der Allgemeinen Fachanwendung (Alfa) erklärt."
>
<ods-file-icon icon fileType="pdf" size="large"></ods-file-icon>
<alfa-open-documentation-button additionalContent [url]="url" data-test-id="documentations-component" />
</ods-dropdown-menu-text-item>
-
-
--
GitLab
From e618bda9e3a1b07511da281944eeed8be772104f Mon Sep 17 00:00:00 2001
From: Oliver Schmidt <kontakt@webkreation.de>
Date: Wed, 5 Feb 2025 21:51:17 +0100
Subject: [PATCH 2/2] OZG-7161-7545 Fix Tooltip max-width and break words
---
.../libs/design-system/src/lib/tooltip/tooltip.component.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
index 1f813a9e5e..f82fe2102c 100644
--- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
+++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.component.ts
@@ -29,7 +29,7 @@ import { TooltipPosition } from './tooltip.directive';
selector: 'ods-tooltip',
imports: [NgClass],
template: `<span
- class="tooltip fixed z-[100] max-w-md animate-fadeIn cursor-default whitespace-pre rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white md:max-w-[calc(90vw)]"
+ class="tooltip fixed z-[100] max-w-md animate-fadeIn cursor-default break-words rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white md:max-w-[calc(90vw)]"
[ngClass]="class"
[class.visible]="show"
[class.invisible]="!show"
--
GitLab