Merge branch 'master' into mkirova/fix-ghost-selection

Author: ChronosSF

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,12 +9,12 @@ Closes #
 
 ### Checklist:
  - [ ] All relevant tags have been applied to this PR
- - [ ] This PR includes unit tests covering all the new code
- - [ ] This PR includes API docs for newly added methods/properties
+ - [ ] This PR includes unit tests covering all the new code ([test guidelines](https://github.com/IgniteUI/igniteui-angular/wiki/Test-implementation-guidelines-for-Ignite-UI-for-Angular))
+ - [ ] This PR includes API docs for newly added methods/properties ([api docs guidelines](https://github.com/IgniteUI/igniteui-angular/wiki/Documentation-Guidelines))
  - [ ] This PR includes `feature/README.MD` updates for the feature docs
  - [ ] This PR includes general feature table updates in the root `README.MD`
  - [ ] This PR includes `CHANGELOG.MD` updates for newly added functionality
  - [ ] This PR contains breaking changes
- - [ ] This PR includes `ng update` migrations for the breaking changes
+ - [ ] This PR includes `ng update` migrations for the breaking changes ([migrations guidelines](https://github.com/IgniteUI/igniteui-angular/wiki/Update-Migrations))
  - [ ] This PR includes behavioral changes and the feature specification has been updated with them
 

CHANGELOG.md

@@ -64,6 +64,18 @@ All notable changes for each version of this project will be documented in this
     - `deselectColumns` API method is added for the `IgxGrid`. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
     - `deselectAllColumns` API method is added for the `IgxGrid`. It allows to deselect all columns.
     - `getSelectedColumnsData` API method is added for the `IgxGrid`. It allows to get the selected columns data.
+    Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the [Grid Specification](https://github.com/IgniteUI/igniteui-angular/wiki/igxGrid-Specification#kb-navigation).
+    - **Behavioral Change**
+        - *you can not use* `tab` key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
+        - when you are in edit mode with `tab` key you can navigate to the next editable cell.
+        - `page up` and `page down` keys will perform action only if the focused element is the tbody of the grid.
+        - The grid introduces the following basic `tab stops`:
+            - Toolbar / Group by Area if existing;
+            - The first cell in the header row;
+            - The first cell in the first body row;
+            - The first cell in column summary if exists;
+            - Pager UI;
+    - `onGridKeydown` event is deprecated. Now you can directly bind to keydown on the IgxGrid component in order to perform custom keyboard navigation.
 
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.

projects/igniteui-angular/src/lib/checkbox/checkbox.component.html

@@ -34,7 +34,7 @@
     <div class="igx-checkbox__ripple"></div>
 </div>
 
-<span #placeholderLabel role="label"
+<span #placeholderLabel
     [class]="labelClass"
     [id]="labelId"
     (click)="_onLabelClick($event)">

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

@@ -212,6 +212,10 @@
         @extend %igx-grid__tr-container !optional;
     }
 
+    @include e(tr-container, $m: active) {
+        @extend %igx-grid__tr-container--active !optional;
+    }
+
     @include e(th) {
         @extend %grid-cell-display !optional;
         @extend %grid-cell-header !optional;
@@ -253,6 +257,10 @@
         @extend %igx-grid__th--selected !optional;
     }
 
+    @include e(th, $m: active) {
+        @extend %igx-grid__th--active !optional;
+    }
+
     @include e(th, $m: number) {
         @extend %grid-cell-number !optional;
     }
@@ -798,7 +806,7 @@
         @include e(hierarchical-expander) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
         }
-        
+
         @include e(hierarchical-expander, $m: empty) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
             @extend %igx-grid__hierarchical-expander--empty !optional;
@@ -874,3 +882,9 @@
         @extend %igx-group-label__count-badge !optional;
     }
 }
+
+@include b(igx-grid-summary) {
+    @include m(active) {
+        @extend %igx-grid-summary--active !optional;
+    }
+}

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

@@ -732,6 +732,7 @@
         background: --var($theme, 'header-background');
         color: --var($theme, 'header-text-color');
         overflow: hidden;
+        outline-style: none;
 
         %grid-row {
             position: relative;
@@ -918,6 +919,7 @@
         color: --var($theme, 'content-text-color');
         overflow: hidden;
         z-index: 1;
+        outline-style: none;
     }
 
     %grid-tbody-container {
@@ -1322,8 +1324,6 @@
         // border-bottom: 0;
 
         %igx-grid__tree-grouping-indicator {
-            color: --var($theme, 'cell-selected-text-color');
-
             &:hover {
                 color: --var($theme, 'cell-selected-text-color');
             }
@@ -1543,6 +1543,19 @@
         background: --var($theme, 'header-selected-background');
     }
 
+    %igx-grid__th--active {
+        @extend %grid-cell--active;
+
+        %igx-grid__th--selected,
+        %igx-grid__th--selectable {
+            @extend %grid-cell--active
+        }
+    }
+
+    %igx-grid-summary--active {
+        @extend %grid-cell--active
+    }
+
     %igx-grid__th--sortable {
         .sort-icon {
             cursor: pointer;
@@ -1842,6 +1855,7 @@
 
     %igx-grid__group-row--active {
         background: --var($theme, 'group-row-selected-background');
+        @extend %grid-cell--active;
 
         %igx-grid__grouping-indicator {
             color: --var($theme, 'expand-icon-color');
@@ -2092,7 +2106,6 @@
         user-select: none;
         justify-content: center;
         align-items: center;
-        background: inherit;
         z-index: 1;
         cursor: pointer;
         padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');
@@ -2484,6 +2497,10 @@
         border-bottom: 1px solid --var($theme, 'row-border-color');
     }
 
+    %igx-grid__tr-container--active {
+        @extend %grid-cell--active;
+    }
+
     %igx-grid__hierarchical-expander {
         user-select: none;
         background: inherit;

projects/igniteui-angular/src/lib/core/utils.ts

@@ -335,6 +335,7 @@ export const NAVIGATION_KEYS = new Set([
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
 export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
+export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
 
 /**
  * @hidden

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -966,7 +966,7 @@ export class IgxColumnComponent implements AfterContentInit {
         let vIndex = -1;
 
         if (this.columnGroup) {
-            col = this.allChildren.filter(c => !c.columnGroup)[0] as any;
+            col = this.allChildren.filter(c => !c.columnGroup && !c.hidden)[0] as any;
         }
         if (this.columnLayoutChild) {
             return this.parent.childrenVisibleIndexes.find(x => x.column === this).index;

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html

@@ -1,21 +1,19 @@
 <ng-template #emptyFilter>
-        <igx-chips-area [attr.draggable]="false" class="igx-filtering-chips">
-            <igx-chip #ghostChip [attr.draggable]="false" (click)="onChipClicked()" (keydown.enter)="onChipKeyDown($event)" [displayDensity]="'cosy'">
-                <igx-icon [attr.draggable]="false" igxPrefix>filter_list</igx-icon>
-                <span [attr.draggable]="false">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>
-            </igx-chip>
-        </igx-chips-area>
+    <igx-chips-area [attr.draggable]="false" class="igx-filtering-chips">
+        <igx-chip #ghostChip [attr.draggable]="false" (click)="onChipClicked()" [displayDensity]="'cosy'">
+            <igx-icon [attr.draggable]="false" igxPrefix>filter_list</igx-icon>
+            <span [attr.draggable]="false">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>
+        </igx-chip>
+    </igx-chips-area>
 </ng-template>
 
 <ng-template #defaultFilter>
     <igx-chips-area #chipsArea class="igx-filtering-chips">
         <ng-container *ngFor="let item of expressionsList; let last = last; let index = index;" >
-            <igx-chip
-                *ngIf="isChipVisible(index)"
+            <igx-chip *ngIf="isChipVisible(index)"
                 [removable]="true"
                 [displayDensity]="'cosy'"
                 (click)="onChipClicked(item.expression)"
-                (keydown.enter)="onChipKeyDown($event, item.expression)"
                 (onRemove)="onChipRemoved($event, item)">
                 <igx-icon igxPrefix
                     fontSet="filtering-icons"
@@ -27,7 +25,7 @@
             </igx-chip>
             <span class="igx-filtering-chips__connector" *ngIf="!last && isChipVisible(index + 1)">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
         </ng-container>
-        <div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()" (keydown.enter)="onChipKeyDown($event)" tabindex="0">
+        <div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()">
             <igx-icon>filter_list</igx-icon>
             <igx-badge [value]="moreFiltersCount"></igx-badge>
         </div>

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts

@@ -28,7 +28,6 @@ import { IgxFilteringService, ExpressionUI } from '../grid-filtering.service';
 export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck {
 
     private baseClass = 'igx-grid__filtering-cell-indicator';
-    private currentTemplate = null;
 
     public expressionsList: ExpressionUI[];
     public moreFiltersCount = 0;
@@ -101,27 +100,18 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
 
     get template(): TemplateRef<any> {
         if (!this.column.filterable) {
-            this.currentTemplate = null;
             return null;
         }
-
         if (this.column.filterCellTemplate) {
-            this.currentTemplate = this.column.filterCellTemplate;
             return this.column.filterCellTemplate;
         }
-
         const expressionTree = this.column.filteringExpressionsTree;
         if (!expressionTree || expressionTree.filteringOperands.length === 0) {
-            this.currentTemplate = this.emptyFilter;
             return this.emptyFilter;
         }
-
         if (this.filteringService.isFilterComplex(this.column.field)) {
-            this.currentTemplate = this.complexFilter;
             return this.complexFilter;
         }
-
-        this.currentTemplate = this.defaultFilter;
         return this.defaultFilter;
     }
 
@@ -130,9 +120,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
      * @memberof IgxGridFilteringCellComponent
      */
     get context() {
-        return {
-            column: this.column
-        };
+        return { column: this.column };
     }
 
     /**
@@ -161,7 +149,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
     public onChipRemoved(eventArgs: IBaseChipEventArgs, item: ExpressionUI): void {
         const indexToRemove = this.expressionsList.indexOf(item);
         this.removeExpression(indexToRemove);
-        this.focusChip();
+        this.filteringService.grid.theadRow.nativeElement.focus();
     }
 
     /**
@@ -172,14 +160,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
         this.cdr.detectChanges();
     }
 
-    /**
-     * Chip keydown event handler.
-     */
-    public onChipKeyDown(eventArgs: KeyboardEvent, expression?: IFilteringExpression) {
-            eventArgs.preventDefault();
-            this.onChipClicked(expression);
-    }
-
     /**
      * Returns the filtering indicator class.
      */
@@ -190,23 +170,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
         };
     }
 
-    /**
-     * Focus a chip depending on the current visible template.
-     */
-    public focusChip(focusFirst: boolean = false) {
-        if (this.currentTemplate === this.defaultFilter) {
-            if (focusFirst) {
-                this.focusFirstElement();
-            } else {
-                this.focusElement();
-            }
-        } else if (this.currentTemplate === this.emptyFilter) {
-            this.ghostChip.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
-        } else if (this.currentTemplate === this.complexFilter) {
-            this.complexChip.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
-        }
-    }
-
     private removeExpression(indexToRemove: number) {
         if (indexToRemove === 0 && this.expressionsList.length === 1) {
             this.clearFiltering();
@@ -266,27 +229,4 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
             this.cdr.detectChanges();
         }
     }
-    private focusFirstElement(): void {
-        if (this.chipsArea.chipsList.length > 0) {
-            this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
-        } else {
-            this.moreIcon.nativeElement.focus();
-        }
-    }
-
-    private focusElement(): void {
-        if (this.filteringService.shouldFocusNext) {
-            if (!this.isMoreIconHidden() && this.chipsArea.chipsList.length === 0) {
-                this.moreIcon.nativeElement.focus();
-            } else {
-                this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
-            }
-        } else {
-            if (!this.isMoreIconHidden()) {
-                this.moreIcon.nativeElement.focus();
-            } else {
-                this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`).focus();
-            }
-        }
-    }
 }

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -1,7 +1,6 @@
 <!-- Have to apply styles inline because of the overlay outlet ... -->
 <igx-drop-down #inputGroupConditions [height]="'200px'" (onSelection)="onConditionsChanged($event)">
-    <igx-drop-down-item
-        *ngFor="let condition of conditions"
+    <igx-drop-down-item *ngFor="let condition of conditions"
         [value]="condition"
         [selected]="isConditionSelected(condition)">
         <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>