Merge pull request 'OZG-5789 Use material required props' (#626) from...

Merge pull request 'OZG-5789 Use material required props' (#626) from OZG-5789-fix-required into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/626


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts

@@ -28,10 +28,7 @@ type TextInputVariants = VariantProps<typeof textInputVariants>;
   template: `
     <div>
       <label [for]="id" class="text-md mb-2 block font-medium text-text"
-        >{{ label
-        }}<ng-container *ngIf="required"
-          ><i aria-hidden="true">*</i><i class="sr-only">(erforderlich)</i></ng-container
-        ></label
+        >{{ label }}<ng-container *ngIf="required"><i aria-hidden="true">*</i></ng-container></label
       >
       <div class="mt-2">
         <input
@@ -41,6 +38,7 @@ type TextInputVariants = VariantProps<typeof textInputVariants>;
           [ngClass]="textInputVariants({ variant })"
           [placeholder]="placeholder"
           [autocomplete]="autocomplete"
+          [required]="required"
         />
       </div>
       <ng-content select="[error]"></ng-content>

alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts

@@ -27,10 +27,7 @@ type TextareaVariants = VariantProps<typeof textareaVariants>;
   template: `
     <div class="mt-2">
       <label [for]="id" class="text-md mb-2 block font-medium text-text"
-        >{{ label
-        }}<ng-container *ngIf="required"
-          ><i aria-hidden="true">*</i><i class="sr-only">(erforderlich)</i></ng-container
-        ></label
+        >{{ label }}<ng-container *ngIf="required"><i aria-hidden="true">*</i></ng-container></label
       >
       <textarea
         [id]="id"
@@ -39,6 +36,7 @@ type TextareaVariants = VariantProps<typeof textareaVariants>;
         [ngClass]="textareaVariants({ variant })"
         [placeholder]="placeholder"
         [autocomplete]="autocomplete"
+        [required]="required"
       ></textarea>
       <ng-content select="[error]"></ng-content>
     </div>

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

@@ -29,6 +29,7 @@
     [formControlName]="formServiceClass.FIELD_EMAIL"
     autocomplete="email"
     placeholder="E-Mail Adresse"
+    [required]="true"
   >
   </ozgcloud-text-editor>
 
@@ -36,6 +37,7 @@
     label="Passwort"
     [formControlName]="formServiceClass.FIELD_PASSWORD"
     placeholder="Passwort für die Verschlüsselung"
+    [required]="true"
   >
   </ozgcloud-text-editor>
 

alfa-client/libs/ui/src/lib/ui/editor/autocomplete-editor/autocomplete-editor.component.html

@@ -29,6 +29,7 @@
   <input
     #autocompleteInput
     [attr.data-test-id]="(label | convertForDataTest) + '-autocomplete-input'"
+    [required]="required"
     type="text"
     matInput
     [matAutocomplete]="auto"

alfa-client/libs/ui/src/lib/ui/editor/autocomplete-editor/autocomplete-editor.component.ts

@@ -45,6 +45,7 @@ export class AutocompleteEditorComponent
 {
   @Input() label: string;
   @Input() values: Selectable[] = [];
+  @Input() required: boolean = false;
 
   @Output() onKeyUp: EventEmitter<void> = new EventEmitter();
   @Output() onOptionSelected: EventEmitter<Selectable> = new EventEmitter();

alfa-client/libs/ui/src/lib/ui/editor/date-editor/date-editor.component.html

@@ -24,19 +24,13 @@
 
 -->
 <mat-form-field>
-  <mat-label
-    >{{ label
-    }}<ng-container *ngIf="required">
-      <i aria-hidden="true">*</i>
-      <i class="sr-only">(erforderlich)</i>
-    </ng-container>
-  </mat-label>
+  <mat-label>{{ label }}</mat-label>
   <input
     matInput
     [matDatepicker]="picker"
     [formControl]="fieldControl"
     (blur)="touch()"
-    [attr.aria-required]="required"
+    [required]="required"
     [attr.data-test-id]="(label | convertForDataTest) + '-date-input'"
     (dateInput)="inputEvent($event)"
     (blur)="onBlur()"

alfa-client/libs/ui/src/lib/ui/editor/text-editor/text-editor.component.html

@@ -29,13 +29,7 @@
   appearance="{{ appearance }}"
   [floatLabel]="readOnly || autoFocus ? 'always' : 'auto'"
 >
-  <mat-label
-    >{{ label
-    }}<ng-container *ngIf="required">
-      <i aria-hidden="true">*</i>
-      <i class="sr-only">(erforderlich)</i>
-    </ng-container>
-  </mat-label>
+  <mat-label>{{ label }}</mat-label>
   <div class="wrapper">
     <input
       #inputElement
@@ -45,7 +39,7 @@
       [autocomplete]="autocomplete"
       [readonly]="readOnly"
       (blur)="touch()"
-      [attr.aria-required]="required"
+      [required]="required"
       [attr.data-test-id]="(label | convertForDataTest) + '-text-input'"
       [class.with-clear-button]="showClearButton$ | async"
     />

alfa-client/libs/ui/src/lib/ui/editor/textarea-editor/textarea-editor.component.html

@@ -24,13 +24,7 @@
 
 -->
 <mat-form-field [appearance]="appearance" [floatLabel]="autoFocus ? 'always' : 'auto'">
-  <mat-label
-    >{{ label
-    }}<ng-container *ngIf="required">
-      <i aria-hidden="true">*</i>
-      <i class="sr-only">(erforderlich)</i>
-    </ng-container>
-  </mat-label>
+  <mat-label>{{ label }}</mat-label>
 
   <textarea
     #autosize="cdkTextareaAutosize"
@@ -38,7 +32,7 @@
     matInput
     cdkTextareaAutosize
     [formControl]="fieldControl"
-    [attr.aria-required]="required"
+    [required]="required"
     [attr.data-test-id]="(label | convertForDataTest) + '-textarea-input'"
     (blur)="touch()"
   ></textarea>

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

@@ -27,6 +27,7 @@
   <ozgcloud-autocomplete-editor
     data-test-id="user-search"
     label="Bearbeiter"
+    [required]="true"
     [formControlName]="formServiceClass.SEARCH_FIELD"
     [values]="searchedUserProfiles.resource"
     (onKeyUp)="onKeyUp()"