inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Denys Vuika
2024-07-02 13:51:40 -04:00
committed by GitHub
parent 0c4259cddf
commit f3a94bdfa4
96 changed files with 254 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/content-services/src/lib/aspect-list/aspect-list.component.html
View File

@@ -16,7 +16,7 @@
<mat-panel-description
class="adf-accordion-aspect-list-expansion-panel-header-description"
[id]="'aspect-list-'+colIndex+'-title'"
[matTooltip]="getTitle(aspect)">
[title]="getTitle(aspect)">
{{getTitle(aspect)}}
</mat-panel-description>
</mat-expansion-panel-header>

14
lib/content-services/src/lib/aspect-list/aspect-list.module.ts
View File

@@ -26,7 +26,6 @@ import { TranslateModule } from '@ngx-translate/core';
import { MatDialogModule } from '@angular/material/dialog';
import { AspectListDialogComponent } from './aspect-list-dialog.component';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { ContentDirectiveModule } from '../directives/content-directive.module';
@@ -40,17 +39,10 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
TranslateModule,
MatDialogModule,
MatButtonModule,
MatTooltipModule,
MatProgressSpinnerModule,
ContentDirectiveModule
],
exports: [
AspectListComponent,
AspectListDialogComponent
],
declarations: [
AspectListComponent,
AspectListDialogComponent
]
exports: [AspectListComponent, AspectListDialogComponent],
declarations: [AspectListComponent, AspectListDialogComponent]
})
export class AspectListModule { }
export class AspectListModule {}

2
lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
View File

@@ -25,7 +25,7 @@
{{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
<mat-icon *ngIf="hasUploadError()"
data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
matTooltip="{{ getWarningMessage() | translate }}">info
title="{{ getWarningMessage() | translate }}">info
</mat-icon>
</ng-template>
</div>

8
lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
View File

@@ -334,12 +334,12 @@ describe('ContentNodeSelectorComponent', () => {
fixture.detectChanges();
const infoMatIcon = getTabInfoButton();
const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
const iconTooltipMessage = infoMatIcon.attributes['title'];
const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE';
expect(component.getWarningMessage()).toEqual(expectedMessage);
expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
expect(iconTooltipMessage).toEqual(expectedMessage);
});
it('should not be able to show warning message if it is not in search mode', () => {
@@ -394,11 +394,11 @@ describe('ContentNodeSelectorComponent', () => {
fixture.detectChanges();
const infoMatIcon = getTabInfoButton();
const iconTooltipMessage = infoMatIcon.attributes['ng-reflect-message'];
const iconTooltipMessage = infoMatIcon.attributes['title'];
const expectedMessage = 'NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE';
expect(component.getWarningMessage()).toEqual(expectedMessage);
expect(iconTooltipMessage).toEqual(expectedMessage.substring(0, 30));
expect(iconTooltipMessage).toEqual(expectedMessage);
});
it('should not be able to show warning message while loading documents', () => {

6
lib/content-services/src/lib/dialogs/node-lock.dialog.html
View File

@@ -5,13 +5,13 @@
<mat-dialog-content>
<br />
<form [formGroup]="form" (submit)="submit()">
<mat-checkbox data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" matTooltip="{{ nodeName }}" [formControlName]="'isLocked'" ngDefaultControl>
<mat-checkbox data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" [title]="nodeName" [formControlName]="'isLocked'" ngDefaultControl>
{{ 'CORE.FILE_DIALOG.FILE_LOCK_CHECKBOX' | translate }} <strong>"{{ nodeName }}"</strong>
</mat-checkbox>
<br />
<div *ngIf="form.value.isLocked">
<div *ngIf="form.value?.isLocked">
<mat-checkbox class="adf-lock-file-name" [formControlName]="'allowOwner'" ngDefaultControl>
{{ 'CORE.FILE_DIALOG.ALLOW_OTHERS_CHECKBOX' | translate }}
</mat-checkbox>
@@ -24,7 +24,7 @@
<br />
<mat-form-field *ngIf="form.value.isTimeLock">
<mat-form-field *ngIf="form.value?.isTimeLock">
<mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="1"></mat-datetimepicker>
<input matInput [formControlName]="'time'" [matDatetimepicker]="datetimePicker" required autocomplete="false">

4
lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
View File

@@ -8,9 +8,7 @@
[attr.aria-label]="option.name | translate"
(change)="changeHandler($event, option)"
class="adf-facet-filter">
<div matTooltip="{{ option.name | translate }}"
matTooltipPosition="before"
class="adf-search-check-list-label">
<div title="{{ option.name | translate }}" class="adf-search-check-list-label">
{{ option.name | translate }}
</div>

14
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
View File

@@ -4,14 +4,11 @@
class="adf-option-chips adf-autocomplete-added-option-chips"
*ngFor="let option of selectedOptions"
(removed)="remove(option)">
<span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
[matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
<span [title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}) : undefined">
{{ option.value }}
</span>
<button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
[matTooltip]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' \'' + option.fullPath + '\''"
[matTooltipShowDelay]="tooltipShowDelay"
[attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
<button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button"
[title]="'SEARCH.FILTER.BUTTONS.REMOVE' | translate">
<mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
</button>
</mat-chip>
@@ -33,10 +30,9 @@
<ng-container *ngIf="optionInput.value.length > 0">
<mat-option
[disabled]="option | adfIsIncluded: selectedOptions : compareOption"
*ngFor="let option of filteredOptions" [value]="option" [matTooltipShowDelay]="tooltipShowDelay"
[matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
*ngFor="let option of filteredOptions" [value]="option"
[attr.data-automation-id]="'option-' + (option.value)"
[matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
[title]="option.fullPath ? ('SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}): undefined"
class="adf-search-chip-autocomplete-added-option"
[ngClass]="(option | adfIsIncluded: selectedOptions : compareOption) && 'adf-autocomplete-added-option'">
{{ option.fullPath || option.value }}

20
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts
View File

@@ -67,7 +67,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
@Input()
filter = (options: AutocompleteOption[], value: string): AutocompleteOption[] => {
const filterValue = value.toLowerCase();
return options.filter(option => option.value.toLowerCase().includes(filterValue)).slice(0, 15);
return options.filter((option) => option.value.toLowerCase().includes(filterValue)).slice(0, 15);
};
@Output()
@@ -80,7 +80,6 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
formCtrl = new FormControl('');
filteredOptions: AutocompleteOption[] = [];
selectedOptions: AutocompleteOption[] = [];
tooltipShowDelay = 800;
private onDestroy$ = new Subject<void>();
private _activeAnyOption = false;
@@ -92,7 +91,7 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
this.formCtrl.valueChanges
.pipe(
startWith(''),
tap(() => this.activeAnyOption = false),
tap(() => (this.activeAnyOption = false)),
debounce((value: string) => (value ? timer(300) : EMPTY)),
takeUntil(this.onDestroy$)
)
@@ -105,7 +104,10 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
ngOnChanges(changes: SimpleChanges) {
if (changes.autocompleteOptions) {
this.filteredOptions = changes.autocompleteOptions.currentValue?.length > 0 ? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value) : [];
this.filteredOptions =
changes.autocompleteOptions.currentValue?.length > 0
? this.filter(changes.autocompleteOptions.currentValue, this.formCtrl.value)
: [];
}
}
@@ -123,10 +125,10 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
if (value && this.isExists(value) && !this.isAdded(value)) {
if (this.allowOnlyPredefinedValues) {
const index = this.autocompleteOptions.findIndex(option => option.value.toLowerCase() === value.toLowerCase());
const index = this.autocompleteOptions.findIndex((option) => option.value.toLowerCase() === value.toLowerCase());
this.selectedOptions.push(this.autocompleteOptions[index]);
} else {
this.selectedOptions.push({value});
this.selectedOptions.push({ value });
}
this.optionsChanged.emit(this.selectedOptions);
event.chipInput.clear();
@@ -153,14 +155,12 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
private isAdded(value: string): boolean {
const valueLowerCase = value.toLowerCase();
return this.selectedOptions.some(option => option.value.toLowerCase() === valueLowerCase);
return this.selectedOptions.some((option) => option.value.toLowerCase() === valueLowerCase);
}
private isExists(value: string): boolean {
const valueLowerCase = value.toLowerCase();
return this.allowOnlyPredefinedValues
? this.autocompleteOptions.some(option => option.value.toLowerCase() === valueLowerCase)
: true;
return this.allowOnlyPredefinedValues ? this.autocompleteOptions.some((option) => option.value.toLowerCase() === valueLowerCase) : true;
}
private reset() {

3
lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html
View File

@@ -5,8 +5,7 @@
color="primary"
selected
class="adf-search-chip-list-item"
matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
matTooltipPosition="right"
title="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
(click)="facetFiltersService.resetAllSelectedBuckets()">
{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }}
</mat-chip>

3
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
View File

@@ -34,8 +34,7 @@
class="adf-search-filter-facet-checkbox"
>
<div
matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
matTooltipPosition="right"
title="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
class="adf-facet-label"
[class.adf-search-filter-facet-checkbox-checked]="bucket.checked"
>

3
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html
View File

@@ -4,9 +4,8 @@
<button mat-icon-button
class="adf-search-filter-title-action"
aria-hidden="false"
[attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="onClose()"
[matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
[title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
<mat-icon>
close
</mat-icon>

2
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
View File

@@ -9,7 +9,7 @@
(keyup.enter)="$event.stopPropagation()"
class="adf-filter-button"
[attr.aria-label]="getTooltipTranslation(col?.title)"
[matTooltip]="getTooltipTranslation(col?.title)"
[title]="getTooltipTranslation(col?.title)"
>
<adf-icon
value="filter_list"

5
lib/content-services/src/lib/search/components/search-filter/search-filter.component.html
View File

@@ -3,8 +3,7 @@
<button *ngIf="displayResetButton && facetFiltersService.responseFacets"
mat-button
color="primary"
matTooltip="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
matTooltipPosition="right"
title="{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.TOOLTIP' | translate }}"
adf-reset-search>
{{ 'SEARCH.FILTER.BUTTONS.RESET-ALL.LABEL' | translate }}
</button>
@@ -17,7 +16,7 @@
{{ category.name | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<adf-search-filter-card
<adf-search-filter-card
[category]="category">
</adf-search-filter-card>
</mat-expansion-panel>

5
lib/content-services/src/lib/search/components/search-radio/search-radio.component.html
View File

@@ -6,10 +6,7 @@
*ngFor="let option of options"
[value]="option.value"
class="adf-facet-filter">
<div
matTooltip="{{ option.name | translate }}"
matTooltipPosition="right"
class="adf-filter-label">
<div title="{{ option.name | translate }}" class="adf-filter-label">
{{ option.name | translate }}
</div>
</mat-radio-button>