inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-11506]: moved aria-live region (#11808)

Browse Source 
* [ACS-11506]: moved aria-live region

* [ACS-11506]: regression tests
This commit is contained in:
Anton Ramanovich
2026-04-14 10:01:36 +02:00
committed by GitHub
parent 7a70ae8eb6
commit 8a6bcac29e
2 changed files with 62 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/datatable/components/datatable/datatable.component.html
+6 -7
View File
@@ -253,13 +253,6 @@
(enableDragRows ? ('ADF-DATATABLE.ACCESSIBILITY.DRAGGABLE' | translate) : '')
"
>
<!-- Live region for selection state -->
@if (multiselect) {
<span class="adf-sr-only" aria-live="off">
{{ row.isSelected ? ('ADF-DATATABLE.ACCESSIBILITY.SELECTED' | translate) : '' }}
</span>
}
<!-- Drag button -->
@if (enableDragRows) {
<div
@@ -318,6 +311,12 @@
aria-hidden="true"
/>
</label>
<!-- Live region for selection state -->
<span class="adf-sr-only" aria-live="off">
{{ row.isSelected ? ('ADF-DATATABLE.ACCESSIBILITY.SELECTED' | translate) : '' }}
</span>
}
@for (col of getVisibleColumns(); track col.key; let lastColumn = $last;) {
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+56 -14
View File
@@ -1762,38 +1762,80 @@ describe('Accessibility', () => {
});
describe('drag button and multiselect checkbox accessibility', () => {
it('should have aria-hidden on drag button', () => {
const dataRows = [{ name: 'test1' }];
dataTable.enableDragRows = true;
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name' })]);
dataTable.showHeader = ShowHeaderMode.Never;
let dataRows: Array<{ name: string; isSelected?: boolean }>;
const setupRows = (): void => {
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name' })]);
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)
});
fixture.detectChanges();
};
beforeEach(() => {
dataRows = [{ name: 'test1' }];
dataTable.showHeader = ShowHeaderMode.Never;
});
it('should have aria-hidden on drag button', () => {
dataTable.enableDragRows = true;
setupRows();
const dragButton = testingUtils.getByCSS('.adf-datatable__actions-cell [aria-hidden="true"]');
expect(dragButton).toBeTruthy();
expect(dragButton.attributes['aria-hidden']).toBe('true');
});
it('should have aria-hidden and negative tabindex on multiselect checkbox', () => {
const dataRows = [{ name: 'test1' }];
dataTable.multiselect = true;
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name' })]);
dataTable.showHeader = ShowHeaderMode.Never;
setupRows();
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)
});
fixture.detectChanges();
const checkboxContainer = testingUtils.getByCSS('.adf-checkbox-sr-only');
expect(checkboxContainer).toBeTruthy();
expect(checkboxContainer.attributes['aria-hidden']).toBe('true');
expect(checkboxContainer.nativeElement.tabIndex).toBe(-1);
});
it('should render selection state live region when multiselect is enabled', () => {
dataTable.multiselect = true;
setupRows();
const liveRegions = testingUtils.getAllByCSS('.adf-sr-only[aria-live="off"]');
expect(liveRegions.length).toEqual(1);
});
it('should not render selection state live region when multiselect is disabled', () => {
dataTable.multiselect = false;
setupRows();
const bodyRows = testingUtils.getAllByCSS('.adf-datatable-body .adf-datatable-row');
bodyRows.forEach((row) => {
const selectionLiveRegion = row.nativeElement.querySelector('.adf-sr-only[aria-live="off"]');
expect(selectionLiveRegion).toBeFalsy();
});
});
it('should update live region content when row selection state changes', fakeAsync(() => {
dataRows = [{ name: 'test1', isSelected: false }];
dataTable.multiselect = true;
setupRows();
tick();
const bodyRows = testingUtils.getAllByCSS('.adf-datatable-body .adf-datatable-row');
expect(bodyRows.length).toBeGreaterThan(0);
const firstRow = bodyRows[0];
const liveRegion = firstRow.nativeElement.querySelector('.adf-sr-only[aria-live="off"]');
expect(liveRegion).toBeTruthy();
expect(liveRegion.textContent.trim()).toBe('');
dataTable.data.getRows()[0].isSelected = true;
fixture.detectChanges();
tick();
expect(liveRegion.textContent).toContain('SELECTED');
}));
});
describe('aria-sort', () => {