Skip to content

Commit e34a290

Browse files
committed
fix(tabs): unable to tab to tab content
Currently the tab's content doesn't have a `tabindex` which means that if it doesn't have any focusable elements, users with assistive technology will skip over the content completely. These changes add a `tabindex` to the content of the currently-selected tab, based on [the example of accessible tabs from the ARIA best practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html).
1 parent 64010d7 commit e34a290

File tree

3 files changed

+22
-0
lines changed

3 files changed

+22
-0
lines changed

src/lib/tabs/tab-group.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
*ngFor="let tab of _tabs; let i = index"
3737
[id]="_getTabContentId(i)"
3838
[attr.aria-labelledby]="_getTabLabelId(i)"
39+
[attr.tabindex]="selectedIndex === i ? 0 : null"
3940
[class.mat-tab-body-active]="selectedIndex == i"
4041
[content]="tab.content"
4142
[position]="tab.position"

src/lib/tabs/tab-group.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
@include mat-fill;
4949
display: block;
5050
overflow: hidden;
51+
outline: 0;
5152

5253
// Fix for auto content wrapping in IE11
5354
flex-basis: 100%;

src/lib/tabs/tab-group.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,26 @@ describe('MatTabGroup', () => {
277277
.toHaveBeenCalledWith(jasmine.objectContaining({index: 0}));
278278
});
279279

280+
it('should set the correct tabindex on the tab content elements', fakeAsync(() => {
281+
fixture.detectChanges();
282+
tick();
283+
284+
const contentElements: NodeListOf<HTMLElement> =
285+
fixture.nativeElement.querySelectorAll('.mat-tab-body');
286+
287+
expect(contentElements[0].hasAttribute('tabindex')).toBe(false);
288+
expect(contentElements[1].getAttribute('tabindex')).toBe('0');
289+
expect(contentElements[2].hasAttribute('tabindex')).toBe(false);
290+
291+
fixture.componentInstance.selectedIndex = 2;
292+
fixture.detectChanges();
293+
tick();
294+
295+
expect(contentElements[0].hasAttribute('tabindex')).toBe(false);
296+
expect(contentElements[1].hasAttribute('tabindex')).toBe(false);
297+
expect(contentElements[2].getAttribute('tabindex')).toBe('0');
298+
}));
299+
280300
});
281301

282302
describe('aria labelling', () => {

0 commit comments

Comments
 (0)