Skip to content

Commit 56b2c44

Browse files
zdrawkuzdrawku
authored
Merge pull request #9165 from IgniteUI/grid-accessibility
Grid accessibility
2 parents 2da802b + 0b594b1 commit 56b2c44

16 files changed

+111
-75
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 {
@@ -1771,6 +1775,7 @@
17711775
display: flex;
17721776
overflow: hidden;
17731777
background: --var($theme, 'root-summaries-background');
1778+
outline-style: none;
17741779

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

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2259,11 +2259,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
22592259

22602260
public get activeDescendant() {
22612261
const activeElem = this.navigation.activeNode;
2262-
if (activeElem) {
2263-
return !this.navigation.isDataRow(activeElem.row, true) ? this.id + '_' + activeElem.row :
2264-
this.id + '_' + activeElem.row + '_' + activeElem.column;
2262+
2263+
if (!activeElem || !Object.keys(activeElem).length) {
2264+
return this.id;
22652265
}
2266-
return null;
2266+
2267+
return activeElem.row < 0 ?
2268+
`${this.id}_${activeElem.row}_${activeElem.mchCache.level}_${activeElem.column}` :
2269+
`${this.id}_${activeElem.row}_${activeElem.column}`;
22672270
}
22682271

22692272
/**

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,7 +669,7 @@ describe('Column Hiding UI #grid', () => {
669669
const toolbar = GridFunctions.getToolbar(fix);
670670
const gridHeader = GridFunctions.getGridHeader(fix);
671671
const gridScroll = GridFunctions.getGridScroll(fix);
672-
const gridFooter = GridFunctions.getGridFooter(fix);
672+
const gridFooter = GridFunctions.getGridFooterWrapper(fix);
673673
let expectedHeight = parseInt(window.getComputedStyle(grid.nativeElement).height, 10)
674674
- parseInt(window.getComputedStyle(toolbar.nativeElement).height, 10)
675675
- parseInt(window.getComputedStyle(gridHeader.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: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@
2525
</igx-chips-area>
2626
</div>
2727

28-
<div class="igx-grid__thead">
29-
<div class="igx-grid__thead-wrapper" (keydown.meta.c)="copyHandler($event)" (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="rowgroup" (focus)="navigation.focusFirstCell()"
30-
[style.width.px]='calcWidth' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.headerNavigation($event)" (scroll)="preventHeaderScroll($event)" #theadRow>
31-
<div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
28+
<div class="igx-grid__thead" role="rowgroup">
29+
<div class="igx-grid__thead-wrapper" (keydown.meta.c)="copyHandler($event)" (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)"
30+
[class.igx-grid__tr--mrl]='hasColumnLayouts' (focus)="navigation.focusFirstCell()" [attr.aria-activedescendant]="activeDescendant"
31+
[style.width.px]='calcWidth' tabindex="0" (keydown)="navigation.headerNavigation($event)" (scroll)="preventHeaderScroll($event)" #theadRow>
32+
<div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
3233
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
3334
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
3435
class="igx-grid__scroll-on-drag-left" [style.left.px]="pinnedWidth"></span>
@@ -94,11 +95,11 @@
9495
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
9596
</div>
9697

97-
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody">
98-
<div class="igx-grid__tbody-content" tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
99-
role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
98+
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
99+
<div class="igx-grid__tbody-content" tabindex="0" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
100+
(onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
100101
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
101-
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody>
102+
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
102103
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
103104
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
104105
class="igx-grid__scroll-on-drag-left"></span>
@@ -167,7 +168,7 @@
167168
</igx-grid-groupby-row>
168169
</ng-template>
169170
<ng-template #summary_template let-rowIndex="index" let-rowData>
170-
<igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex"
171+
<igx-grid-summary-row role="row" [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex"
171172
class="igx-grid__summaries--body" #summaryRow>
172173
</igx-grid-summary-row>
173174
</ng-template>
@@ -213,15 +214,16 @@
213214
</div>
214215

215216

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

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

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,12 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
165165
@ViewChild('groupArea')
166166
public groupArea: ElementRef;
167167

168+
/**
169+
* @hidden @internal
170+
*/
171+
@HostBinding('attr.role')
172+
public role = 'grid';
173+
168174
/**
169175
* Gets/Sets the value of the `id` attribute.
170176
*

‎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
@@ -2344,7 +2344,8 @@ describe('IgxGrid - GroupBy #grid', () => {
23442344
fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: false
23452345
});
23462346
fix.detectChanges();
2347-
UIInteractions.simulateMouseEvent('click', fix.nativeElement.querySelector('igx-grid-header[id$="_ProductName"]'), 0, 0);
2347+
const productNameCol = fix.nativeElement.querySelector('igx-grid-header-group[id$="_-1_0_2"]');
2348+
UIInteractions.simulateMouseEvent('click', productNameCol,0, 0);
23482349
tick();
23492350
fix.detectChanges();
23502351
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
*

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -139,11 +139,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
139139
return this.column.title || this.column.header || this.column.field;
140140
}
141141

142-
@HostBinding('attr.id')
143-
get headerID() {
144-
return `${this.gridID}_${this.column.field}`;
145-
}
146-
147142
protected sortDirection = SortingDirection.None;
148143

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

‎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
@@ -65,12 +65,6 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
6565
@ViewChild('hgrid', { static: true })
6666
public hGrid: any/* TODO: IgxHierarchicalGridComponent*/;
6767

68-
/**
69-
* @hidden
70-
*/
71-
@HostBinding('attr.role')
72-
public role = 'row';
73-
7468
/**
7569
* Get a reference to the grid that contains the selected row.
7670
*
@@ -93,7 +87,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
9387
return this.gridAPI.grid;
9488
}
9589

96-
@HostBinding('attr.data-level')
90+
@HostBinding('attr.aria-level')
9791
get level() {
9892
return this.layout.level;
9993
}

0 commit comments

Comments
 (0)