Skip to content

Commit db3bcc2

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge branch 'master' into mtsvyatkova/fix-8786-master
2 parents f1cf752 + bf55f26 commit db3bcc2

18 files changed

+119
-75
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,7 @@
262262
%igx-drop-down__list-scroll {
263263
overflow-y: auto;
264264
overflow-x: hidden;
265+
-webkit-overflow-scrolling: touch;
265266
position: relative;
266267

267268
igx-input-group {

‎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/core/styles/components/scrollbar/scrollbar-theme.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,5 +71,12 @@
7171
background: --var($theme, 'thumb-background');
7272
}
7373
}
74+
75+
@media (hover: none) {
76+
%scrollbar-display ::-webkit-scrollbar {
77+
width: auto;
78+
height: auto;
79+
}
80+
}
7481
}
7582

‎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
@@ -68,7 +68,7 @@ describe('IgxGrid - Summaries #grid', () => {
6868

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

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

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

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

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

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

@@ -634,14 +634,14 @@ describe('IgxGrid - Summaries #grid', () => {
634634
}));
635635

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

640640
grid.getColumnByName('UnitsInStock').hidden = true;
641641
tick();
642642
fix.detectChanges();
643643

644-
tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
644+
tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
645645
expect(tFoot).toEqual(3 * grid.defaultSummaryHeight);
646646
expect(grid.hasSummarizedColumns).toBe(true);
647647

@@ -657,7 +657,7 @@ describe('IgxGrid - Summaries #grid', () => {
657657
fix.detectChanges();
658658

659659
expect(grid.hasSummarizedColumns).toBe(true);
660-
tFoot = GridFunctions.getGridFooter(fix).nativeElement.getBoundingClientRect().height;
660+
tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height;
661661
expect(tFoot).toEqual(5 * grid.defaultSummaryHeight);
662662
summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
663663
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, [], []);
@@ -784,7 +784,7 @@ describe('IgxGrid - Summaries #grid', () => {
784784
fix.detectChanges();
785785
grid = fix.componentInstance.grid;
786786
setupGridScrollDetection(fix, grid);
787-
grid.width = '400px';
787+
grid.width = '800px';
788788
grid.height = '800px';
789789
fix.detectChanges();
790790
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
*

0 commit comments

Comments
 (0)