Merge branch 'master' into jberes-patch-1

Author: zdrawku

CHANGELOG.md

@@ -154,8 +154,13 @@ All notable changes for each version of this project will be documented in this
     - Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
 
 - `IgxDrag`
-    - New `igxDragIgnore` directive that allows children of the `igxDrag` element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
-    - New `dragDirection` input that can specify only one direction of dragging or both.
+    - Added `igxDragIgnore` directive that allows children of the `igxDrag` element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
+    - Added `dragDirection` input that can specify only one direction of dragging or both.
+
+- `IgxChip`
+    - Added support for tabIndex attribute applied to the main chip element.
+    - Added `tabIndex` input so it can support change detection as well.
+
 
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.

projects/igniteui-angular/src/lib/chips/chip.component.html

@@ -1,5 +1,5 @@
 <div #chipArea class="igx-chip__item"
-    [attr.tabindex]="chipTabindex"
+    [attr.tabIndex]="tabIndex"
     (keydown)="onChipKeyDown($event)"
     [igxDrag]="{chip: this}"
     [style.visibility]='hideBaseElement ? "hidden" : "visible"'
@@ -27,7 +27,7 @@
     <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
 
     <div class="igx-chip__remove" *ngIf="removable"
-        tabindex="0"
+        [attr.tabIndex]="tabIndex"
         (keydown)="onRemoveBtnKeyDown($event)"
         (pointerdown)="onRemoveMouseDown($event)"
         (mousedown)="onRemoveMouseDown($event)"

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -90,6 +90,25 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Input()
     public id = `igx-chip-${CHIP_ID++}`;
 
+    /**
+     * An @Input property that sets the value of `tabindex` attribute. If not provided it will use the element's tabindex if set.
+     * @example
+     * ```html
+     * <igx-chip [id]="'igx-chip-1'" [tabIndex]="1"></igx-chip>
+     * ```
+     */
+    @Input()
+    public set tabIndex(value: number) {
+        this._tabIndex = value;
+    }
+
+    public get tabIndex() {
+        if (this._tabIndex !== null) {
+            return this._tabIndex;
+        }
+        return !this.disabled ? 0 : null;
+    }
+
     /**
      * An @Input property that stores data related to the chip.
      * @example
@@ -353,6 +372,13 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Output()
     public onDragEnter = new EventEmitter<IChipEnterDragAreaEventArgs>();
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.tabIndex')
+    public hostTabIndex = null;
+
     /**
      * @hidden
      * @internal
@@ -433,16 +459,13 @@ export class IgxChipComponent extends DisplayDensityBase {
         return this.getComponentDensityClass('igx-chip__ghost');
     }
 
-    public get chipTabindex() {
-        return !this.disabled ? 0 : '';
-    }
-
     /**
      * @hidden
      * @internal
      */
     public hideBaseElement = false;
 
+    protected _tabIndex = null;
     protected _selected = false;
     protected _selectedItemClass = 'igx-chip__item--selected';
     protected _movedWhileRemoving = false;

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -27,6 +27,21 @@ import { ControlsFunction } from '../test-utils/controls-functions.spec';
                 <span #label [class]="'igx-chip__text'">{{chip.text}}</span>
                 <igx-icon igxPrefix fontSet="material">drag_indicator</igx-icon>
             </igx-chip>
+            <igx-chip #chipElem tabIndex="1" [id]="tabChipAttr">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem tabIndex="2" [disabled]="true" [id]="tabChipDisabled">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem [tabIndex]="3" [removable]="true" [id]="tabChipInput" >
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem tabIndex="4" [tabIndex]="1" [id]="tabChipBoth">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem tabIndex="5" [tabIndex]="1" [disabled]="true" [id]="tabChipAll">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
         </igx-chips-area>
     `
 })
@@ -114,7 +129,7 @@ describe('IgxChip', () => {
 
         it('should render chip area and chips inside it', () => {
             expect(chipArea.length).toEqual(1);
-            expect(chipArea[0].nativeElement.children.length).toEqual(4);
+            expect(chipArea[0].nativeElement.children.length).toEqual(9);
             expect(chipArea[0].nativeElement.children[0].tagName).toEqual('IGX-CHIP');
         });
 
@@ -169,7 +184,7 @@ describe('IgxChip', () => {
             // Assert default css class is applied
             const comfortableComponents = fix.debugElement.queryAll(By.css(CHIP_CLASS));
 
-            expect(comfortableComponents.length).toEqual(2);
+            expect(comfortableComponents.length).toEqual(7);
             expect(comfortableComponents[0].nativeElement).toBe(firstComponent.nativeElement);
             expect(comfortableComponents[1].nativeElement).toBe(secondComponent.nativeElement);
         });
@@ -212,6 +227,35 @@ describe('IgxChip', () => {
             expect(chipAreaElem.nativeElement.style.backgroundColor).toEqual(chipColor);
             expect(firstComponent.componentInstance.color).toEqual(chipColor);
         });
+
+        it('should apply correct tabIndex to the chip area only when tabIndex is set as property of the chip and chip is disabled', () => {
+            const firstTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[4];
+            expect(firstTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(firstTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('1');
+
+            // Chip is disabled, but attribute tabindex has bigger priority.
+            const secondTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[5];
+            expect(secondTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(secondTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('2');
+        });
+
+        it('should apply correct tab indexes when tabIndex and removeTabIndex are set as inputs', () => {
+            const thirdTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[6];
+            const deleteBtn = ControlsFunction.getChipRemoveButton(thirdTabChip.componentInstance.chipArea.nativeElement);
+            expect(thirdTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(thirdTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('3');
+            expect(deleteBtn.getAttribute('tabindex')).toEqual('3');
+
+            // tabIndex attribute has higher priority than tabIndex.
+            const fourthTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[7];
+            expect(fourthTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(fourthTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('1');
+
+            // tabIndex attribute has higher priority than tabIndex input and chip being disabled.
+            const fifthTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[8];
+            expect(fifthTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(fifthTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('1');
+        });
     });
 
     describe('Interactions Tests: ', () => {
@@ -241,30 +285,30 @@ describe('IgxChip', () => {
         });
 
         it('should delete chip when space button is pressed on delete button', () => {
-            HelperTestFunctions.verifyChipsCount(fix, 4);
+            HelperTestFunctions.verifyChipsCount(fix, 9);
             const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
             const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
             // Removes chip with id City, because country chip is unremovable
             UIInteractions.triggerKeyDownEvtUponElem(' ', deleteButtonElement, true);
             fix.detectChanges();
 
-            HelperTestFunctions.verifyChipsCount(fix, 3);
+            HelperTestFunctions.verifyChipsCount(fix, 8);
 
             const chipComponentsIds = fix.componentInstance.chipList.map(c => c.id);
             expect(chipComponentsIds.length).toEqual(3);
             expect(chipComponentsIds).not.toContain('City');
         });
 
         it('should delete chip when enter button is pressed on delete button', () => {
-            HelperTestFunctions.verifyChipsCount(fix, 4);
+            HelperTestFunctions.verifyChipsCount(fix, 9);
 
             const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
             const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
             // Removes chip with id City, because country chip is unremovable
             UIInteractions.triggerKeyDownEvtUponElem('Enter', deleteButtonElement, true);
             fix.detectChanges();
 
-            HelperTestFunctions.verifyChipsCount(fix, 3);
+            HelperTestFunctions.verifyChipsCount(fix, 8);
 
             const chipComponentsIds = fix.componentInstance.chipList.map(c => c.id);
             expect(chipComponentsIds.length).toEqual(3);