Skip to content

Commit 8096990

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 e0634c9 commit 8096990

File tree

3 files changed

+23
-0
lines changed

3 files changed

+23
-0
lines changed

src/material/tabs/tab-group.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
*ngFor="let tab of _tabs; let i = index"
4141
[id]="_getTabContentId(i)"
4242
[attr.aria-labelledby]="_getTabLabelId(i)"
43+
[attr.tabindex]="selectedIndex === i ? 0 : null"
4344
[class.mat-tab-body-active]="selectedIndex == i"
4445
[content]="tab.content!"
4546
[position]="tab.position!"

src/material/tabs/tab-group.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
@include mat-fill;
5151
display: block;
5252
overflow: hidden;
53+
outline: 0;
5354

5455
// Fix for auto content wrapping in IE11
5556
flex-basis: 100%;

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,27 @@ describe('MatTabGroup', () => {
298298
expect(tabLabelNativeElements.every(el => el.classList.contains('mat-focus-indicator')))
299299
.toBe(true);
300300
});
301+
302+
it('should set the correct tabindex on the tab content elements', fakeAsync(() => {
303+
fixture.detectChanges();
304+
tick();
305+
306+
const contentElements: NodeListOf<HTMLElement> =
307+
fixture.nativeElement.querySelectorAll('.mat-tab-body');
308+
309+
expect(contentElements[0].hasAttribute('tabindex')).toBe(false);
310+
expect(contentElements[1].getAttribute('tabindex')).toBe('0');
311+
expect(contentElements[2].hasAttribute('tabindex')).toBe(false);
312+
313+
fixture.componentInstance.selectedIndex = 2;
314+
fixture.detectChanges();
315+
tick();
316+
317+
expect(contentElements[0].hasAttribute('tabindex')).toBe(false);
318+
expect(contentElements[1].hasAttribute('tabindex')).toBe(false);
319+
expect(contentElements[2].getAttribute('tabindex')).toBe('0');
320+
}));
321+
301322
});
302323

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

0 commit comments

Comments
 (0)