File tree Expand file tree Collapse file tree 2 files changed +20
-3
lines changed Expand file tree Collapse file tree 2 files changed +20
-3
lines changed Original file line number Diff line number Diff line change @@ -80,6 +80,23 @@ describe('ngb-tabset', () => {
80
80
expectTabs ( fixture . nativeElement , [ true , false ] ) ;
81
81
} ) ;
82
82
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
+
83
100
it ( 'should allow mix of text and HTML in tab titles' , ( ) => {
84
101
const fixture = createTestComponent ( `
85
102
<ngb-tabset>
Original file line number Diff line number Diff line change @@ -81,15 +81,15 @@ export interface NgbTabChangeEvent {
81
81
template : `
82
82
<ul [class]="'nav nav-' + type" role="tablist">
83
83
<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" >
86
86
{{tab.title}}<template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></template>
87
87
</a>
88
88
</li>
89
89
</ul>
90
90
<div class="tab-content">
91
91
<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" >
93
93
<template [ngTemplateOutlet]="tab.contentTpl.templateRef"></template>
94
94
</div>
95
95
</template>
You can’t perform that action at this time.
0 commit comments