Merge pull request #13666 from IgniteUI/mdragnev/esf-16.1.x

Add support for navigation in the ESF search list

Author: ChronosSF

projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss

@@ -23,6 +23,11 @@
             @extend %igx-list-item-base !optional;
         }
 
+        // css class `igx-list__item-base--active
+        @include e(item-base, $m: active) {
+            @extend %igx-list-item-base--active !optional;
+        }
+
         // css class 'igx-list__item-right' applied to the panning container shown when the list item is panned left
         @include e(item-right) {
             @extend %igx-list-item-pan !optional;

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -292,6 +292,10 @@
         overflow-x: hidden;
         z-index: 0;
         border-radius: var-get($theme, 'border-radius');
+        
+        &:focus-visible {
+            outline-style: none;
+        }
     }
 
     %igx-list--empty {
@@ -367,6 +371,12 @@
         }
     }
 
+    %igx-list-item-base--active {
+        %igx-list-item-content {
+            @extend %igx-list-item-content--active;
+        }
+    }
+
     %igx-list-item-pan {
         position: absolute;
         visibility: hidden;

projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts

@@ -27,6 +27,15 @@ export class ExpressionUI {
     public isVisible = true;
 }
 
+/**
+ * @hidden @internal
+ */
+export class ActiveElement {
+    public index: number;
+    public id: string;
+    public checked: boolean;
+}
+
 export function generateExpressionsList(expressions: IFilteringExpressionsTree | IFilteringExpression,
     operator: FilteringLogic,
     expressionsUIs: ExpressionUI[]): void {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html

@@ -20,10 +20,11 @@
     </igx-icon>
 </igx-input-group>
 
-<igx-list #list [displayDensity]="esf.displayDensity" [isLoading]="isLoading" *ngIf="!isHierarchical()">
+<igx-list #list role="listbox" [displayDensity]="esf.displayDensity" [isLoading]="isLoading" *ngIf="!isHierarchical()" (keydown)="handleKeyDown($event)" tabindex="0"
+[attr.aria-activedescendant]="this.activeDescendant" (focus)="onFocus()" (focusout)="onFocusOut()">
     <div style="overflow: hidden; position: relative;">
-        <igx-list-item
-        *igxFor="let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">
+        <igx-list-item [class.igx-list__item-base--active]="focusedItem?.id === this.getItemId(i)" [attr.id]="getItemId(i)" role="option" 
+        *igxFor="let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">
             <igx-checkbox
                 [value]="item"
                 [tabindex]="-1"
@@ -136,7 +137,7 @@
 
 <footer class="igx-excel-filter__menu-footer">
     <div class="igx-excel-filter__cancel">
-        <button type="button"
+        <button type="button" #cancelButton
             igxButton="flat"
             [displayDensity]="esf.displayDensity"
             (click)="esf.cancel()">

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -6,7 +6,10 @@ import {
     TemplateRef,
     Directive,
     OnDestroy,
-    HostBinding
+    HostBinding,
+    Input,
+    ViewChildren,
+    QueryList
 } from '@angular/core';
 import { IgxInputDirective } from '../../../directives/input/input.directive';
 import { DisplayDensity } from '../../../core/density';
@@ -23,7 +26,7 @@ import { IChangeCheckboxEventArgs, IgxCheckboxComponent } from '../../../checkbo
 import { takeUntil } from 'rxjs/operators';
 import { cloneHierarchicalArray, PlatformUtil } from '../../../core/utils';
 import { BaseFilteringComponent } from './base-filtering.component';
-import { ExpressionUI, FilterListItem } from './common';
+import { ActiveElement, ExpressionUI, FilterListItem } from './common';
 import { IgxButtonDirective } from '../../../directives/button/button.directive';
 import { IgxCircularProgressBarComponent } from '../../../progressbar/progressbar.component';
 import { IgxTreeNodeComponent } from '../../../tree/tree-node/tree-node.component';
@@ -38,6 +41,7 @@ import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive'
 import { IgxIconComponent } from '../../../icon/icon.component';
 import { IgxInputGroupComponent } from '../../../input-group/input-group.component';
 import { ITreeNodeSelectionEvent } from '../../../tree/common';
+import { Navigate } from '../../../drop-down/drop-down.common';
 
 @Directive({
     selector: '[igxExcelStyleLoading]',
@@ -51,6 +55,7 @@ export class IgxExcelStyleLoadingValuesTemplateDirective {
     constructor(public template: TemplateRef<undefined>) { }
 }
 
+let NEXT_ID = 0;
 /**
  * A component used for presenting Excel style search UI.
  */
@@ -75,6 +80,9 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     @ViewChild('input', { read: IgxInputDirective, static: true })
     public searchInput: IgxInputDirective;
 
+    @ViewChild('cancelButton', {read: IgxButtonDirective, static: true })
+    protected cancelButton: IgxButtonDirective;
+
     /**
      * @hidden @internal
      */
@@ -102,7 +110,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-    @ViewChild(IgxForOfDirective, { static: true })
+    @ViewChild(IgxForOfDirective)
     protected virtDir: IgxForOfDirective<any>;
 
     /**
@@ -111,6 +119,9 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     @ViewChild('defaultExcelStyleLoadingValuesTemplate', { read: TemplateRef })
     protected defaultExcelStyleLoadingValuesTemplate: TemplateRef<any>;
 
+    @ViewChildren(IgxCheckboxComponent)
+    protected checkboxes: QueryList<IgxCheckboxComponent>;
+    
     /**
      * @hidden @internal
      */
@@ -196,10 +207,14 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    protected activeDescendant = '';
+
+    private _id = `igx-excel-style-search-${NEXT_ID++}`;
     private _isLoading;
     private _addToCurrentFilterItem: FilterListItem;
     private _selectAllItem: FilterListItem;
     private _hierarchicalSelectedItems: FilterListItem[];
+    private _focusedItem: ActiveElement = null;
     private destroy$ = new Subject<boolean>();
 
     constructor(public cdr: ChangeDetectorRef, public esf: BaseFilteringComponent, protected platform: PlatformUtil) {
@@ -303,7 +318,6 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                 selectAllBtn.indeterminate = true;
             }
         }
-        eventArgs.checkbox.nativeCheckbox.nativeElement.blur();
     }
 
     /**
@@ -368,6 +382,31 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         return 0;
     }
 
+    @HostBinding('attr.id')
+    @Input()
+    protected get id(): string {
+        return this._id;
+    }
+    protected set id(value: string) {
+        this._id = value;
+    }
+
+    protected getItemId(index: number): string {
+        return `${this.id}-item-${index}`;
+    }
+
+    protected setActiveDescendant() : void  {
+        this.activeDescendant = this.focusedItem?.id || '';
+    }
+
+    protected get focusedItem(): ActiveElement {
+        return this._focusedItem;
+    }
+
+    protected set focusedItem(val: ActiveElement) {
+        this._focusedItem = val;
+    }
+
     /**
      * @hidden @internal
      */
@@ -576,6 +615,57 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         this.esf.closeDropdown();
     }
 
+    protected handleKeyDown(event: KeyboardEvent) {
+        if (event) {
+            const key = event.key.toLowerCase();
+            const navKeys = ['space', 'spacebar', ' ',
+            'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
+                if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD
+                    return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+            switch (key) {
+                case 'arrowup':
+                case 'up':
+                    this.onArrowUpKeyDown();
+                    break;
+                case 'arrowdown':
+                case 'down':
+                    this.onArrowDownKeyDown();
+                    break;
+                case 'home':
+                    this.onHomeKeyDown();
+                    break;
+                case 'end':
+                    this.onEndKeyDown();
+                    break;
+                case 'space':
+                case 'spacebar':
+                case ' ':
+                    this.onActionKeyDown();
+                    break;
+                default:
+                    return;
+            }
+        }
+    }
+
+    protected onFocus() {
+        const firstIndexInView = this.virtDir.state.startIndex;
+        this.focusedItem = {
+            id: this.getItemId(firstIndexInView),
+            index: firstIndexInView,
+            checked: this.virtDir.igxForOf[firstIndexInView].isSelected
+        };
+        this.setActiveDescendant();
+    }
+
+    protected onFocusOut() {
+        this.focusedItem = null;
+        this.setActiveDescendant();
+    }
+
     /**
      * @hidden @internal
      */
@@ -676,4 +766,70 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
             this.searchValue = this.searchInput.value;
         }
     }
+
+    private onArrowUpKeyDown() {
+        if (this.focusedItem && this.focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+            this.searchInput.focus();
+            this.onFocusOut();
+        } else {
+            this.navigateItem(this.focusedItem ? this.focusedItem.index - 1 : 0);
+        }
+        this.setActiveDescendant();
+    }
+
+    private onArrowDownKeyDown() {
+        const lastIndex = this.virtDir.igxForOf.length - 1;
+        if (this.focusedItem && this.focusedItem.index === lastIndex) {
+            this.cancelButton.nativeElement.focus();
+            this.onFocusOut();
+        } else {
+            this.navigateItem(this.focusedItem ? this.focusedItem.index + 1 : 0);
+        }
+        this.setActiveDescendant();
+    }
+
+    private onHomeKeyDown() {
+        this.navigateItem(0);
+        this.setActiveDescendant();
+    }
+
+    private onEndKeyDown() {
+        this.navigateItem(this.virtDir.igxForOf.length - 1);
+        this.setActiveDescendant();
+    }
+
+    private onActionKeyDown() {
+        const dataItem = this.displayedListData[this.focusedItem.index];
+        const args: IChangeCheckboxEventArgs = {
+            checked: !dataItem.isSelected,
+            checkbox: this.checkboxes.find(x => x.value === dataItem)
+        }
+        this.onCheckboxChange(args);
+    }
+
+    private navigateItem(index: number) {
+        if (index === -1 || index >= this.virtDir.igxForOf.length) {
+            return;
+        }
+        const direction = index > (this.focusedItem ? this.focusedItem.index : -1) ? Navigate.Down : Navigate.Up;
+        const scrollRequired = this.isIndexOutOfBounds(index, direction);
+        this.focusedItem = {
+           id: this.getItemId(index),
+           index: index,
+           checked: this.virtDir.igxForOf[index].isSelected
+        };
+        if (scrollRequired) {
+            this.virtDir.scrollTo(index);
+        }
+    }
+
+    private isIndexOutOfBounds(index: number, direction: Navigate) {
+        const virtState = this.virtDir.state;
+        const currentPosition = this.virtDir.getScroll().scrollTop;
+        const itemPosition = this.virtDir.getScrollForIndex(index, direction === Navigate.Down);
+        const indexOutOfChunk = index < virtState.startIndex || index > virtState.chunkSize + virtState.startIndex;
+        const scrollNeeded = direction === Navigate.Down ? currentPosition < itemPosition : currentPosition > itemPosition;
+        const subRequired = indexOutOfChunk || scrollNeeded;
+        return subRequired;
+    }
 }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -5432,6 +5432,54 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             ControlsFunction.verifyButtonIsDisabled(applyButton);
         }));
 
+        it('Should be able to navigate inside the search list items', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            const list = searchComponent.querySelector('igx-list');
+            list.dispatchEvent(new Event('focus'));
+            tick(DEBOUNCETIME);
+            fix.detectChanges();
+            const listItems = list.querySelectorAll('igx-list-item');
+
+            // we expect only the first list item to be active when the list is focused
+            expect(listItems[0].classList.contains("igx-list__item-base--active")).toBeTrue();
+            expect(listItems[1].classList.contains("igx-list__item-base--active")).toBeFalse();
+
+            // on arrow down the second item should be active
+            UIInteractions.triggerKeyDownEvtUponElem('arrowdown', list, true);
+            fix.detectChanges();
+            expect(listItems[0].classList.contains("igx-list__item-base--active")).toBeFalse();
+            expect(listItems[1].classList.contains("igx-list__item-base--active")).toBeTrue();
+            
+            // on arrow up the first item should be active again
+            UIInteractions.triggerKeyDownEvtUponElem('arrowup', list, true);
+            fix.detectChanges();
+            expect(listItems[0].classList.contains("igx-list__item-base--active")).toBeTrue();
+            expect(listItems[1].classList.contains("igx-list__item-base--active")).toBeFalse();
+
+            // on home the first item should be active
+            UIInteractions.triggerKeyDownEvtUponElem('arrowdown', list, true);
+            fix.detectChanges();
+            expect(listItems[1].classList.contains("igx-list__item-base--active")).toBeTrue();
+            UIInteractions.triggerKeyDownEvtUponElem('home', list, true);
+            fix.detectChanges();
+            expect(listItems[0].classList.contains("igx-list__item-base--active")).toBeTrue();
+
+            // on space key on the first item (select all) all the checkbox should deselect
+            let checkboxes = list.querySelectorAll('igx-checkbox');
+            let checkboxesStatus = Array.from(checkboxes).map((checkbox: Element) => checkbox.querySelector('input').checked);
+            checkboxesStatus.forEach(status => {
+                expect(status).toBeTrue();
+            });
+            UIInteractions.triggerKeyDownEvtUponElem('space', list, true);
+            fix.detectChanges();
+            checkboxes = list.querySelectorAll('igx-checkbox');
+            checkboxesStatus = Array.from(checkboxes).map((checkbox: Element) => checkbox.querySelector('input').checked);
+            checkboxesStatus.forEach(status => {
+                expect(status).toBeFalse();
+            });
+        }));
+
         it('Should add list items to current filtered items when "Add to current filter selection" is selected.', fakeAsync(() => {
             const totalListItems = [];