diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts index 44593fece7..e9dbccb1f1 100644 --- 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(` Foo @@ -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 index d70be2dbf6..356cac9f26 100644 --- a/src/tabset/tabset.ts +++ b/src/tabset/tabset.ts @@ -103,7 +103,7 @@ export interface NgbTabChangeEvent { + [attr.aria-selected]="tab.id === activeId" [attr.aria-disabled]="tab.disabled"> {{tab.title}} @@ -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">