Merge branch 'OZG-7619-fix-tooltip-a11y' into 'main'

OZG-7619 Use buttons for tooltips

See merge request !80

alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.html

@@ -5,46 +5,38 @@
       <h3 class="text-md block font-medium text-text">Administration</h3>
       <div class="flex items-center gap-2">
         <ods-checkbox-editor [formControlName]="UserFormService.ADMIN" label="Admin" inputId="admin" />
-        <div
-          role="tooltip"
-          tabindex="0"
+        <button
           tooltip='Wird nur in Kombination mit "User" verwendet. Diese Rolle kann Funktionen in Keycloak und der Administration konfigurieren, z.B. Benutzer anlegen, Gruppen erstellen bzw. Organisationseinheiten hinzufügen und Rollen zuweisen.'
         >
           <ods-info-icon />
-        </div>
+        </button>
       </div>
     </div>
     <div [formGroupName]="UserFormService.ALFA_GROUP" class="flex flex-col gap-2">
       <h3 class="text-md block font-medium text-text">Alfa</h3>
       <div class="flex items-center gap-2">
         <ods-checkbox-editor [formControlName]="UserFormService.LOESCHEN" label="Löschen" inputId="delete" />
-        <div
-          role="tooltip"
-          tabindex="0"
+        <button
           tooltip='Diese Rolle hat dieselben Rechte wie die Rolle "User". Zusätzlich kann "Löschen" ausgewählte Vorgänge aus Alfa löschen. Diese Rolle sollten zwei Benutzer haben, da das Löschen einem Vieraugen-Prinzip folgt.'
         >
           <ods-info-icon />
-        </div>
+        </button>
       </div>
       <div class="flex items-center gap-2">
         <ods-checkbox-editor [formControlName]="UserFormService.USER" label="User" inputId="user" />
-        <div
-          role="tooltip"
-          tabindex="0"
+        <button
           tooltip='Diese Rolle kann alle Vorgänge sehen und bearbeiten, wenn diese seiner Organisationseinheit zugewiesen sind. Ist kompatibel mit "Löschen" und "Admin".'
         >
           <ods-info-icon />
-        </div>
+        </button>
       </div>
       <div class="flex items-center gap-2">
         <ods-checkbox-editor [formControlName]="UserFormService.POSTSTELLE" label="Poststelle" inputId="post_office" />
-        <div
-          role="tooltip"
-          tabindex="0"
+        <button
           tooltip='Diese Rolle kann ausschließlich alle neu eingegangenen Vorgänge sehen und anderen Benutzern zuweisen. Sie sollte nur einem Benutzer zugewiesen sein. Dieser sollte keine weiteren Rollen besitzen. (Sie ist aber kompatibel mit der "Admin")'
         >
           <ods-info-icon />
-        </div>
+        </button>
       </div>
     </div>
   </div>