Skip to content

Commit 97f116f

Browse files
ygatesoupepkozlowski-opensource
authored andcommitted
feat(tabs): add aria
Fixes #1118 Closes #1120
1 parent c42f6c8 commit 97f116f

File tree

2 files changed

+20
-3
lines changed

2 files changed

+20
-3
lines changed

src/tabset/tabset.spec.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,23 @@ describe('ngb-tabset', () => {
8080
expectTabs(fixture.nativeElement, [true, false]);
8181
});
8282

83+
it('should have aria attributes', () => {
84+
const fixture = createTestComponent(`
85+
<ngb-tabset>
86+
<ngb-tab title="foo"><template ngbTabContent>Foo</template></ngb-tab>
87+
<ngb-tab title="bar"><template ngbTabContent>Bar</template></ngb-tab>
88+
</ngb-tabset>
89+
`);
90+
91+
const tabTitles = getTabTitles(fixture.nativeElement);
92+
const tabContent = getTabContent(fixture.nativeElement);
93+
94+
expect(tabTitles[0].getAttribute('role')).toBe('tab');
95+
expect(tabTitles[0].getAttribute('aria-expanded')).toBe('true');
96+
expect(tabTitles[1].getAttribute('aria-expanded')).toBe('false');
97+
expect(tabTitles[0].getAttribute('aria-controls')).toBe(tabContent[0].getAttribute('id'));
98+
});
99+
83100
it('should allow mix of text and HTML in tab titles', () => {
84101
const fixture = createTestComponent(`
85102
<ngb-tabset>

src/tabset/tabset.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,15 @@ export interface NgbTabChangeEvent {
8181
template: `
8282
<ul [class]="'nav nav-' + type" role="tablist">
8383
<li class="nav-item" *ngFor="let tab of tabs">
84-
<a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled"
85-
href (click)="!!select(tab.id)">
84+
<a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled"
85+
href (click)="!!select(tab.id)" role="tab" [attr.aria-controls]="tab.id + '-panel'" [attr.aria-expanded]="tab.id === activeId">
8686
{{tab.title}}<template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></template>
8787
</a>
8888
</li>
8989
</ul>
9090
<div class="tab-content">
9191
<template ngFor let-tab [ngForOf]="tabs">
92-
<div class="tab-pane active" *ngIf="tab.id === activeId" role="tabpanel" [attr.aria-labelledby]="tab.id">
92+
<div class="tab-pane active" *ngIf="tab.id === activeId" role="tabpanel" [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel">
9393
<template [ngTemplateOutlet]="tab.contentTpl.templateRef"></template>
9494
</div>
9595
</template>

0 commit comments

Comments
 (0)