Skip to content

Commit cffc1d9

Browse files
kdinevkdinev
authored
Merge pull request #9245 from IgniteUI/grid-accessibility-10.2.x
Grid accessibility 10.2.x
2 parents aabd769 + d0a6ff2 commit cffc1d9

File tree

14 files changed

+96
-81
lines changed

14 files changed

+96
-81
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -752,6 +752,10 @@
752752
color: inherit;
753753
}
754754
}
755+
756+
> [aria-activedescendant] {
757+
outline-style: none;
758+
}
755759
}
756760

757761
%grid-thead {
@@ -1780,6 +1784,7 @@
17801784
display: flex;
17811785
overflow: hidden;
17821786
background: --var($theme, 'root-summaries-background');
1787+
outline-style: none;
17831788

17841789
%igx-grid-summary__result {
17851790
color: --var($theme, 'root-summaries-text-color');

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2072,11 +2072,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
20722072

20732073
get activeDescendant() {
20742074
const activeElem = this.navigation.activeNode;
2075-
if (activeElem) {
2076-
return !this.navigation.isDataRow(activeElem.row, true) ? this.id + '_' + activeElem.row :
2077-
this.id + '_' + activeElem.row + '_' + activeElem.column;
2075+
2076+
if (!Object.keys(activeElem).length) {
2077+
return this.id;
20782078
}
2079-
return null;
2079+
2080+
return !this.navigation.isDataRow(activeElem.row, true) ? this.id + '_' + activeElem.row :
2081+
this.id + '_' + activeElem.row + '_' + activeElem.column;
20802082
}
20812083

20822084
/**

‎projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { DebugElement } from '@angular/core';
33
import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
44
import { By } from '@angular/platform-browser';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
6-
import { IColumnVisibilityChangedEventArgs } from '../hiding/column-hiding-item.directive';
76
import { IgxGridModule } from './public_api';
87
import { IgxGridComponent } from './grid.component';
98
import { IgxButtonModule } from '../../directives/button/button.directive';
109
import { ColumnHidingTestComponent, ColumnGroupsHidingTestComponent } from '../../test-utils/grid-base-components.spec';
11-
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
10+
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
1211
import { GridFunctions } from '../../test-utils/grid-functions.spec';
1312
import { SortingDirection } from '../../data-operations/sorting-expression.interface';
1413
import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -632,7 +631,7 @@ describe('Column Hiding UI #grid', () => {
632631
expect(grid.scr.nativeElement.hidden).toBe(false);
633632
const gridHeader = GridFunctions.getGridHeader(fix);
634633
const gridScroll = GridFunctions.getGridScroll(fix);
635-
const gridFooter = GridFunctions.getGridFooter(fix);
634+
const gridFooter = GridFunctions.getGridFooterWrapper(fix);
636635
let expectedHeight = parseInt(window.getComputedStyle(grid.nativeElement).height, 10)
637636
- parseInt(window.getComputedStyle(gridHeader.nativeElement).height, 10)
638637
- parseInt(window.getComputedStyle(gridFooter.nativeElement).height, 10)

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ describe('IgxGrid - Summaries #grid', () => {
6767

6868
it('should enableSummaries through grid API ', () => {
6969
expect(grid.hasSummarizedColumns).toBe(false);
70-
let tFoot = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
70+
let tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
7171
expect(tFoot < grid.defaultSummaryHeight).toBe(true);
7272

7373
grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ProductID' }]);
@@ -84,7 +84,7 @@ describe('IgxGrid - Summaries #grid', () => {
8484
expect(grid.getColumnByName('ProductName').hasSummary).toBe(true);
8585
expect(grid.getColumnByName('OrderDate').hasSummary).toBe(false);
8686

87-
tFoot = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
87+
tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
8888
expect(tFoot).toEqual(grid.defaultSummaryHeight);
8989
});
9090

@@ -95,7 +95,7 @@ describe('IgxGrid - Summaries #grid', () => {
9595
grid.getColumnByName('UnitsInStock').hasSummary = true;
9696
fixture.detectChanges();
9797

98-
const tFoot = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
98+
const tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
9999
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
100100
expect(GridSummaryFunctions.getRootSummaryRow(fixture)).toBeDefined();
101101
});
@@ -170,7 +170,7 @@ describe('IgxGrid - Summaries #grid', () => {
170170
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Test 1', 'Test 2'], ['10', '50', '150']);
171171
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Count', 'Test 3'], ['10', '850']);
172172

173-
const tFootHeight = GridFunctions.getGridFooter(fixture).nativeElement.getBoundingClientRect().height;
173+
const tFootHeight = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height;
174174
expect(tFootHeight).toBeGreaterThanOrEqual(3 * grid.defaultSummaryHeight);
175175
});
176176

@@ -610,14 +610,14 @@ describe('IgxGrid - Summaries #grid', () => {
610610
}));
611611

612612
it('Hiding: should recalculate summary area after column with enabled summary is hidden', fakeAsync(() => {
613-
let tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
613+
let tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
614614
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
615615

616616
grid.getColumnByName('UnitsInStock').hidden = true;
617617
tick();
618618
fix.detectChanges();
619619

620-
tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
620+
tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
621621
expect(tFoot).toEqual(3 * grid.defaultSummaryHeight);
622622
expect(grid.hasSummarizedColumns).toBe(true);
623623

@@ -633,7 +633,7 @@ describe('IgxGrid - Summaries #grid', () => {
633633
fix.detectChanges();
634634

635635
expect(grid.hasSummarizedColumns).toBe(true);
636-
tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
636+
tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
637637
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
638638
summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
639639
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, [], []);
@@ -760,7 +760,7 @@ describe('IgxGrid - Summaries #grid', () => {
760760
fix.detectChanges();
761761
grid = fix.componentInstance.grid;
762762
setupGridScrollDetection(fix, grid);
763-
grid.width = '400px';
763+
grid.width = '800px';
764764
grid.height = '800px';
765765
fix.detectChanges();
766766
tick(100);

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
</igx-chips-area>
2828
</div>
2929

30-
<div class="igx-grid__thead">
31-
<div class="igx-grid__thead-wrapper" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="rowgroup" (focus)="navigation.focusFirstCell()"
30+
<div class="igx-grid__thead" role="rowgroup">
31+
<div class="igx-grid__thead-wrapper" [class.igx-grid__tr--mrl]='hasColumnLayouts' (focus)="navigation.focusFirstCell()"
3232
[style.width.px]='calcWidth' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.headerNavigation($event)" (scroll)="preventHeaderScroll($event)" #theadRow>
3333
<div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
3434
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
@@ -98,11 +98,11 @@
9898
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
9999
</div>
100100

101-
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody">
102-
<div class="igx-grid__tbody-content" tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
103-
role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
101+
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
102+
<div class="igx-grid__tbody-content" tabindex="0" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
103+
(onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
104104
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
105-
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody>
105+
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
106106
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
107107
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
108108
class="igx-grid__scroll-on-drag-left"></span>
@@ -171,7 +171,7 @@
171171
</igx-grid-groupby-row>
172172
</ng-template>
173173
<ng-template #summary_template let-rowIndex="index" let-rowData>
174-
<igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex"
174+
<igx-grid-summary-row role="row" [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex"
175175
class="igx-grid__summaries--body" #summaryRow>
176176
</igx-grid-summary-row>
177177
</ng-template>
@@ -217,15 +217,16 @@
217217
</div>
218218

219219

220-
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant"
221-
(focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
222-
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
223-
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
224-
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
225-
class="igx-grid__summaries" #summaryRow>
226-
</igx-grid-summary-row>
227-
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
228-
[style.width.px]="scrollSize"></div>
220+
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
221+
<div tabindex="0" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
222+
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
223+
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
224+
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
225+
class="igx-grid__summaries" #summaryRow>
226+
</igx-grid-summary-row>
227+
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
228+
[style.width.px]="scrollSize"></div>
229+
</div>
229230
</div>
230231

231232
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1567,7 +1567,8 @@ describe('IgxGrid - GroupBy #grid', () => {
15671567
fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false
15681568
});
15691569
fix.detectChanges();
1570-
UIInteractions.simulateMouseEvent('click', fix.nativeElement.querySelector('igx-grid-header[id$="_ProductName"]'), 0, 0);
1570+
const productNameCol = fix.nativeElement.querySelector('igx-grid-header-group[id$="_-1_0_2"]');
1571+
UIInteractions.simulateMouseEvent('click', productNameCol, 0, 0);
15711572
tick();
15721573
fix.detectChanges();
15731574
const chips = fix.nativeElement.querySelectorAll('igx-chip');

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
6969
return this.column.colStart;
7070
}
7171

72+
@HostBinding('attr.id')
73+
public get headerID() {
74+
return `${this.gridID}_-1_${this.column.level}_${this.column.visibleIndex}`;
75+
}
76+
7277
/**
7378
* Gets the column of the header group.
7479
* @memberof IgxGridHeaderGroupComponent

‎projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/gr
3131
templateUrl: './grid-header.component.html'
3232
})
3333
export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
34+
@HostBinding('attr.role')
35+
public hostRole = 'columnheader';
3436

3537
private _destroy$ = new Subject<boolean>();
3638

@@ -124,14 +126,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
124126
return this.column.title || this.column.header || this.column.field;
125127
}
126128

127-
@HostBinding('attr.role')
128-
public hostRole = 'columnheader';
129-
130-
@HostBinding('attr.id')
131-
get headerID() {
132-
return `${this.gridID}_${this.column.field}`;
133-
}
134-
135129
protected sortDirection = SortingDirection.None;
136130

137131
constructor(

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,6 @@ private resolver;
7575
@ViewChild('hgrid', { static: true })
7676
public hGrid: any/* TODO: IgxHierarchicalGridComponent*/;
7777

78-
/**
79-
* @hidden
80-
*/
81-
@HostBinding('attr.role')
82-
public role = 'row';
83-
8478
/**
8579
* Get a reference to the grid that contains the selected row.
8680
*
@@ -103,7 +97,7 @@ private resolver;
10397
return this.gridAPI.grid;
10498
}
10599

106-
@HostBinding('attr.data-level')
100+
@HostBinding('attr.aria-level')
107101
get level() {
108102
return this.layout.level;
109103
}

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
[displayDensity]="displayDensity" #toolbar>
33
</igx-grid-toolbar>
44

5-
<div class="igx-grid__thead">
5+
<div class="igx-grid__thead" role="rowgroup">
66
<div class="igx-grid__thead-wrapper" tabindex="0" (focus)="navigation.focusFirstCell()" [attr.aria-activedescendant]="activeDescendant"
7-
(keydown)="navigation.headerNavigation($event)" role="rowgroup" [style.width.px]='calcWidth' #theadRow>
7+
(keydown)="navigation.headerNavigation($event)" [style.width.px]='calcWidth' #theadRow>
88
<div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
99
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
1010
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
@@ -82,10 +82,10 @@
8282
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
8383
</div>
8484

85-
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody">
86-
<div class="igx-grid__tbody-content" tabindex="0" (focus)="navigation.focusTbody($event)" [attr.aria-activedescendant]="activeDescendant"
85+
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
86+
<div class="igx-grid__tbody-content" tabindex="0" (focus)="navigation.focusTbody($event)"
8787
(keydown)="navigation.handleNavigation($event)" (onDragStop)="selectionService.dragMode = $event"
88-
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" role="rowgroup"
88+
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [attr.aria-activedescendant]="activeDescendant"
8989
[style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
9090
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
9191
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
@@ -174,16 +174,17 @@
174174
</div>
175175
</div>
176176

177-
178-
<div class="igx-grid__tfoot" tabindex="0" (focus)="navigation.focusFirstCell(false)" [attr.aria-activedescendant]="activeDescendant"
179-
(keydown)="navigation.summaryNav($event)" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
180-
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
181-
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
182-
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
183-
class="igx-grid__summaries" #summaryRow>
184-
</igx-grid-summary-row>
185-
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
186-
[style.width.px]="scrollSize"></div>
177+
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
178+
<div tabindex="0" (focus)="navigation.focusFirstCell(false)" [attr.aria-activedescendant]="activeDescendant"
179+
(keydown)="navigation.summaryNav($event)">
180+
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
181+
*ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
182+
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
183+
class="igx-grid__summaries" #summaryRow>
184+
</igx-grid-summary-row>
185+
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
186+
[style.width.px]="scrollSize"></div>
187+
</div>
187188
</div>
188189

189190
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">

0 commit comments

Comments
 (0)