OZG-7591-7932 opt form ui and a11y

alfa-client/libs/admin/user/src/lib/user-form/user-form-organisations-einheit-list/user-form-organisations-einheit-list.component.html

-<div class="mb-12 block">
-  <h2 class="heading-2 mt-4">Organisationseinheiten</h2>
-  <div [formGroup]="formGroupParent">
+<div
+  [formGroup]="formGroupParent"
+  role="group"
+  aria-labelledby="organisationseinheiten-heading organisationseinheiten-desc"
+  class="mb-12"
+>
+  <h2 id="organisationseinheiten-heading" class="heading-2 mt-4">Organisationseinheiten</h2>
+  <p id="organisationseinheiten-desc" class="mb-2 font-medium">Dem Benutzer sind folgende Organisationseinheiten zugewiesen</p>
   <div [formGroupName]="UserFormService.GROUPS" class="flex flex-col gap-2">
-      <p class="font-medium">Dem Benutzer sind folgende Organisationseinheiten zugewiesen</p>
     @for (controlName of formGroupOrganisationsEinheiten.controls | keyvalue; track controlName.key) {
       <ods-checkbox-editor [formControlName]="controlName.key" [label]="controlName.key" [inputId]="controlName.key" />
     }
   </div>
 </div>
-</div>

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

-<h2 class="heading-2 mt-4">Rollen für OZG-Cloud *</h2>
-<ods-validation-error
-  [id]="validationErrorId"
-  [invalidParams]="invalidParams$ | async"
-  label="Rollen"
-  data-test-id="rollen-error"
-></ods-validation-error>
-<div [formGroup]="formGroupParent">
-  <div [formGroupName]="UserFormService.CLIENT_ROLES" class="mb-8 flex flex-col gap-4 md:flex-row">
+<h2 class="heading-2 mt-4" id="rollen-ozg-heading">Rollen für OZG-Cloud<i aria-hidden="true">*</i></h2>
+<div
+  [formGroup]="formGroupParent"
+  role="group"
+  aria-required="true"
+  aria-labelledby="rollen-ozg-heading"
+  [attr.aria-invalid]="!isValid"
+>
+  <div [formGroupName]="UserFormService.CLIENT_ROLES" class="flex flex-col gap-4 md:flex-row">
     <div [formGroupName]="UserFormService.ADMINISTRATION_GROUP" class="flex flex-1 flex-col gap-2">
       <h3 class="text-md block font-medium text-text">Administration</h3>
       <div class="flex items-center gap-2">
@@ -60,4 +60,10 @@
       </div>
     </div>
   </div>
+  <ods-validation-error
+    [id]="validationErrorId"
+    [invalidParams]="invalidParams$ | async"
+    label="Rollen"
+    data-test-id="rollen-error"
+  ></ods-validation-error>
 </div>

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

@@ -4,7 +4,8 @@ import { Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormControlStatus, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { CheckboxEditorComponent, ValidationErrorComponent } from '@ods/component';
 import { InfoIconComponent, TooltipDirective } from '@ods/system';
-import { map, Observable, of } from 'rxjs';
+import { isEmpty } from 'lodash-es';
+import { map, Observable, of, tap } from 'rxjs';
 import { UserFormService } from '../user.formservice';
 
 @Component({
@@ -27,11 +28,13 @@ export class UserFormRolesComponent implements OnInit {
 
   public readonly UserFormService = UserFormService;
   public readonly validationErrorId: string = generateValidationErrorId();
+  public isValid: boolean = true;
 
   ngOnInit(): void {
     const control: AbstractControl = this.formGroupParent.controls[UserFormService.CLIENT_ROLES];
     this.invalidParams$ = control.statusChanges.pipe(
       map((status: FormControlStatus) => (status === 'INVALID' ? Object.values(control.errors) : [])),
+      tap((invalidParams: InvalidParam[]) => (this.isValid = isEmpty(invalidParams))),
     );
   }
 }