inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-04-16 22:24:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-10203]: Checkbox "Select All" has no visible label (#11594)

Browse Source 
* [ACS-10203]: adds tooltip

* [ACS-10203]: adds selectors and global styles

* [ACS-10203]: typo fix
This commit is contained in:
Anton Ramanovich
2026-01-30 13:12:50 +01:00
committed by GitHub
parent 1780aa9663
commit 8cda30db45
5 changed files with 90 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@@ -28,11 +28,17 @@
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
<mat-checkbox [indeterminate]="isSelectAllIndeterminate"
[checked]="isSelectAllChecked"
(change)="onSelectAllClick($event)"
class="adf-checkbox-sr-only"
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate">
<mat-checkbox
[indeterminate]="isSelectAllIndeterminate"
[checked]="isSelectAllChecked"
(change)="onSelectAllClick($event)"
class="adf-checkbox-sr-only"
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate"
[matTooltip]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate"
#tooltip="matTooltip"
(focusin)="tooltip.show()"
(focusout)="tooltip.hide()"
>
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}
</mat-checkbox>
</div>

67
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -37,6 +37,7 @@ import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
import { provideRouter } from '@angular/router';
import { firstValueFrom } from 'rxjs';
import { DataTableAdapter } from '@alfresco/adf-core';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
@Component({
selector: 'adf-custom-column-template-component',
@@ -1601,6 +1602,7 @@ describe('Accessibility', () => {
let dataTable: DataTableComponent;
let columnCustomTemplate: TemplateRef<any>;
let testingUtils: UnitTestingUtils;
let loader: HarnessLoader;
const setupAndCheckHeaderColumns = (sortable: boolean, selector: string, assertions: (element: DebugElement | null) => void) => {
dataTable.showHeader = ShowHeaderMode.Always;
@@ -1636,6 +1638,7 @@ describe('Accessibility', () => {
fixture = TestBed.createComponent(DataTableComponent);
dataTable = fixture.componentInstance;
testingUtils = new UnitTestingUtils(fixture.debugElement);
loader = TestbedHarnessEnvironment.loader(fixture);
});
afterEach(() => {
@@ -1942,6 +1945,70 @@ describe('Accessibility', () => {
expect(dataTable.dragDropped.emit).toHaveBeenCalledWith({ previousIndex: 1, currentIndex: 0 });
});
describe('Select-all accessibility checkbox tooltip', () => {
let tooltip: MatTooltipHarness;
let checkbox: MatCheckboxHarness;
beforeEach(() => {
dataTable.showHeader = ShowHeaderMode.Always;
const dataRows = [{ name: 'name1' }];
dataTable.multiselect = true;
dataTable.data = new ObjectDataTableAdapter(
[],
[
new ObjectDataColumn({
key: 'name',
template: columnCustomTemplate,
sortable: true
})
]
);
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)
});
fixture.detectChanges();
dataTable.ngAfterViewInit();
});
beforeEach(async () => {
checkbox = await loader.getHarness(MatCheckboxHarness);
tooltip = await loader.getHarness(MatTooltipHarness);
await checkbox.blur();
await tooltip.hide();
fixture.detectChanges();
await fixture.whenStable();
});
it('should show accessibility tooltip on select-all checkbox focus', async () => {
expect(await tooltip.isOpen()).toBe(false);
await checkbox.focus();
fixture.detectChanges();
await fixture.whenStable();
expect(await tooltip.isOpen()).toBe(true);
expect(await tooltip.getTooltipText()).toBe('ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL');
});
it('should show accessibility tooltip on select-all checkbox mouse enter', async () => {
expect(await tooltip.isOpen()).toBe(false);
await tooltip.show();
fixture.detectChanges();
await fixture.whenStable();
expect(await tooltip.isOpen()).toBe(true);
expect(await tooltip.getTooltipText()).toBe('ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL');
});
});
});
describe('Drag&Drop column header', () => {

4
lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View File

@@ -83,6 +83,7 @@ import { AmountCellComponent } from '../amount-cell/amount-cell.component';
import { NumberCellComponent } from '../number-cell/number-cell.component';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { IconModule } from '../../../icon/icon.module';
import { MatTooltipModule } from '@angular/material/tooltip';
// eslint-disable-next-line no-shadow
export enum ShowHeaderMode {
@@ -119,7 +120,8 @@ export enum ShowHeaderMode {
BooleanCellComponent,
JsonCellComponent,
AmountCellComponent,
NumberCellComponent
NumberCellComponent,
MatTooltipModule
],
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.scss'],

7
lib/core/src/lib/styles/_globals.scss
View File

@@ -87,4 +87,11 @@
#{ms.$mat-button-base} {
-webkit-font-smoothing: antialiased;
}
#{ms.$mat-tooltip} {
#{ms.$mat-tooltip-surface} {
font-size: var(--theme-body-2-font-size);
background-color: var(--adf-accessibility-tooltip-background-color);
}
}
}

2
lib/core/src/lib/styles/_mat-selectors.scss
View File

@@ -77,3 +77,5 @@ $mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-t
$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
$mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
$mat-tooltip: '.mat-mdc-tooltip';
$mat-tooltip-surface: '.mat-mdc-tooltip-surface';