diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-organisations-einheit-list/user-form-organisations-einheit-list.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form-organisations-einheit-list/user-form-organisations-einheit-list.component.html index 5d3fea2f35377a4c9a2a62d99d356fe38bbbf7d7..2c1d3520d18708d5b7861627130f35cec586c927 100644 --- a/alfa-client/libs/admin/user/src/lib/user-form/user-form-organisations-einheit-list/user-form-organisations-einheit-list.component.html +++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-organisations-einheit-list/user-form-organisations-einheit-list.component.html @@ -1,11 +1,14 @@ -<div class="mb-12 block"> - <h2 class="heading-2 mt-4">Organisationseinheiten</h2> - <div [formGroup]="formGroupParent"> - <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 + [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"> + @for (controlName of formGroupOrganisationsEinheiten.controls | keyvalue; track controlName.key) { + <ods-checkbox-editor [formControlName]="controlName.key" [label]="controlName.key" [inputId]="controlName.key" /> + } </div> </div> diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.html index f410d028556ac30087622f7a09660cdad8e6dadb..d3d39a71ceb69e639c38e1ac0219f27eb1c5e6f5 100644 --- a/alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.html +++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.html @@ -1,12 +1,12 @@ -<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> diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.ts b/alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.ts index 37336816f4fcff3a8d95ffcfe977c541794a75a8..7a8c901dab035b8a8364b9ce60c1453a7374711c 100644 --- a/alfa-client/libs/admin/user/src/lib/user-form/user-form-roles/user-form-roles.component.ts +++ b/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))), ); } }