Merge pull request #7205 from IgniteUI/ddincheva/kbChangeLog

Keyboard Navigation Changelog update

Author: zdrawku

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/grids/filtering/grid-filtering.service.ts

@@ -10,7 +10,6 @@ import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
 import { GridBaseAPIService } from '../api.service';
-import { IColumnVisibilityChangedEventArgs } from '../grid';
 import { IColumnResizeEventArgs } from '../common/events';
 import { GridType } from '../common/grid.interface';
 import { IgxDatePipeComponent } from '../common/pipes';
@@ -20,7 +19,6 @@ import { useAnimation } from '@angular/animations';
 import { fadeIn, fadeOut } from '../../animations/main';
 import { ExcelStylePositionStrategy } from './excel-style/excel-style-position-strategy';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
-import { IgxGridExcelStyleFilteringComponent } from './excel-style/grid.excel-style-filtering.component';
 
 const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 
@@ -69,7 +67,7 @@ export class IgxFilteringService implements OnDestroy {
         this.destroy$.complete();
     }
 
-    public toggleFilterDropdown(element, column) {
+    public toggleFilterDropdown(element, column, classRef) {
         if (!this._componentOverlayId || (this.column  && this.column.field !== column.field)) {
             this.column = column;
             const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
@@ -78,7 +76,7 @@ export class IgxFilteringService implements OnDestroy {
             this._filterMenuOverlaySettings.positionStrategy.settings.target = filterIconTarget;
             this._filterMenuOverlaySettings.outlet = (this.grid as any).outlet;
             this._componentOverlayId =
-                this._overlayService.attach(IgxGridExcelStyleFilteringComponent, this._filterMenuOverlaySettings, this._moduleRef);
+                this._overlayService.attach(classRef, this._filterMenuOverlaySettings, this._moduleRef);
             this._overlayService.show(this._componentOverlayId, this._filterMenuOverlaySettings);
         }
     }
@@ -98,7 +96,7 @@ export class IgxFilteringService implements OnDestroy {
         this._overlayService.onOpening.pipe(
             filter((overlay) => overlay.id === this._componentOverlayId),
             takeUntil(this.destroy$)).subscribe((eventArgs) => {
-                const instance = eventArgs.componentRef.instance as IgxGridExcelStyleFilteringComponent;
+                const instance = eventArgs.componentRef.instance as any;
                 if (instance) {
                     instance.initialize(this.column, this._overlayService, eventArgs.id);
                 }

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -7,6 +7,7 @@ import { IgxGridBaseDirective } from './grid-base.directive';
 import { IMultiRowLayoutNode } from './selection/selection.service';
 import { GridKeydownTargetType, GridSelectionMode, FilterMode } from './common/enums';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
+import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
 export interface ColumnGroupsCache {
     level: number;
     visibleIndex: number;
@@ -169,7 +170,7 @@ export class IgxGridNavigationService {
         if (ctrl && shift && key === 'l' && this.grid.allowFiltering && !column.columnGroup && column.filterable) {
             if (this.grid.filterMode === FilterMode.excelStyleFilter) {
                 const headerEl = this.grid.nativeElement.querySelector(`.igx-grid__th--active`);
-                this.grid.filteringService.toggleFilterDropdown(headerEl, column);
+                this.grid.filteringService.toggleFilterDropdown(headerEl, column, IgxGridExcelStyleFilteringComponent);
             } else {
                 this.performHorizontalScrollToCell(column.visibleIndex);
                 this.grid.filteringService.filteredColumn = column;

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

@@ -31,7 +31,7 @@
 <ng-container *ngIf="showExpanderIndicator">
     <div #indicator
          class="igx-grid__tree-grouping-indicator"
-         (click)="toggle($event)" (focus)="onIndicatorFocus()" tabindex="-1">
+         (click)="toggle($event)" (focus)="onIndicatorFocus()">
          <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit:  this }">
         </ng-container>
     </div>

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

@@ -20,6 +20,7 @@ import { IgxColumnResizingService } from '../resizing/resizing.service';
 import { Subject } from 'rxjs';
 import { GridType } from '../common/grid.interface';
 import { GridSelectionMode } from '../common/enums';
+import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/grid.excel-style-filtering.component';
 
 /**
  * @hidden
@@ -182,7 +183,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
 
 
     public onFilteringIconClick(event) {
-        this.grid.filteringService.toggleFilterDropdown(this.elementRef.nativeElement, this.column);
+        this.grid.filteringService.toggleFilterDropdown(this.elementRef.nativeElement, this.column, IgxGridExcelStyleFilteringComponent);
     }
 
     get grid(): any {

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

@@ -36,7 +36,7 @@
          *ngIf="!isLoading"
          class="igx-grid__tree-grouping-indicator"
          [ngStyle]="{'visibility': showIndicator ? 'visible' : 'hidden'}"
-         (click)="toggle($event)" (focus)="onIndicatorFocus()" tabindex="-1">
+         (click)="toggle($event)" (focus)="onIndicatorFocus()">
          <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit:  this }">
         </ng-container>
         <ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">