ACS-8106: (a11y) Replace Material Tooltip with standard tooltip (#9894) (#9907)

Co-authored-by: Denys Vuika <denys.vuika@gmail.com>
2025-07-24 17:32:15 +00:00 · 2024-07-09 15:22:20 +02:00
parent 0d77ebb836
commit 41965a4561
96 changed files with 254 additions and 561 deletions
--- a/lib/process-services/src/lib/form/form.component.html
+++ b/lib/process-services/src/lib/form/form.component.html
@@ -20,7 +20,7 @@
                            <mat-icon>refresh</mat-icon>
                        </button>
                    </div>
-                    <span *ngIf="isTitleEnabled()" class="adf-form-title" [matTooltip]="form.taskName">
+                    <span *ngIf="isTitleEnabled()" class="adf-form-title" [title]="form.taskName">
                        {{form.taskName}}
                        <ng-container *ngIf="!form.taskName">
                            {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
--- a/lib/process-services/src/lib/form/form.component.ts
+++ b/lib/process-services/src/lib/form/form.component.ts
@@ -45,13 +45,12 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'adf-form',
    standalone: true,
-    imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
+    imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
    templateUrl: './form.component.html',
    encapsulation: ViewEncapsulation.None
 })
--- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html
+++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html
@@ -72,7 +72,7 @@
                matLine
                id="{{ 'file-' + file.id }}"
                (click)="onAttachFileClicked(file)"
-                [matTooltip]="file.name"
+                [title]="file.name"
                (keyup.enter)="onAttachFileClicked(file)"
                tabindex="0"
                role="button"
--- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts
+++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.ts
@@ -33,12 +33,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
-import { MatTooltipModule } from '@angular/material/tooltip';

@Component({
    selector: 'attach-widget',
    standalone: true,
-    imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatMenuModule, MatListModule, MatTooltipModule, ErrorWidgetComponent],
+    imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatMenuModule, MatListModule, ErrorWidgetComponent],
    templateUrl: './attach-file-widget.component.html',
    styleUrls: ['./attach-file-widget.component.scss'],
    host: {
--- a/lib/process-services/src/lib/form/widgets/people/people.widget.html
+++ b/lib/process-services/src/lib/form/widgets/people/people.widget.html
@@ -14,9 +14,7 @@
               [placeholder]="field.placeholder"
               [matAutocomplete]="auto"
               (blur)="markAsTouched()"
-               [matTooltip]="field.tooltip"
-               matTooltipPosition="above"
-               matTooltipShowDelay="1000">
+               [title]="field.tooltip">
        <mat-autocomplete class="adf-people-widget-list"
                          #auto="matAutocomplete"
                          (optionSelected)="onItemSelect($event.option.value)"
--- 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
@@ -293,7 +293,7 @@ describe('PeopleWidgetComponent', () => {
            await fixture.whenStable();

            const radioButtonsElement: any = element.querySelector('#people-id');
-            const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
+            const tooltip = radioButtonsElement.getAttribute('title');

            expect(tooltip).toEqual(widget.field.tooltip);
        });
--- a/lib/process-services/src/lib/form/widgets/people/people.widget.ts
+++ b/lib/process-services/src/lib/form/widgets/people/people.widget.ts
@@ -29,7 +29,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatTooltipModule } from '@angular/material/tooltip';

@Component({
    selector: 'people-widget',
@@ -41,7 +40,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
        MatInputModule,
        ReactiveFormsModule,
        MatAutocompleteModule,
-        MatTooltipModule,
        InitialUsernamePipe,
        ErrorWidgetComponent
    ],
--- a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html
+++ b/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html
@@ -4,9 +4,7 @@
        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
        <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
            <mat-radio-button
-                [matTooltip]="field.tooltip"
-                matTooltipPosition="above"
-                matTooltipShowDelay="1000"
+                [title]="field.tooltip"
                [id]="field.id + '-' + opt.id"
                [name]="field.id"
                [value]="opt.id"
--- a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.spec.ts
+++ b/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.spec.ts
@@ -27,7 +27,6 @@ import { ProcessDefinitionService } from '../../services/process-definition.serv
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatRadioButtonHarness, MatRadioGroupHarness } from '@angular/material/radio/testing';
-import { MatTooltipHarness } from '@angular/material/tooltip/testing';

 describe('RadioButtonsWidgetComponent', () => {
    let formService: FormService;
@@ -242,9 +241,9 @@ describe('RadioButtonsWidgetComponent', () => {

            fixture.detectChanges();

-            const tooltip = await loader.getHarness(MatTooltipHarness.with({ selector: '#radio-id-opt-1' }));
-            await tooltip.show();
-            expect(await tooltip.getTooltipText()).toEqual(radioButtonWidget.field.tooltip);
+            const option = await loader.getHarness(MatRadioButtonHarness.with({ selector: '#radio-id-opt-1' }));
+            const tooltip = await (await option.host()).getAttribute('title');
+            expect(tooltip).toEqual(radioButtonWidget.field.tooltip);
        });

        describe('and radioButton is populated via taskId', () => {
--- a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts
+++ b/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.ts
@@ -25,12 +25,11 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatRadioModule } from '@angular/material/radio';
 import { FormsModule } from '@angular/forms';
-import { MatTooltipModule } from '@angular/material/tooltip';

@Component({
    selector: 'radio-buttons-widget',
    standalone: true,
-    imports: [CommonModule, TranslateModule, MatRadioModule, FormsModule, MatTooltipModule, ErrorWidgetComponent],
+    imports: [CommonModule, TranslateModule, MatRadioModule, FormsModule, ErrorWidgetComponent],
    templateUrl: './radio-buttons.widget.html',
    styleUrls: ['./radio-buttons.widget.scss'],
    host: {
--- a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.html
+++ b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.html
@@ -5,7 +5,7 @@
    </mat-chip-list>


-    <button mat-icon-button *ngIf="!readOnly" matTooltip="Add a checklist" [matTooltipPosition]="'before'"
+    <button mat-icon-button *ngIf="!readOnly" title="Add a checklist"
            id="add-checklist" class="adf-add-to-checklist-button" (click)="showDialog()">
        <mat-icon>add</mat-icon>
    </button>
--- a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts
+++ b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.ts
@@ -23,7 +23,6 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -37,7 +36,6 @@ import { FormsModule } from '@angular/forms';
        TranslateModule,
        MatChipsModule,
        MatButtonModule,
-        MatTooltipModule,
        MatIconModule,
        MatDialogModule,
        MatFormFieldModule,