OZG-7474 Fix tooltips

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 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)]"
+    class="tooltip fixed z-[100] max-w-md animate-fadeIn cursor-default break-words rounded bg-ozggray-900 px-3 py-2 text-sm font-normal 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"

alfa-client/libs/forwarding/src/lib/forward-by-ozgcloud-button-container/forward-by-ozgcloud-button-container.component.html

 @if (vorgangWithEingang | hasLink: vorgangWithEingangLinkRel.FORWARD_BY_OZGCLOUD) {
   @if (showAsIconButton) {
     <ods-button-with-spinner
-      tooltip="Vorgang weiterleiten"
+      [tooltip]="'Vorgang weiterleiten'"
+      tooltipAriaType="aria-labelledby"
       variant="ghost"
       size="fit"
       dataTestId="forward-by-ozgcloud-icon-button"

alfa-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forward-formular/vorgang-forward-form/vorgang-forward-form.component.html

@@ -43,7 +43,8 @@
 
   <ozgcloud-stroked-button-with-spinner
     dataTestId="forward-button"
-    toolTip="Vorgang weiterleiten"
+    [toolTip]="'Vorgang weiterleiten'"
+    tooltipAriaType="aria-labelledby"
     icon="forward"
     type="submit"
     text="Weiterleiten"

alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.html

@@ -26,7 +26,8 @@
 @if (showAsIconButton) {
   <ods-button-with-spinner
     data-test-id="endgueltig-loeschen-icon-button"
-    tooltip="Endgültig löschen"
+    [tooltip]="'Endgültig löschen'"
+    tooltipAriaType="aria-labelledby"
     variant="ghost"
     size="fit"
     (clickEmitter)="endgueltigLoeschen.emit()"

alfa-client/libs/loesch-anforderung/src/lib/endgueltig-loeschen-button-container/endgueltig-loeschen-button/endgueltig-loeschen-button.component.spec.ts

@@ -24,9 +24,9 @@
 import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonWithSpinnerComponent } from '@ods/component';
-import { DeleteVorgangFinallyIconComponent } from '@ods/system';
+import { DeleteVorgangFinallyIconComponent, TooltipDirective } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { EndgueltigLoeschenButtonComponent } from './endgueltig-loeschen-button.component';
 
 describe('EndgueltigLoeschenButtonComponent', () => {
@@ -42,6 +42,7 @@ describe('EndgueltigLoeschenButtonComponent', () => {
         EndgueltigLoeschenButtonComponent,
         MockComponent(ButtonWithSpinnerComponent),
         MockComponent(DeleteVorgangFinallyIconComponent),
+        MockDirective(TooltipDirective),
       ],
     }).compileComponents();
 

alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.html

@@ -27,7 +27,8 @@
   <ods-button-with-spinner
     [stateResource]="loeschAnforderungZuruecknehmenCommand"
     data-test-id="loesch-anforderung-zuruecknehmen-icon-button"
-    tooltip="Löschanforderung zurücknehmen"
+    [tooltip]="'Löschanforderung zurücknehmen'"
+    tooltipAriaType="aria-labelledby"
     variant="ghost"
     size="fit"
     (clickEmitter)="loeschAnforderungZuruecknehmen.emit()"

alfa-client/libs/loesch-anforderung/src/lib/loesch-anforderung-zuruecknehmen-button-container/loesch-anforderung-zuruecknehmen-button/loesch-anforderung-zuruecknehmen-button.component.spec.ts

@@ -24,9 +24,9 @@
 import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonWithSpinnerComponent } from '@ods/component';
-import { UndoRequestVorgangDeletionIconComponent } from '@ods/system';
+import { TooltipDirective, UndoRequestVorgangDeletionIconComponent } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { LoeschAnforderungZuruecknehmenButtonComponent } from './loesch-anforderung-zuruecknehmen-button.component';
 
 describe('LoeschAnforderungZuruecknehmenButtonComponent', () => {
@@ -42,6 +42,7 @@ describe('LoeschAnforderungZuruecknehmenButtonComponent', () => {
         LoeschAnforderungZuruecknehmenButtonComponent,
         MockComponent(ButtonWithSpinnerComponent),
         MockComponent(UndoRequestVorgangDeletionIconComponent),
+        MockDirective(TooltipDirective),
       ],
     }).compileComponents();
 

alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.html

@@ -27,7 +27,8 @@
   <ods-button-with-spinner
     [stateResource]="loeschenAnfordernCommand"
     data-test-id="loeschen-anfordern-icon-button"
-    tooltip="Löschen anfordern"
+    [tooltip]="'Löschen anfordern'"
+    tooltipAriaType="aria-labelledby"
     variant="ghost"
     size="fit"
     (clickEmitter)="loeschenAnfordern.emit()"

alfa-client/libs/loesch-anforderung/src/lib/loeschen-anfordern-button-container/loeschen-anfordern-button/loeschen-anfordern-button.component.spec.ts

@@ -24,9 +24,9 @@
 import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonWithSpinnerComponent } from '@ods/component';
-import { RequestVorgangDeletionIconComponent } from '@ods/system';
+import { RequestVorgangDeletionIconComponent, TooltipDirective } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { LoeschenAnfordernButtonComponent } from './loeschen-anfordern-button.component';
 
 describe('LoeschenAnfordernButtonComponent', () => {
@@ -42,6 +42,7 @@ describe('LoeschenAnfordernButtonComponent', () => {
         LoeschenAnfordernButtonComponent,
         MockComponent(ButtonWithSpinnerComponent),
         MockComponent(RequestVorgangDeletionIconComponent),
+        MockDirective(TooltipDirective),
       ],
     }).compileComponents();
 

alfa-client/libs/postfach/src/lib/postfach-mail-button-container/postfach-mail-button/postfach-mail-button.component.html

@@ -29,7 +29,8 @@
     <ods-button
       dataTestId="send-mail-icon-button"
       [isLoading]="pendingSendPostfachMailCommand.resource | hasLink: commandLinkRel.UPDATE"
-      tooltip="Neue Nachricht erstellen"
+      [tooltip]="'Neue Nachricht erstellen'"
+      tooltipAriaType="aria-labelledby"
       variant="ghost"
       size="fit"
       (clickEmitter)="openPostfachNachrichtenDialog.emit()"

alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html

@@ -28,13 +28,10 @@
   <alfa-postfach-mail-pdf-button-container
     [postfachMailListResource]="postfachMailListStateResource.resource"
   ></alfa-postfach-mail-pdf-button-container>
-  <ng-container
-    *ngIf="
-      postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL
-    "
-  >
+  <ng-container *ngIf="postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL">
     <alfa-postfach-mail-button-container
-      toolTip="Neue Nachricht erstellen"
+      [toolTip]="'Neue Nachricht erstellen'"
+      tooltipAriaType="aria-labelledby"
       [vorgang]="vorgangStateResource.resource"
       data-test-id="postfach-mail-button-container-no-label"
     ></alfa-postfach-mail-button-container>
@@ -44,8 +41,7 @@
 <ozgcloud-spinner [stateResource]="postfachMailListStateResource">
   <alfa-postfach-mail
     *ngFor="
-      let postfachMail of postfachMailListStateResource.resource
-        | toEmbeddedResources: postfachMailListLinkRel.POSTFACH_MAIL_LIST
+      let postfachMail of postfachMailListStateResource.resource | toEmbeddedResources: postfachMailListLinkRel.POSTFACH_MAIL_LIST
     "
     class="postfach"
     [vorgangStateResource]="vorgangStateResource"
@@ -56,10 +52,7 @@
 </ozgcloud-spinner>
 
 <ng-container
-  *ngIf="
-    postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL;
-    else noPostfach
-  "
+  *ngIf="postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL; else noPostfach"
 >
   <alfa-postfach-mail-button-container
     text="Nachricht"
@@ -69,7 +62,5 @@
 </ng-container>
 
 <ng-template #noPostfach>
-  <span class="no-postfach-text" data-test-id="no-postfach-text"
-    >Dieser Vorgang ist nicht mit einem Postfach verknüpft.</span
-  >
+  <span class="no-postfach-text" data-test-id="no-postfach-text">Dieser Vorgang ist nicht mit einem Postfach verknüpft.</span>
 </ng-template>

alfa-client/libs/ui/src/lib/ui/back-button/back-button.component.html

@@ -23,8 +23,8 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<a [routerLink]="linkTo" data-test-id="back-button" [tooltip]="label" tooltipAriaType="aria-labelledby" tabindex="-1">
-  <ods-button variant="ghost" size="fit">
+<a [routerLink]="linkTo" data-test-id="back-button" tabindex="-1">
+  <ods-button variant="ghost" size="fit" [tooltip]="label" tooltipAriaType="aria-labelledby">
     <ods-arrow-back-icon icon class="fill-text" />
   </ods-button>
 </a>

alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.html

@@ -26,7 +26,8 @@
 @if (vorgang | hasLink: linkRel.ASSIGN) {
   <ods-button-with-spinner
     svgIcon="account_outline"
-    tooltip="Bearbeiter zuordnen"
+    [tooltip]="'Bearbeiter zuordnen'"
+    tooltipAriaType="aria-labelledby"
     data-test-id="assign-user-profile-icon-button"
     variant="ghost"
     size="fit"

alfa-client/libs/user-profile/src/lib/assign-user-profile-button-container/assign-user-profile-button-container.component.spec.ts

@@ -27,9 +27,9 @@ import { UserProfileService } from '@alfa-client/user-profile-shared';
 import { VorgangHeaderLinkRel } from '@alfa-client/vorgang-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonWithSpinnerComponent } from '@ods/component';
-import { AccountCircleIconComponent } from '@ods/system';
+import { AccountCircleIconComponent, TooltipDirective } from '@ods/system';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { AssignUserProfileButtonContainerComponent } from './assign-user-profile-button-container.component';
 
 describe('AssignUserProfileButtonContainerComponent', () => {
@@ -47,6 +47,7 @@ describe('AssignUserProfileButtonContainerComponent', () => {
         HasLinkPipe,
         MockComponent(ButtonWithSpinnerComponent),
         MockComponent(AccountCircleIconComponent),
+        MockDirective(TooltipDirective),
       ],
       providers: [
         {

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.html

@@ -30,7 +30,8 @@
       class="absolute -top-2"
       variant="ghost"
       size="fit"
-      tooltip="Aktenzeichen bearbeiten"
+      [tooltip]="'Aktenzeichen bearbeiten'"
+      tooltipAriaType="aria-labelledby"
       data-test-id="aktenzeichen-editieren"
       (clickEmitter)="onEdit()"
     >

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-editable/aktenzeichen-editable.component.spec.ts

@@ -27,10 +27,10 @@ import { DialogService } from '@alfa-client/ui';
 import { VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
 import { AktenzeichenComponent } from '@alfa-client/vorgang-shared-ui';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ButtonComponent, EditIconComponent } from '@ods/system';
+import { ButtonComponent, EditIconComponent, TooltipDirective } from '@ods/system';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { AktenzeichenEditDialogComponent } from '../aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
 import { AktenzeichenEditableComponent } from './aktenzeichen-editable.component';
 
@@ -50,6 +50,7 @@ describe('AktenzeichenComponent', () => {
         MockComponent(ButtonComponent),
         MockComponent(EditIconComponent),
         MockComponent(AktenzeichenComponent),
+        MockDirective(TooltipDirective),
       ],
       providers: [
         {

alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.html

@@ -29,7 +29,8 @@
     <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
       dataTestId="abschliessen-icon-button"
-      tooltip="Vorgang abschließen"
+      [tooltip]="'Vorgang abschließen'"
+      tooltipAriaType="aria-labelledby"
       variant="ghost"
       size="fit"
       (clickEmitter)="abschliessen()"

alfa-client/libs/vorgang-detail/src/lib/buttons/abschliessen-button/abschliessen-button.component.spec.ts

@@ -27,11 +27,11 @@ import { mock } from '@alfa-client/test-utils';
 import { VorgangCommandService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonWithSpinnerComponent } from '@ods/component';
-import { CheckIconComponent } from '@ods/system';
+import { CheckIconComponent, TooltipDirective } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdAttributeOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { Observable, of } from 'rxjs';
 import { AbschliessenButtonComponent } from './abschliessen-button.component';
 
@@ -53,6 +53,7 @@ describe('AbschliessenButtonComponent', () => {
         AbschliessenButtonComponent,
         MockComponent(ButtonWithSpinnerComponent),
         MockComponent(CheckIconComponent),
+        MockDirective(TooltipDirective),
         HasLinkPipe,
       ],
       providers: [

alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.html

@@ -28,7 +28,8 @@
     <ods-button-with-spinner
       [stateResource]="commandStateResource$ | async"
       (clickEmitter)="annehmen()"
-      tooltip="Vorgang annehmen"
+      [tooltip]="'Vorgang annehmen'"
+      tooltipAriaType="aria-labelledby"
       variant="ghost"
       size="fit"
       dataTestId="annehmen-icon-button"

alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.spec.ts

@@ -31,7 +31,7 @@ import { CheckCircleIconComponent, TooltipDirective } from '@ods/system';
 import { createCommandResource } from 'libs/command-shared/test/command';
 import { getDataTestIdAttributeOf } from 'libs/tech-shared/test/data-test';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
 import { AnnehmenButtonComponent } from './annehmen-button.component';
 
@@ -52,9 +52,9 @@ describe('AnnehmenButtonComponent', () => {
       declarations: [
         AnnehmenButtonComponent,
         HasLinkPipe,
-        TooltipDirective,
         MockComponent(ButtonWithSpinnerComponent),
         MockComponent(CheckCircleIconComponent),
+        MockDirective(TooltipDirective),
       ],
       providers: [
         {