From 008d8ab6e2b2c191c22d2428a17b1b0670acc39d Mon Sep 17 00:00:00 2001
From: Isoumyajit <soumyajit.chakraborty@hyland.com>
Date: Fri, 10 Jul 2026 21:19:57 +0530
Subject: [PATCH] AAE-48227 replacing custom labels with mat-labels

---
 .../components/form-renderer.component.html    |  2 +-
 .../widgets/amount/amount.widget.html          |  4 ++--
 .../widgets/amount/amount.widget.spec.ts       |  4 ++--
 .../widgets/date-time/date-time.widget.html    |  2 +-
 .../components/widgets/date/date.widget.html   |  8 ++------
 .../widgets/decimal/decimal.component.html     |  2 +-
 .../multiline-text/multiline-text.widget.html  |  2 +-
 .../multiline-text/multiline-text.widget.scss  |  2 +-
 .../widgets/number/number.widget.html          |  2 +-
 .../components/widgets/text/text.widget.html   |  2 +-
 .../form/components/form-cloud.component.html  |  1 +
 .../form/components/form-cloud.component.scss  |  3 ++-
 .../widgets/date/date-cloud.widget.html        |  2 +-
 .../display-external-property.widget.html      |  2 +-
 .../display-external-property.widget.scss      |  2 +-
 .../dropdown/dropdown-cloud.widget.html        |  2 +-
 .../start-form/start-form.component.spec.ts    | 14 +++++++-------
 .../form/widgets/dropdown/dropdown.widget.html | 12 ++++++++----
 .../widgets/dropdown/dropdown.widget.spec.ts   |  5 ++---
 .../editors/amount/amount.editor.html          |  2 +-
 .../editors/date/date.editor.html              |  2 +-
 .../editors/datetime/datetime.editor.html      |  2 +-
 .../editors/dropdown/dropdown.editor.html      |  5 +++--
 .../editors/text/text.editor.html              |  2 +-
 .../functional-group.widget.html               | 18 +++++++++---------
 .../functional-group.widget.spec.ts            |  9 +++------
 .../lib/form/widgets/people/people.widget.html |  4 ++--
 .../form/widgets/people/people.widget.spec.ts  |  7 +++----
 .../widgets/typeahead/typeahead.widget.html    |  2 +-
 .../start-task/start-task.component.scss       |  4 ++--
 30 files changed, 64 insertions(+), 66 deletions(-)

diff --git a/lib/core/src/lib/form/components/form-renderer.component.html b/lib/core/src/lib/form/components/form-renderer.component.html
index d025b0e7e1..cafbc41427 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.html
+++ b/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()) {
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
index 76104bba6d..8ff875f63d 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
@@ -15,7 +15,7 @@
             subscriptSizing="dynamic"
             [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 ( (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>
             }
@@ -34,7 +34,7 @@
                 [errorStateMatcher]="errorStateMatcher"
                 (focus)="amountWidgetOnFocus()"
                 (blur)="amountWidgetOnBlur()"
-                />
+            />
             @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
                 <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon">error_outline</mat-icon>
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts b/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
index ac4ab4a1d4..aa6ba3deab 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
+++ b/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();
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
index 1457221133..2639fdabd6 100644
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
@@ -14,7 +14,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>
             }
diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html
index 8633b8db24..02a0c8fe02 100644
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.html
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html
@@ -2,9 +2,7 @@
      [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
      [class.adf-readonly]="field.readOnly">
     <mat-form-field class="adf-date-widget adf-form-field-input" subscriptSizing="dynamic" [floatLabel]="field.placeholder ? 'always' : null">
-        <mat-label class="adf-label"
-                   [id]="field.id + '-label'"
-                   [attr.for]="field.id">
+        <mat-label data-automation-id="adf-date-widget-label">
             {{ field.name | translate }} ({{ field.dateDisplayFormat }})
         </mat-label>
         <input matInput
@@ -18,9 +16,7 @@
                [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 class="adf-form-field-status-slot">
                 <mat-icon class="adf-error-icon">error_outline</mat-icon>
diff --git a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
index c531e78288..3d5b17f7f2 100644
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+++ b/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" subscriptSizing="dynamic" [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"
diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
index 73d7d5036a..7e3477f1db 100644
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
@@ -12,7 +12,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
diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
index 242d172457..15ebec59e0 100644
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/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;
         }
 
diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.html b/lib/core/src/lib/form/components/widgets/number/number.widget.html
index 344d5c9abd..9007ad476c 100644
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.html
+++ b/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" subscriptSizing="dynamic" [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>
             }
diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.html b/lib/core/src/lib/form/components/widgets/text/text.widget.html
index e9dee6e3b9..2ef7e73f3a 100644
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.html
+++ b/lib/core/src/lib/form/components/widgets/text/text.widget.html
@@ -13,7 +13,7 @@
             subscriptSizing="dynamic"
             [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>
         }
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
index fe95e37114..e3015ab182 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+++ b/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
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
index f62635f0ea..46748f97ba 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
+++ b/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;
     }
 }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
index bde9f411f9..ad83dbd6eb 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
@@ -21,7 +21,7 @@
             [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>
             }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html
index 709d994c44..e674badf78 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html
+++ b/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" subscriptSizing="dynamic" [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
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss
index 9f6ffc3f39..fa4032fb06 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss
+++ b/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;
         }
 
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
index e994d83967..ecaab27fb6 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+++ b/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" subscriptSizing="dynamic">
             @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"
diff --git a/lib/process-services/src/lib/form/start-form/start-form.component.spec.ts b/lib/process-services/src/lib/form/start-form/start-form.component.spec.ts
index a6be5ba3ef..fe0c538506 100644
--- a/lib/process-services/src/lib/form/start-form/start-form.component.spec.ts
+++ b/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');
diff --git a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html
index 744843e374..2ab1ed91d9 100644
--- a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html
+++ b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html
@@ -3,11 +3,15 @@
     [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" subscriptSizing="dynamic">
-        <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>
diff --git a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts
index cf1394b84a..046e5aed6d 100644
--- a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts
+++ b/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 () => {
diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html
index 013bfabb22..d5f034f541 100644
--- a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html
+++ b/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)"
diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.html b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.html
index 5b3ee6d868..4360570398 100644
--- a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.html
+++ b/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"
diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.html b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.html
index 9f356ffda7..5d484d8022 100644
--- a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.html
+++ b/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"
diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/dropdown/dropdown.editor.html b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/dropdown/dropdown.editor.html
index d5f87caa79..8c7b669d77 100644
--- a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/dropdown/dropdown.editor.html
+++ b/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>
diff --git a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html b/lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html
index 4071c0bf09..d54914b18e 100644
--- a/lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html
+++ b/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)"
diff --git a/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html b/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html
index 0962a2aef8..44c9d243d9 100644
--- a/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html
+++ b/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>
diff --git a/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts b/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts
index 49cf00daef..3a7924ad04 100644
--- a/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts
+++ b/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();
         });
     });
 
diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.html b/lib/process-services/src/lib/form/widgets/people/people.widget.html
index 662abf7051..222399930d 100644
--- a/lib/process-services/src/lib/form/widgets/people/people.widget.html
+++ b/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)"
diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.spec.ts b/lib/process-services/src/lib/form/widgets/people/people.widget.spec.ts
index 0c52c8b356..6b65ffd15d 100644
--- a/lib/process-services/src/lib/form/widgets/people/people.widget.spec.ts
+++ b/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();
         });
     });
 
diff --git a/lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html b/lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html
index 8cea85eaa1..0e6f63bf2c 100644
--- a/lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html
+++ b/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" subscriptSizing="dynamic">
-            <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"
diff --git a/lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss b/lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss
index 6e9f7b8f54..76f6e79dff 100644
--- a/lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss
+++ b/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 {