fix(tabset): remove aria-expanded and use aria-selected instead

Closes #3292
ng-bootstrap · Sep 3, 2019 · d67bea2 · d67bea2
1 parent 7a17683
commit d67bea2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts
@@ -96,15 +96,14 @@ describe('ngb-tabset', () => {
     const tabContent = getTabContent(compiled);
 
     expect(tabTitles[0].getAttribute('role')).toBe('tab');
-    expect(tabTitles[0].getAttribute('aria-expanded')).toBe('true');
+    expect(tabTitles[0].getAttribute('aria-selected')).toBe('true');
     expect(tabTitles[0].getAttribute('aria-controls')).toBe(tabContent[0].getAttribute('id'));
 
     expect(tabContent[0].getAttribute('role')).toBe('tabpanel');
-    expect(tabContent[0].getAttribute('aria-expanded')).toBe('true');
     expect(tabContent[0].getAttribute('aria-labelledby')).toBe(tabTitles[0].id);
 
     expect(tabTitles[1].getAttribute('role')).toBe('tab');
-    expect(tabTitles[1].getAttribute('aria-expanded')).toBe('false');
+    expect(tabTitles[1].getAttribute('aria-selected')).toBe('false');
     expect(tabTitles[1].getAttribute('aria-controls')).toBeNull();
   });
 
@@ -121,13 +120,13 @@ describe('ngb-tabset', () => {
     const tabContent = getTabContent(compiled);
 
     expect(tabTitles[0].getAttribute('aria-controls')).toBe(tabContent[0].getAttribute('id'));
-    expect(tabContent[0].getAttribute('aria-expanded')).toBe('true');
+    expect(tabTitles[0].getAttribute('aria-selected')).toBe('true');
 
     expect(tabTitles[1].getAttribute('aria-controls')).toBeNull();
     expect(tabContent[1]).toBeUndefined();
   });
 
-  it('should have aria-controls and aria-expanded when tab content is hidden', () => {
+  it('should have aria-controls and aria-selected when tab content is hidden', () => {
     const fixture = createTestComponent(`
       <ngb-tabset [destroyOnHide]="false">
         <ngb-tab title="foo"><ng-template ngbTabContent>Foo</ng-template></ngb-tab>
@@ -140,10 +139,10 @@ describe('ngb-tabset', () => {
     const tabContent = getTabContent(compiled);
 
     expect(tabTitles[0].getAttribute('aria-controls')).toBe(tabContent[0].id);
-    expect(tabContent[0].getAttribute('aria-expanded')).toBe('true');
+    expect(tabTitles[0].getAttribute('aria-selected')).toBe('true');
 
     expect(tabTitles[1].getAttribute('aria-controls')).toBe(tabContent[1].id);
-    expect(tabContent[1].getAttribute('aria-expanded')).toBe('false');
+    expect(tabTitles[1].getAttribute('aria-selected')).toBe('false');
   });
 
   it('should allow mix of text and HTML in tab titles', () => {

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -103,7 +103,7 @@ export interface NgbTabChangeEvent {
         <a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled"
           href (click)="select(tab.id); $event.preventDefault()" role="tab" [attr.tabindex]="(tab.disabled ? '-1': undefined)"
           [attr.aria-controls]="(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)"
-          [attr.aria-expanded]="tab.id === activeId" [attr.aria-disabled]="tab.disabled">
+          [attr.aria-selected]="tab.id === activeId" [attr.aria-disabled]="tab.disabled">
           {{tab.title}}<ng-template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template>
         </a>
       </li>
@@ -114,8 +114,7 @@ export interface NgbTabChangeEvent {
           class="tab-pane {{tab.id === activeId ? 'active' : null}}"
           *ngIf="!destroyOnHide || tab.id === activeId"
           role="tabpanel"
-          [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel"
-          [attr.aria-expanded]="tab.id === activeId">
+          [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel">
           <ng-template [ngTemplateOutlet]="tab.contentTpl?.templateRef"></ng-template>
         </div>
       </ng-template>