Merge pull request #5767 from IgniteUI/ddimitrov/fix-5765-8.1.x

Fix button group keyboard navigation

Author: zdrawku

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -78,6 +78,12 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     @Input()
     public id = `igx-buttongroup-${NEXT_ID++}`;
 
+    /**
+     * @hidden
+     */
+    @HostBinding('style.zIndex')
+    public zIndex = 0;
+
     /**
      * Allows you to set a style using the `itemContentCssClass` input.
      * The value should be the CSS class name that will be applied to the button group.
@@ -251,7 +257,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     constructor(private _cdr: ChangeDetectorRef, private _renderer: Renderer2,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
-            super(_displayDensityOptions);
+        super(_displayDensityOptions);
     }
 
     /**
@@ -360,7 +366,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * @hidden
      */
     public ngAfterContentInit() {
-        this.templateButtons.forEach( (button) => {
+        this.templateButtons.forEach((button) => {
             if (!button.initialDensity) {
                 button.displayDensity = this.displayDensity;
             }

projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

@@ -1,11 +1,20 @@
 <div class="igx-button-group" role="group" [class.igx-button-group--vertical]="isVertical">
-    <span *ngFor="let button of values; let i = 'index'" type="button" igxButton="flat" [displayDensity]="displayDensity" [selected]="button.selected"
-        [attr.data-togglable]="button.togglable" [disabled]="disabled || button.disabled" [igxButtonColor]="button.color"
-        [igxButtonBackground]="button.bgcolor" [igxLabel]="button.label" [igxRipple]="button.ripple">
+    <button *ngFor="let button of values; let i = 'index'"
+        type="button"
+        igxButton="flat"
+        [displayDensity]="displayDensity"
+        [selected]="button.selected"
+        [attr.data-togglable]="button.togglable"
+        [disabled]="disabled || button.disabled"
+        [igxButtonColor]="button.color"
+        [igxButtonBackground]="button.bgcolor"
+        [igxLabel]="button.label"
+        [igxRipple]="button.ripple"
+    >
         <div class="igx-button-group__item-content {{ itemContentCssClass }}">
             <igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
             <span *ngIf="button.label">{{button.label}}</span>
         </div>
-    </span>
+    </button>
     <ng-content></ng-content>
 </div>

projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts

@@ -232,6 +232,25 @@ describe('IgxButtonGroup', () => {
         expect(groupChildren[1].element.nativeElement.classList.contains('igx-button--cosy')).toBe(true, 'Missing density class!');
     });
 
+    it('Button Group - should support tab navigation', () => {
+        const fixture = TestBed.createComponent(InitButtonGroupWithValuesComponent);
+        fixture.detectChanges();
+
+        const buttongroup = fixture.componentInstance.buttonGroup;
+        const groupChildren = buttongroup.buttons;
+
+        for (let i = 0; i < groupChildren.length; i++) {
+            const button = groupChildren[i];
+            expect(button.nativeElement.tagName).toBe('BUTTON');
+
+            if (i < groupChildren.length - 1) {
+                expect(button.nativeElement.disabled).toBe(false);
+            } else {
+                expect(button.nativeElement.disabled).toBe(true);
+            }
+        }
+    });
+
 });
 
 @Component({ template: `<igx-buttongroup [values]="buttons"></igx-buttongroup>` })

projects/igniteui-angular/src/lib/directives/button/button.directive.ts

@@ -48,6 +48,11 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     private _backgroundColor: string;
 
+    /**
+     *@hidden
+     */
+    private _disabled: boolean;
+
     constructor(public element: ElementRef, private _renderer: Renderer2,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
         super(_displayDensityOptions);
@@ -141,6 +146,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     @Input() set disabled(val) {
         val = !!val;
+        this._disabled = val;
         if (val) {
             this._renderer.addClass(this.nativeElement, `${this._cssClassPrefix}--disabled`);
         } else {
@@ -182,6 +188,14 @@ export class IgxButtonDirective extends DisplayDensityBase {
         return this._type === 'fab' && this.displayDensity === DisplayDensity.compact;
     }
 
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.disabled')
+    public get disabledAttribute() {
+        return this._disabled ? this._disabled : null;
+    }
+
     /**
      * Gets or sets whether the button is selected.
      * Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
@@ -195,7 +209,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
     /**
      *@hidden
      */
-    @HostListener('click',  ['$event'])
+    @HostListener('click', ['$event'])
     public onClick(ev) {
         this.buttonClick.emit(ev);
     }