AAE-48227 replacing custom labels with mat-labels

lib/core/src/lib/form/components/form-renderer.component.html

@@ -1,4 +1,4 @@
-<div id="adf-form-renderer" class="{{ formDefinition.className }} adf-form-renderer"
+<div id="adf-form-renderer" data-automation-id="adf-form-renderer" class="{{ formDefinition.className }} adf-form-renderer"
      [ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
     @if (formDefinition.hasTabs()) {
         @if (hasTabs()) {

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -11,9 +11,10 @@
     </div>
     <div class="adf-amount-widget-container">
         <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
-            @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
-            @if(!enableDisplayBasedOnLocale) {
-                <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
+            @if ( (field.name || field?.required) && !field.leftLabels) {
+            <mat-label data-automation-id="adf-amount-widget-label">{{field.name | translate }}</mat-label>
+            } @if(!enableDisplayBasedOnLocale) {
+            <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
             }
             <input
                 matInput
@@ -30,13 +31,15 @@
                 [errorStateMatcher]="errorStateMatcher"
                 (focus)="amountWidgetOnFocus()"
                 (blur)="amountWidgetOnBlur()"
-                />
+            />
             @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
-                <mat-error>
-                    <mat-icon class="adf-error-icon">error_outline</mat-icon>
-                    <span class="adf-error-text"
-                        >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
-                </mat-error>
+            <mat-error>
+                <mat-icon class="adf-error-icon">error_outline</mat-icon>
+                <span class="adf-error-text"
+                    >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{
+                    'FORM.FIELD.REQUIRED' | translate }}}</span
+                >
+            </mat-error>
             }
         </mat-form-field>
     </div>

lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts

@@ -325,7 +325,7 @@ describe('AmountWidgetComponent - rendering', () => {
         expect(inputField).toBeTruthy();
         expect(await field.getPrefixText()).toBe('$');
 
-        const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
+        const widgetLabel = testingUtils.getByDataAutomationId('adf-amount-widget-label').nativeElement;
         expect(widgetLabel.textContent.trim()).toBe('Test Amount');
         expect(widget.field.isValid).toBe(false);
 
@@ -362,7 +362,7 @@ describe('AmountWidgetComponent - rendering', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
+        const widgetLabel = testingUtils.getByDataAutomationId('adf-amount-widget-label').nativeElement;
         expect(widgetLabel.textContent.trim()).toBe('Test Amount');
 
         const field = await testingUtils.formField.get();

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -13,7 +13,7 @@
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
                         [floatLabel]="field.placeholder ? 'always' : null">
             @if( (field.name || field?.required) && !field.leftLabels) {
-            <mat-label class="adf-label" [attr.for]="field.id">
+            <mat-label class="adf-label">
                 {{ field.name | translate }} ({{ field.dateDisplayFormat }})
             </mat-label>
             }

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -1,32 +1,36 @@
-<div class="{{ field.className }} date-widget-container" id="data-widget"
-     [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
-     [class.adf-readonly]="field.readOnly">
+<div
+    class="{{ field.className }} date-widget-container"
+    id="data-widget"
+    [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
+    [class.adf-readonly]="field.readOnly"
+>
     <mat-form-field class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
-        <mat-label class="adf-label"
-                   [id]="field.id + '-label'"
-                   [attr.for]="field.id">
-            {{ field.name | translate }} ({{ field.dateDisplayFormat }})
-        </mat-label>
-        <input matInput
-               [matDatepicker]="datePicker"
-               [id]="field.id"
-               [formControl]="dateInputControl"
-               [placeholder]="field.placeholder"
-               [min]="minDate"
-               [max]="maxDate"
-               [required]="field.required && field.isVisible"
-               [readonly]="field.readOnly"
+        <mat-label data-automation-id="adf-date-widget-label"> {{ field.name | translate }} ({{ field.dateDisplayFormat }}) </mat-label>
+        <input
+            matInput
+            [matDatepicker]="datePicker"
+            [id]="field.id"
+            [formControl]="dateInputControl"
+            [placeholder]="field.placeholder"
+            [min]="minDate"
+            [max]="maxDate"
+            [required]="field.required && field.isVisible"
+            [readonly]="field.readOnly"
         />
         <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
-        <mat-datepicker #datePicker
-                        [startAt]="startAt"
-                        [disabled]="field.readOnly" />
+        <mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
         @if (dateInputControl.invalid && dateInputControl.touched) {
-            <mat-error>
-                <mat-icon class="adf-error-icon">error_outline</mat-icon>
-                <span class="adf-error-text"
-                    >@if (dateInputControl.hasError('required')) {{{ 'FORM.FIELD.REQUIRED' | translate }}} @else if (dateInputControl.hasError('matDatepickerParse')) {{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate: { format: field.dateDisplayFormat || field.defaultDateTimeFormat } }}} @else if (dateInputControl.hasError('matDatepickerMin')) {{{ 'FORM.FIELD.VALIDATOR.NOT_LESS_THAN' | translate: { minValue: formattedMinDate } }}} @else if (dateInputControl.hasError('matDatepickerMax')) {{{ 'FORM.FIELD.VALIDATOR.NOT_GREATER_THAN' | translate: { maxValue: formattedMaxDate } }}}</span>
-            </mat-error>
+        <mat-error>
+            <mat-icon class="adf-error-icon">error_outline</mat-icon>
+            <span class="adf-error-text"
+                >@if (dateInputControl.hasError('required')) {{{ 'FORM.FIELD.REQUIRED' | translate }}} @else if
+                (dateInputControl.hasError('matDatepickerParse')) {{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate: { format:
+                field.dateDisplayFormat || field.defaultDateTimeFormat } }}} @else if (dateInputControl.hasError('matDatepickerMin')) {{{
+                'FORM.FIELD.VALIDATOR.NOT_LESS_THAN' | translate: { minValue: formattedMinDate } }}} @else if
+                (dateInputControl.hasError('matDatepickerMax')) {{{ 'FORM.FIELD.VALIDATOR.NOT_GREATER_THAN' | translate: { maxValue: formattedMaxDate
+                } }}}</span
+            >
+        </mat-error>
         }
     </mat-form-field>
 </div>

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -10,7 +10,7 @@
 
     <div class="adf-decimal-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
-           @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
+           @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label">{{ field.name | translate }}</mat-label> }
             <input matInput
                    class="adf-input"
                    type="text"

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -11,7 +11,7 @@
         [floatLabel]="field.placeholder ? 'always' : null"
     >
         @if(field.name || field.required) {
-        <mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
+        <mat-label class="adf-multiline-text-widget-label" data-automation-id="adf-multiline-text-widget-label"> {{ field.name | translate }} </mat-label>
         }
         <textarea
             matInput
@@ -31,14 +31,16 @@
         >
         </textarea>
         @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
-            <mat-error>
-                @if (field.maxLength > 0) {<span class="adf-multiline-counter-block">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</span>}
-                <mat-icon class="adf-error-icon">error_outline</mat-icon>
-                <span class="adf-error-text"
-                    >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
-            </mat-error>
+        <mat-error>
+            @if (field.maxLength > 0) {<span class="adf-multiline-counter-block">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</span>}
+            <mat-icon class="adf-error-icon">error_outline</mat-icon>
+            <span class="adf-error-text"
+                >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{
+                'FORM.FIELD.REQUIRED' | translate }}}</span
+            >
+        </mat-error>
         } @else if (field.maxLength > 0) {
-            <mat-hint class="adf-multiline-hint">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</mat-hint>
+        <mat-hint class="adf-multiline-hint">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</mat-hint>
         }
     </mat-form-field>
 </div>

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss

@@ -8,7 +8,7 @@
         flex-direction: column;
         position: relative;
 
-        .adf-label {
+        .adf-multiline-text-widget-label {
             top: 20px;
         }
 

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -11,7 +11,7 @@
     <div class="adf-number-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
             @if( (field.name || this.field?.required) && !field.leftLabels) {
-            <mat-label class="adf-label" [attr.for]="field.id">
+            <mat-label class="adf-label">
                 {{ field.name | translate }}
             </mat-label>
             }

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -9,7 +9,7 @@
     </div>
     <div class="adf-text-widget-container">
         <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
-            @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
+            @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label data-automation-id="adf-text-widget-label">
                 {{ field.name | translate }}
             </mat-label>
         }

lib/process-services-cloud/src/lib/form/components/form-cloud.component.html

@@ -5,6 +5,7 @@
 } @else {
     <div
         class="adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container"
+        data-automation-id="adf-cloud-form-container"
         [style]="formStyle"
     >
         <div

lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss

@@ -135,7 +135,8 @@
         }
     }
 
-    .adf-label {
+    .adf-label,
+    .adf-display-external-property-widget-label {
         white-space: normal;
     }
 }

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

@@ -17,7 +17,7 @@
     <div class="adf-date-widget-container">
         <mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
             @if ( (field.name || field?.required) && !field.leftLabels) {
-                <mat-label class="adf-label" [attr.for]="field.id">
+                <mat-label class="adf-label">
                     {{field.name | translate }} ({{field.dateDisplayFormat}})
                 </mat-label>
             }

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html

@@ -13,7 +13,7 @@
     <div>
         <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
             @if( (field.name || field?.required) && !field.leftLabels) {
-            <mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
+            <mat-label class="adf-display-external-property-widget-label" data-automation-id="adf-display-external-property-widget-label"> {{ field.name | translate }} </mat-label>
             }
             <input
                 matInput
@@ -32,7 +32,10 @@
                 </span>
             </ng-container>
             @if (propertyLoadFailed && !previewState) {
-                <mat-error><mat-icon class="adf-error-icon">error_outline</mat-icon><span class="adf-error-text">{{ 'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate }}</span></mat-error>
+            <mat-error
+                ><mat-icon class="adf-error-icon">error_outline</mat-icon
+                ><span class="adf-error-text">{{ 'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate }}</span></mat-error
+            >
             }
         </mat-form-field>
     </div>

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss

@@ -4,7 +4,7 @@
     &-display-external-property-widget {
         width: 100%;
 
-        .adf-label {
+        .adf-display-external-property-widget-label {
             top: 20px;
         }
 

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -14,7 +14,7 @@
     <div class="adf-dropdown-widget-container">
         <mat-form-field class="adf-form-field-input">
             @if ( (field.name || this.field?.required) && !field.leftLabels) {
-                <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label>
+                <mat-label class="adf-label">{{ field.name | translate }}</mat-label>
             }
             <mat-select
                 class="adf-select"

lib/process-services/src/lib/form/start-form/start-form.component.spec.ts

@@ -191,7 +191,7 @@ describe('StartFormComponent', () => {
             const formFields = component.form.getFormFields();
             const labelField = formFields.find((field) => field.id === 'mocktext');
             const textWidget = fixture.debugElement.nativeElement.querySelector('text-widget');
-            const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-label');
+            const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-text-widget-label"]');
 
             expect(labelField.type).toBe('text');
             expect(textWidget).toBeTruthy();
@@ -262,7 +262,7 @@ describe('StartFormComponent', () => {
             const formFields = component.form.getFormFields();
             const dropdownField = formFields.find((field) => field.id === 'mockTypeDropDown');
             const dropdownWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
-            const dropdownLabel = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget .adf-label');
+            const dropdownLabel = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]');
             const selectElement = await loader.getHarness(MatSelectHarness);
             await selectElement.open();
 
@@ -287,7 +287,7 @@ describe('StartFormComponent', () => {
             const formFields = component.form.getFormFields();
             const labelField = formFields.find((field) => field.id === 'date');
             const dateWidget = fixture.debugElement.nativeElement.querySelector('date-widget');
-            const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .adf-label');
+            const dateLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-date-widget-label"]');
 
             expect(dateWidget).toBeTruthy();
             expect(labelField.type).toBe('date');
@@ -320,11 +320,11 @@ describe('StartFormComponent', () => {
 
             const formFieldsWidget = fixture.debugElement.nativeElement.querySelector('form-field');
             const inputElement = fixture.debugElement.nativeElement.querySelector('.adf-input');
-            const inputLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-label');
+            const inputLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-text-widget-label"]');
             const dateElement = fixture.debugElement.nativeElement.querySelector('#billdate');
-            const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .adf-label');
+            const dateLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-date-widget-label"]');
             const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
-            const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
+            const selectLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]');
 
             expect(formFieldsWidget).toBeDefined();
             expect(inputElement).toBeDefined();
@@ -348,7 +348,7 @@ describe('StartFormComponent', () => {
 
             /* cspell:disable-next-line */
             const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
-            const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
+            const selectLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]');
             expect(refreshElement).toBeDefined();
             expect(selectElement).toBeDefined();
             expect(translate.instant(selectLabelElement.innerText)).toBe('ClaimType');

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html

@@ -3,20 +3,26 @@
     [class.adf-invalid]="dropdownControl.invalid && dropdownControl.touched"
     [class.adf-readonly]="field.readOnly"
 >
-    <label class="adf-label" [attr.for]="field.id"
-        >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-    >
     <mat-form-field class="adf-form-field-input">
-        <mat-select class="adf-select" [id]="field.id" [formControl]="dropdownControl">
+        <mat-label data-automation-id="adf-dropdown-widget-label">{{ field.name | translate }}</mat-label>
+        <mat-select
+            class="adf-select"
+            data-automation-id="adf-dropdown-widget-select"
+            [id]="field.id"
+            [formControl]="dropdownControl"
+            [required]="isRequired() && field.isVisible"
+        >
             <mat-option *ngFor="let opt of field.options" [value]="opt" [id]="opt.id">{{opt.name}}</mat-option>
             <mat-option id="readonlyOption" *ngIf="dropdownControl.disabled" [value]="field.value">{{field.value}}</mat-option>
         </mat-select>
         @if (!isReadOnlyField && dropdownControl.touched && (field.validationSummary?.message || dropdownControl.hasError('required'))) {
-            <mat-error data-automation-id="adf-dropdown-error">
-                <mat-icon class="adf-error-icon">error_outline</mat-icon>
-                <span class="adf-error-text"
-                    >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
-            </mat-error>
+        <mat-error data-automation-id="adf-dropdown-error">
+            <mat-icon class="adf-error-icon">error_outline</mat-icon>
+            <span class="adf-error-text"
+                >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' |
+                translate }}}</span
+            >
+        </mat-error>
         }
     </mat-form-field>
 </div>

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts

@@ -161,10 +161,9 @@ describe('DropdownWidgetComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
+            const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-dropdown-widget-select"]' }));
 
-            expect(asterisk).toBeTruthy();
-            expect(asterisk.textContent).toEqual('*');
+            expect(await dropdown.isRequired()).toBeTrue();
         });
 
         it('should be invalid if no default option after interaction', async () => {

lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html

@@ -1,6 +1,6 @@
 <div class="adf-amount-editor">
     <mat-form-field>
-    <label [attr.for]="column.id">{{displayName}}</label>
+    <mat-label>{{ displayName }}</mat-label>
     <input matInput
         type="number"
         [value]="table.getCellValue(row, column)"

lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.html

@@ -1,6 +1,6 @@
 <div>
     <mat-form-field class="adf-date-editor">
-        <label [attr.for]="column.id">{{column.name}} ({{DATE_FORMAT}})</label>
+        <mat-label>{{ column.name }} ({{ DATE_FORMAT }})</mat-label>
         <input matInput
             id="dateInput"
             type="text"

lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.html

@@ -1,6 +1,6 @@
 <div>
     <mat-form-field class="adf-date-editor">
-        <label [attr.for]="column.id">{{column.name}} {{DATE_TIME_FORMAT}}</label>
+        <mat-label>{{ column.name }} {{ DATE_TIME_FORMAT }}</mat-label>
         <input matInput
             [matDatetimepicker]="datetimePicker"
             [(ngModel)]="value"

lib/process-services/src/lib/form/widgets/dynamic-table/editors/dropdown/dropdown.editor.html

@@ -1,6 +1,6 @@
 <div class="dropdown-editor">
-    <label [attr.for]="column.id">{{column.name}}</label>
     <mat-form-field>
+        <mat-label>{{column.name}}</mat-label>
         <mat-select
             floatPlaceholder="never"
             class="adf-dropdown-editor-select"
@@ -8,7 +8,8 @@
             [(ngModel)]="value"
             [required]="column.required"
             [disabled]="!column.editable"
-            (selectionChange)="onValueChanged(row, column, $event)">
+            (selectionChange)="onValueChanged(row, column, $event)"
+        >
             <mat-option />
             <mat-option *ngFor="let opt of options" [value]="opt.name" [id]="opt.id">{{opt.name}}</mat-option>
         </mat-select>

lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html

@@ -1,6 +1,6 @@
 <div class="adf-text-editor">
     <mat-form-field>
-    <label [attr.for]="column.id">{{displayName}}</label>
+    <mat-label>{{ displayName }}</mat-label>
     <input matInput
         type="text"
         [value]="table.getCellValue(row, column)"

lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html

@@ -5,11 +5,9 @@
     [class.adf-readonly]="field.readOnly"
     id="functional-group-div"
 >
-    <label class="adf-label" [attr.for]="field.id"
-        >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-    >
     <mat-form-field class="adf-group-widget-field">
-        <mat-chip-grid #chipGrid>
+        <mat-label data-automation-id="adf-group-widget-label">{{ field.name | translate }}</mat-label>
+        <mat-chip-grid #chipGrid [required]="isRequired()">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
                 (removed)="onRemove(group)"
@@ -49,11 +47,13 @@
             </mat-option>
         </mat-autocomplete>
         @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
-            <mat-error>
-                <mat-icon class="adf-error-icon">error_outline</mat-icon>
-                <span class="adf-error-text"
-                    >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
-            </mat-error>
+        <mat-error>
+            <mat-icon class="adf-error-icon">error_outline</mat-icon>
+            <span class="adf-error-text"
+                >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' |
+                translate }}}</span
+            >
+        </mat-error>
         }
     </mat-form-field>
 </div>

lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts

@@ -22,7 +22,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PeopleProcessService } from '../../../services/people-process.service';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { HarnessLoader } from '@angular/cdk/testing';
-import { MatChipRowHarness } from '@angular/material/chips/testing';
+import { MatChipGridHarness, MatChipRowHarness } from '@angular/material/chips/testing';
 import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
 
 describe('FunctionalGroupWidgetComponent', () => {
@@ -30,7 +30,6 @@ describe('FunctionalGroupWidgetComponent', () => {
     let component: FunctionalGroupWidgetComponent;
     let peopleProcessService: PeopleProcessService;
     let getWorkflowGroupsSpy: jasmine.Spy;
-    let element: HTMLElement;
     let loader: HarnessLoader;
     let unitTestingUtils: UnitTestingUtils;
 
@@ -51,7 +50,6 @@ describe('FunctionalGroupWidgetComponent', () => {
         unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
         loader = TestbedHarnessEnvironment.loader(fixture);
         component.field = new FormFieldModel(new FormModel());
-        element = fixture.nativeElement;
         fixture.detectChanges();
     });
 
@@ -176,10 +174,9 @@ describe('FunctionalGroupWidgetComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
+            const chipGrid = await loader.getHarness(MatChipGridHarness);
 
-            expect(asterisk).toBeTruthy();
-            expect(asterisk.textContent).toEqual('*');
+            expect(await chipGrid.isRequired()).toBeTrue();
         });
     });
 

lib/process-services/src/lib/form/widgets/people/people.widget.html

@@ -2,11 +2,11 @@
      [class.adf-invalid]="!field.isValid && isTouched()"
      [class.adf-readonly]="field.readOnly"
      id="people-widget-content">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
     <mat-form-field
         class="adf-people-widget-field">
+        <mat-label class="adf-people-widget-label" data-automation-id="adf-people-widget-label">{{ field.name | translate }}</mat-label>
         <mat-chip-grid #chipGrid [attr.aria-label]="'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECTED_PEOPLE' | translate"
-            [ngModel]="selectedUsers" [errorStateMatcher]="errorStateMatcher">
+            [required]="isRequired()" [ngModel]="selectedUsers" [errorStateMatcher]="errorStateMatcher">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
                 (removed)="onRemove(user)"

lib/process-services/src/lib/form/widgets/people/people.widget.spec.ts

@@ -23,7 +23,7 @@ import { PeopleWidgetComponent } from './people.widget';
 import { TranslateService } from '@ngx-translate/core';
 import { PeopleProcessService } from '../../../services/people-process.service';
 import { LightUserRepresentation } from '@alfresco/js-api';
-import { MatChipHarness } from '@angular/material/chips/testing';
+import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { HarnessLoader } from '@angular/cdk/testing';
 
@@ -325,10 +325,9 @@ describe('PeopleWidgetComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
+            const chipGrid = await loader.getHarness(MatChipGridHarness);
 
-            expect(asterisk).toBeTruthy();
-            expect(asterisk.textContent).toEqual('*');
+            expect(await chipGrid.isRequired()).toBeTrue();
         });
     });
 

lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html

@@ -5,7 +5,7 @@
         [class.adf-readonly]="field.readOnly"
         id="typehead-div">
         <mat-form-field class="adf-form-field-input">
-            <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</label>
+            <mat-label>{{ field.name | translate }}</mat-label>
             <input matInput class="adf-input"
                    type="text"
                    [id]="field.id"

lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss

@@ -77,7 +77,7 @@ adf-start-task {
             width: 100%;
         }
 
-        .adf-label {
+        .adf-people-widget-label {
             line-height: 0;
         }
 
@@ -126,7 +126,7 @@ adf-start-task {
                 border-color: var(--mat-sys-error);
             }
 
-            .adf-label {
+            .adf-people-widget-label {
                 color: var(--mat-sys-error);
 
                 &::after {