Skip to content

Commit

Permalink
fix(tabs): enable keyboard wrapping and mark disabled tabs
Browse files Browse the repository at this point in the history
* According to [the a11y guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel), the tab arrow keys should wrap when they reach the end of the list. These changes enable wrapping.
* Adds `aria-disabled` to disabled tabs.
  • Loading branch information
crisbeto committed Jul 15, 2018
1 parent 3255cf3 commit 9ef8191
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 8 deletions.
6 changes: 0 additions & 6 deletions e2e/components/tabs-e2e.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,17 +51,11 @@ describe('tabs', () => {
pressKeys(right);
expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);

pressKeys(right);
expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);

pressKeys(left);
expect(await getFocusStates(tabLabels)).toEqual([false, true, false]);

pressKeys(left);
expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);

pressKeys(left);
expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
});
});
});
Expand Down
4 changes: 4 additions & 0 deletions src/lib/tabs/tab-group.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,7 @@ describe('MatTabGroup', () => {
fixture.detectChanges();
const labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
expect(labels.length).toBe(1);
expect(labels[0].nativeElement.getAttribute('aria-disabled')).toBe('true');
});

it('should set the disabled flag on tab', () => {
Expand All @@ -293,13 +294,16 @@ describe('MatTabGroup', () => {
let labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
expect(tabs[2].disabled).toBe(false);
expect(labels.length).toBe(1);
expect(labels[0].nativeElement.getAttribute('aria-disabled')).toBe('true');

fixture.componentInstance.isDisabled = true;
fixture.detectChanges();

expect(tabs[2].disabled).toBe(true);
labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
expect(labels.length).toBe(2);
expect(labels.every(label => label.nativeElement.getAttribute('aria-disabled') === 'true'))
.toBe(true);
});
});

Expand Down
3 changes: 2 additions & 1 deletion src/lib/tabs/tab-header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,8 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
};

this._keyManager = new FocusKeyManager(this._labelWrappers)
.withHorizontalOrientation(this._getLayoutDirection());
.withHorizontalOrientation(this._getLayoutDirection())
.withWrap();

this._keyManager.updateActiveItemIndex(0);

Expand Down
3 changes: 2 additions & 1 deletion src/lib/tabs/tab-label-wrapper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ export const _MatTabLabelWrapperMixinBase = mixinDisabled(MatTabLabelWrapperBase
selector: '[matTabLabelWrapper]',
inputs: ['disabled'],
host: {
'[class.mat-tab-disabled]': 'disabled'
'[class.mat-tab-disabled]': 'disabled',
'[attr.aria-disabled]': '!!disabled',
}
})
export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase implements CanDisable {
Expand Down

0 comments on commit 9ef8191

Please sign in to comment.