Skip to content

Commit 2a847fb

Browse files
viktorkombovviktorkombov
committed
test(grids): update unit tests to match updated ARIA roles
1 parent ce0233d commit 2a847fb

5 files changed

Lines changed: 128 additions & 7 deletions

File tree

‎projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2451,6 +2451,11 @@ describe('IgxGrid - Row Selection #grid', () => {
24512451
expect(rowSelector.textContent).toBe('CUSTOM SELECTOR: 0');
24522452
expect(groupRowSelector.textContent).toBe('CUSTOM GROUP SELECTOR');
24532453
expect(headerSelector.textContent).toBe('CUSTOM HEADER SELECTOR');
2454+
2455+
// ARIA: row-selector wrappers must have the correct cell roles
2456+
expect(rowSelector.getAttribute('role')).toBe('gridcell');
2457+
expect(groupRowSelector.getAttribute('role')).toBe('gridcell');
2458+
expect(headerSelector.getAttribute('role')).toBe('columnheader');
24542459
});
24552460
});
24562461
});

‎projects/igniteui-angular/grids/grid/src/grid.component.spec.ts‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -319,9 +319,9 @@ describe('IgxGrid Component Tests #grid', () => {
319319
fixture.componentInstance.generateData(30);
320320
fixture.detectChanges();
321321
tick(100);
322-
// Checks if igx-grid__tbody-content attribute is null when there is data in the grid
322+
// With data, igx-grid__tbody-content is the rowgroup focus host
323323
const container = fixture.nativeElement.querySelectorAll('.igx-grid__tbody-content')[0];
324-
expect(container.getAttribute('role')).toBe(null);
324+
expect(container.getAttribute('role')).toBe('rowgroup');
325325

326326
//Filter grid so no results are available and grid is empty
327327
grid.filter('index','111',IgxStringFilteringOperand.instance().condition('contains'),true);
@@ -339,6 +339,34 @@ describe('IgxGrid Component Tests #grid', () => {
339339

340340
}));
341341

342+
it('should have correct ARIA role structure on tbody and tfoot', fakeAsync(() => {
343+
const fixture = TestBed.createComponent(IgxGridTestComponent);
344+
const grid = fixture.componentInstance.grid;
345+
fixture.componentInstance.columns[0].hasSummary = true;
346+
347+
fixture.componentInstance.generateData(30);
348+
fixture.detectChanges();
349+
tick(100);
350+
351+
// Outer tbody wrapper is layout-only
352+
const tbodyWrapper = fixture.nativeElement.querySelector('.igx-grid__tbody');
353+
expect(tbodyWrapper.getAttribute('role')).toBe('presentation');
354+
355+
// Inner focus host is the rowgroup
356+
const tbodyContent = fixture.nativeElement.querySelector('.igx-grid__tbody-content');
357+
expect(tbodyContent.getAttribute('role')).toBe('rowgroup');
358+
expect(tbodyContent.getAttribute('tabindex')).toBe('0');
359+
360+
// Outer tfoot wrapper is layout-only
361+
const tfootWrapper = fixture.nativeElement.querySelector('.igx-grid__tfoot');
362+
expect(tfootWrapper.getAttribute('role')).toBe('presentation');
363+
364+
// Inner tfoot div is the rowgroup focus host
365+
const tfootContent = fixture.nativeElement.querySelector('.igx-grid__tfoot > div');
366+
expect(tfootContent.getAttribute('role')).toBe('rowgroup');
367+
expect(tfootContent.getAttribute('tabindex')).toBe('0');
368+
}));
369+
342370
it('should render empty message', fakeAsync(() => {
343371
const fixture = TestBed.createComponent(IgxGridTestComponent);
344372
fixture.componentInstance.data = [];

‎projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -790,11 +790,59 @@ describe('IgxGrid - GroupBy #grid', () => {
790790
const groupRows = grid.groupsRowList.toArray();
791791
for (const grRow of groupRows) {
792792
const elem = grRow.element.nativeElement;
793+
// host carries role="row", aria-describedby; aria-expanded moved to the toggle cell
794+
expect(elem.getAttribute('role')).toBe('row');
793795
expect(elem.attributes['aria-describedby'].value).toEqual(grid.id + '_Released');
794-
expect(elem.attributes['aria-expanded'].value).toEqual('true');
796+
const toggleCell = elem.querySelector('.igx-grid__grouping-indicator');
797+
expect(toggleCell.getAttribute('role')).toBe('gridcell');
798+
expect(toggleCell.getAttribute('aria-expanded')).toBe('true');
795799
}
796800
}));
797801

802+
it('should update aria-expanded on the toggle cell when a group row is collapsed and expanded', fakeAsync(() => {
803+
const fix = TestBed.createComponent(DefaultGridComponent);
804+
const grid = fix.componentInstance.instance;
805+
grid.primaryKey = 'ID';
806+
fix.detectChanges();
807+
808+
grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false });
809+
fix.detectChanges();
810+
811+
const grRow = grid.groupsRowList.toArray()[0];
812+
const toggleCell = grRow.element.nativeElement.querySelector('.igx-grid__grouping-indicator');
813+
814+
expect(toggleCell.getAttribute('aria-expanded')).toBe('true');
815+
816+
grRow.toggle();
817+
fix.detectChanges();
818+
819+
expect(toggleCell.getAttribute('aria-expanded')).toBe('false');
820+
821+
grRow.toggle();
822+
fix.detectChanges();
823+
824+
expect(toggleCell.getAttribute('aria-expanded')).toBe('true');
825+
}));
826+
827+
it('should assign role="gridcell" to all action wrappers inside a group row', fakeAsync(() => {
828+
const fix = TestBed.createComponent(DefaultGridComponent);
829+
const grid = fix.componentInstance.instance;
830+
grid.rowDraggable = true;
831+
grid.rowSelection = GridSelectionMode.multiple;
832+
fix.detectChanges();
833+
834+
grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false });
835+
fix.detectChanges();
836+
837+
const grRow = grid.groupsRowList.toArray()[0];
838+
const elem = grRow.element.nativeElement;
839+
840+
expect(elem.querySelector('.igx-grid__drag-indicator').getAttribute('role')).toBe('gridcell');
841+
expect(elem.querySelector('.igx-grid__cbx-selection').getAttribute('role')).toBe('gridcell');
842+
expect(elem.querySelector('.igx-grid__grouping-indicator').getAttribute('role')).toBe('gridcell');
843+
expect(elem.querySelector('.igx-grid__group-content').getAttribute('role')).toBe('gridcell');
844+
}));
845+
798846
it('should not apply grouping if the grouping expressions value is the same reference', fakeAsync(() => {
799847
const fix = TestBed.createComponent(DefaultGridComponent);
800848
fix.detectChanges();

‎projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,9 +131,9 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
131131

132132
it('checks if attributes are correctly assigned when grid has or does not have data', () => {
133133

134-
// Checks if igx-grid__tbody-content attribute is null when there is data in the grid
134+
// With data, igx-grid__tbody-content is the rowgroup focus host
135135
const container = fixture.nativeElement.querySelectorAll('.igx-grid__tbody-content')[0];
136-
expect(container.getAttribute('role')).toBe(null);
136+
expect(container.getAttribute('role')).toBe('rowgroup');
137137

138138
//Filter grid so no results are available and grid is empty
139139
hierarchicalGrid.filter('index', '111', IgxStringFilteringOperand.instance().condition('contains'), true);
@@ -149,6 +149,26 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
149149
expect(container.getAttribute('role')).toMatch('row');
150150
});
151151

152+
it('should have correct ARIA role structure on tbody and tfoot', () => {
153+
// Outer tbody wrapper is layout-only
154+
const tbodyWrapper = fixture.nativeElement.querySelector('.igx-grid__tbody');
155+
expect(tbodyWrapper.getAttribute('role')).toBe('presentation');
156+
157+
// Inner focus host is the rowgroup
158+
const tbodyContent = fixture.nativeElement.querySelector('.igx-grid__tbody-content');
159+
expect(tbodyContent.getAttribute('role')).toBe('rowgroup');
160+
expect(tbodyContent.getAttribute('tabindex')).toBe('0');
161+
162+
// Outer tfoot wrapper is layout-only
163+
const tfootWrapper = fixture.nativeElement.querySelector('.igx-grid__tfoot');
164+
expect(tfootWrapper.getAttribute('role')).toBe('presentation');
165+
166+
// Inner tfoot div is the rowgroup focus host
167+
const tfootContent = fixture.nativeElement.querySelector('.igx-grid__tfoot > div');
168+
expect(tfootContent.getAttribute('role')).toBe('rowgroup');
169+
expect(tfootContent.getAttribute('tabindex')).toBe('0');
170+
});
171+
152172
it('should allow applying initial expansions state for certain rows through expansionStates option', () => {
153173
// set first row as expanded.
154174
const state = new Map<any, boolean>();

‎projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.spec.ts‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,9 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
124124
});
125125

126126
it('checks if attributes are correctly assigned when grid has or does not have data', fakeAsync(() => {
127-
// Checks if igx-grid__tbody-content attribute is null when there is data in the grid
127+
// With data, igx-grid__tbody-content is the rowgroup focus host
128128
const container = fix.nativeElement.querySelectorAll('.igx-grid__tbody-content')[0];
129-
expect(container.getAttribute('role')).toBe(null);
129+
expect(container.getAttribute('role')).toBe('rowgroup');
130130

131131
//Filter grid so no results are available and grid is empty
132132
grid.filter('Name', '111', IgxStringFilteringOperand.instance().condition('contains'), true);
@@ -143,6 +143,26 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
143143
expect(container.getAttribute('role')).toMatch('row');
144144
}));
145145

146+
it('should have correct ARIA role structure on tbody and tfoot', fakeAsync(() => {
147+
// Outer tbody wrapper is layout-only
148+
const tbodyWrapper = fix.nativeElement.querySelector('.igx-grid__tbody');
149+
expect(tbodyWrapper.getAttribute('role')).toBe('presentation');
150+
151+
// Inner focus host is the rowgroup
152+
const tbodyContent = fix.nativeElement.querySelector('.igx-grid__tbody-content');
153+
expect(tbodyContent.getAttribute('role')).toBe('rowgroup');
154+
expect(tbodyContent.getAttribute('tabindex')).toBe('0');
155+
156+
// Outer tfoot wrapper is layout-only
157+
const tfootWrapper = fix.nativeElement.querySelector('.igx-grid__tfoot');
158+
expect(tfootWrapper.getAttribute('role')).toBe('presentation');
159+
160+
// Inner tfoot div is the rowgroup focus host
161+
const tfootContent = fix.nativeElement.querySelector('.igx-grid__tfoot > div');
162+
expect(tfootContent.getAttribute('role')).toBe('rowgroup');
163+
expect(tfootContent.getAttribute('tabindex')).toBe('0');
164+
}));
165+
146166
it('should display flat data even if no foreignKey is set', () => {
147167
fix = TestBed.createComponent(IgxTreeGridWithNoForeignKeyComponent);
148168
grid = fix.componentInstance.treeGrid;

0 commit comments

Comments
 (0)