Skip to content

Commit 80e7d77

Browse files
zdrawkuzdrawku
authored
Merge pull request #5766 from IgniteUI/ddimitrov/fix-5765
Fix button group keyboard navigation
2 parents 2483e63 + 3704972 commit 80e7d77

File tree

5 files changed

+65
-17
lines changed

5 files changed

+65
-17
lines changed

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,12 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
7979
@Input()
8080
public id = `igx-buttongroup-${NEXT_ID++}`;
8181

82+
/**
83+
* @hidden
84+
*/
85+
@HostBinding('style.zIndex')
86+
public zIndex = 0;
87+
8288
/**
8389
* Allows you to set a style using the `itemContentCssClass` input.
8490
* The value should be the CSS class name that will be applied to the button group.
@@ -252,7 +258,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
252258

253259
constructor(private _cdr: ChangeDetectorRef, private _renderer: Renderer2,
254260
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
255-
super(_displayDensityOptions);
261+
super(_displayDensityOptions);
256262
}
257263

258264
/**
@@ -361,7 +367,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
361367
* @hidden
362368
*/
363369
public ngAfterContentInit() {
364-
this.templateButtons.forEach( (button) => {
370+
this.templateButtons.forEach((button) => {
365371
if (!button.initialDensity) {
366372
button.displayDensity = this.displayDensity;
367373
}

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

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
<div class="igx-button-group" role="group" [class.igx-button-group--vertical]="isVertical">
2-
<span *ngFor="let button of values; let i = 'index'" type="button" igxButton="flat" [displayDensity]="displayDensity" [selected]="button.selected"
3-
[attr.data-togglable]="button.togglable" [disabled]="disabled || button.disabled" [igxButtonColor]="button.color"
4-
[igxButtonBackground]="button.bgcolor" [igxLabel]="button.label" [igxRipple]="button.ripple">
2+
<button *ngFor="let button of values; let i = 'index'"
3+
type="button"
4+
igxButton="flat"
5+
[displayDensity]="displayDensity"
6+
[selected]="button.selected"
7+
[attr.data-togglable]="button.togglable"
8+
[disabled]="disabled || button.disabled"
9+
[igxButtonColor]="button.color"
10+
[igxButtonBackground]="button.bgcolor"
11+
[igxLabel]="button.label"
12+
[igxRipple]="button.ripple"
13+
>
514
<div class="igx-button-group__item-content {{ itemContentCssClass }}">
615
<igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
716
<span *ngIf="button.label">{{button.label}}</span>
817
</div>
9-
</span>
18+
</button>
1019
<ng-content></ng-content>
1120
</div>

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

+19
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,25 @@ describe('IgxButtonGroup', () => {
232232
expect(groupChildren[1].element.nativeElement.classList.contains('igx-button--cosy')).toBe(true, 'Missing density class!');
233233
});
234234

235+
it('Button Group - should support tab navigation', () => {
236+
const fixture = TestBed.createComponent(InitButtonGroupWithValuesComponent);
237+
fixture.detectChanges();
238+
239+
const buttongroup = fixture.componentInstance.buttonGroup;
240+
const groupChildren = buttongroup.buttons;
241+
242+
for (let i = 0; i < groupChildren.length; i++) {
243+
const button = groupChildren[i];
244+
expect(button.nativeElement.tagName).toBe('BUTTON');
245+
246+
if (i < groupChildren.length - 1) {
247+
expect(button.nativeElement.disabled).toBe(false);
248+
} else {
249+
expect(button.nativeElement.disabled).toBe(true);
250+
}
251+
}
252+
});
253+
235254
});
236255

237256
@Component({ template: `<igx-buttongroup [values]="buttons"></igx-buttongroup>` })

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

+15-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@ export class IgxButtonDirective extends DisplayDensityBase {
4848
*/
4949
private _backgroundColor: string;
5050

51+
/**
52+
*@hidden
53+
*/
54+
private _disabled: boolean;
55+
5156
constructor(public element: ElementRef, private _renderer: Renderer2,
5257
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
5358
super(_displayDensityOptions);
@@ -141,6 +146,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
141146
*/
142147
@Input() set disabled(val) {
143148
val = !!val;
149+
this._disabled = val;
144150
if (val) {
145151
this._renderer.addClass(this.nativeElement, `${this._cssClassPrefix}--disabled`);
146152
} else {
@@ -182,6 +188,14 @@ export class IgxButtonDirective extends DisplayDensityBase {
182188
return this._type === 'fab' && this.displayDensity === DisplayDensity.compact;
183189
}
184190

191+
/**
192+
* @hidden
193+
*/
194+
@HostBinding('attr.disabled')
195+
public get disabledAttribute() {
196+
return this._disabled ? this._disabled : null;
197+
}
198+
185199
/**
186200
* Gets or sets whether the button is selected.
187201
* Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
@@ -195,7 +209,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
195209
/**
196210
*@hidden
197211
*/
198-
@HostListener('click', ['$event'])
212+
@HostListener('click', ['$event'])
199213
public onClick(ev) {
200214
this.buttonClick.emit(ev);
201215
}

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -2116,7 +2116,7 @@ describe('IgxGrid - Advanced Filtering', () => {
21162116

21172117
// Click "Ungroup" in context menu.
21182118
const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
2119-
buttons[1].click();
2119+
buttons[3].click();
21202120
tick(100);
21212121
fix.detectChanges();
21222122

@@ -2152,7 +2152,7 @@ describe('IgxGrid - Advanced Filtering', () => {
21522152
fix.detectChanges();
21532153

21542154
// Verify the ungroup button is disabled.
2155-
const ungroupButton = GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[1];
2155+
const ungroupButton = GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[3];
21562156
expect(ungroupButton.classList.contains('igx-button--disabled')).toBe(true);
21572157
}));
21582158

@@ -2200,7 +2200,7 @@ describe('IgxGrid - Advanced Filtering', () => {
22002200

22012201
// Click "Delete" in context menu.
22022202
const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
2203-
buttons[2].click();
2203+
buttons[4].click();
22042204
tick(100);
22052205
fix.detectChanges();
22062206

@@ -2469,9 +2469,9 @@ describe('IgxGrid - Advanced Filtering', () => {
24692469
.querySelectorAll('.igx-button-group__item-content')));
24702470
expect(buttonGroupItems[0].textContent).toBe('My and');
24712471
expect(buttonGroupItems[1].textContent).toBe('My or');
2472-
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[1].querySelector('span').innerText)
2472+
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[3].querySelector('span').innerText)
24732473
.toBe('My ungroup');
2474-
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[2].querySelector('span').innerText)
2474+
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[4].querySelector('span').innerText)
24752475
.toBe('My delete');
24762476

24772477
// Close context menu.
@@ -2586,9 +2586,9 @@ describe('IgxGrid - Advanced Filtering', () => {
25862586
.querySelectorAll('.igx-button-group__item-content')));
25872587
expect(buttonGroupItems[0].textContent).toBe('My and');
25882588
expect(buttonGroupItems[1].textContent).toBe('My or');
2589-
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[1].querySelector('span').innerText)
2589+
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[3].querySelector('span').innerText)
25902590
.toBe('My ungroup');
2591-
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[2].querySelector('span').innerText)
2591+
expect(GridFunctions.getAdvancedFilteringContextMenuButtons(fix)[4].querySelector('span').innerText)
25922592
.toBe('My delete');
25932593

25942594
// Close context menu.
@@ -2817,10 +2817,10 @@ function verifyContextMenuType(fix, shouldBeContextualGroup: boolean) {
28172817
expect(GridFunctions.getAdvancedFilteringContextMenuButtonGroup(fix) !== null).toBe(shouldBeContextualGroup);
28182818

28192819
if (shouldBeContextualGroup) {
2820-
expect(contextMenuButtons.length).toBe(3, 'incorrect buttons count in context menu');
2820+
expect(contextMenuButtons.length).toBe(5, 'incorrect buttons count in context menu');
28212821
expect(contextMenuButtons[0].innerText.toLowerCase()).toBe('close');
2822-
expect(contextMenuButtons[1].querySelector('span').innerText.toLowerCase()).toBe('ungroup');
2823-
expect(contextMenuButtons[2].querySelector('span').innerText.toLowerCase()).toBe('delete');
2822+
expect(contextMenuButtons[3].querySelector('span').innerText.toLowerCase()).toBe('ungroup');
2823+
expect(contextMenuButtons[4].querySelector('span').innerText.toLowerCase()).toBe('delete');
28242824
} else {
28252825
expect(contextMenuButtons.length).toBe(4, 'incorrect buttons count in context menu');
28262826
expect(contextMenuButtons[0].innerText.toLowerCase()).toBe('close');

0 commit comments

Comments
 (0)