OZG-7161-7545 fix dropdown layout, opt screenreader, open link in new tab

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>`,
 })

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">

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"

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"

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>

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>
-
-