fix(accordion): disabled links are announced and focusable

Closes #1443
ng-bootstrap · Apr 6, 2017 · e836798 · e836798
1 parent 7d1dd97
commit e836798
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -234,6 +234,25 @@ describe('ngb-accordion', () => {
     expectOpenPanels(fixture.nativeElement, [true, false, false]);
   });
 
+  it('should have correct ARIA attributes when disabled', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    const tc = fixture.componentInstance;
+
+    tc.activeIds = ['one'];
+    fixture.detectChanges();
+    let disabledPanelLink: HTMLAnchorElement = getPanels(fixture.nativeElement)[0].querySelector('a');
+    expectOpenPanels(fixture.nativeElement, [true, false, false]);
+    expect(disabledPanelLink.getAttribute('aria-disabled')).toBe('false');
+    expect(disabledPanelLink.getAttribute('tabindex')).toBeNull();
+
+    tc.panels[0].disabled = true;
+    fixture.detectChanges();
+    expectOpenPanels(fixture.nativeElement, [false, false, false]);
+    expect(disabledPanelLink.getAttribute('aria-disabled')).toBe('true');
+    expect(disabledPanelLink.getAttribute('tabindex')).toBe('-1');
+  });
+
+
   it('should remove collapsed panels content from DOM', () => {
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -99,8 +99,8 @@ export interface NgbPanelChangeEvent {
     <template ngFor let-panel [ngForOf]="panels">
       <div role="tab" id="{{panel.id}}-header"
         [class]="'card-header ' + (panel.type ? 'card-'+panel.type: type ? 'card-'+type : '')" [class.active]="isOpen(panel.id)">
-        <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled"
-          [attr.aria-expanded]="isOpen(panel.id)" [attr.aria-controls]="panel.id">
+        <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled" [attr.tabindex]="(panel.disabled ? '-1' : null)"
+          [attr.aria-expanded]="isOpen(panel.id)" [attr.aria-controls]="panel.id" [attr.aria-disabled]="panel.disabled">
           {{panel.title}}<template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></template>
         </a>
       </div>