fix(accordion): remove unneded aria-selected

Fixes #1159 Closes #1438
ng-bootstrap · Apr 5, 2017 · 92ae3fd · 92ae3fd
1 parent a29da45
commit 92ae3fd
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 43 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -31,14 +31,6 @@ function expectOpenPanels(nativeEl: HTMLElement, openPanelsDef: boolean[]) {
   expect(result).toEqual(openPanelsDef);
 }
 
-function expectAriaSelected(nativeEl: HTMLElement, ariaSelectedPanelsDef: boolean[]) {
-  const panels = getPanels(nativeEl);
-  expect(panels.length).toBe(ariaSelectedPanelsDef.length);
-
-  const result = panels.map(panel => (panel.getAttribute('aria-selected') === 'true'));
-  expect(result).toEqual(ariaSelectedPanelsDef);
-}
-
 describe('ngb-accordion', () => {
   let html = `
     <ngb-accordion #acc="ngbAccordion" [closeOthers]="closeOthers" [activeIds]="activeIds"
@@ -69,7 +61,6 @@ describe('ngb-accordion', () => {
     const el = fixture.nativeElement;
     fixture.detectChanges();
     expectOpenPanels(el, [false, false, false]);
-    expectAriaSelected(el, [false, false, false]);
     expect(accordionEl.getAttribute('role')).toBe('tablist');
     expect(accordionEl.getAttribute('aria-multiselectable')).toBe('true');
   });
@@ -329,32 +320,6 @@ describe('ngb-accordion', () => {
     expect(el[2]).toHaveCssClass('card-warning');
   });
 
-  it('should toggle aria-selected attribute of the focused panel', () => {
-    const fixture = TestBed.createComponent(TestComponent);
-    fixture.detectChanges();
-
-    const headingLinks = fixture.debugElement.queryAll(By.css('.card-header a'));
-
-    headingLinks[0].triggerEventHandler('focus', {});
-    fixture.detectChanges();
-    expectAriaSelected(fixture.nativeElement, [true, false, false]);
-
-    headingLinks[0].triggerEventHandler('blur', {});
-    headingLinks[1].triggerEventHandler('focus', {});
-    fixture.detectChanges();
-    expectAriaSelected(fixture.nativeElement, [false, true, false]);
-
-    headingLinks[1].triggerEventHandler('blur', {});
-    headingLinks[2].triggerEventHandler('focus', {});
-    fixture.detectChanges();
-    expectAriaSelected(fixture.nativeElement, [false, false, true]);
-
-    headingLinks[2].triggerEventHandler('blur', {});
-    headingLinks[1].triggerEventHandler('focus', {});
-    fixture.detectChanges();
-    expectAriaSelected(fixture.nativeElement, [false, true, false]);
-  });
-
   describe('Custom config', () => {
     let config: NgbAccordionConfig;
 

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -39,11 +39,6 @@ export class NgbPanelContent {
  */
 @Directive({selector: 'ngb-panel'})
 export class NgbPanel {
-  /**
-   * Defines if the tab control is focused
-   */
-  focused: boolean = false;
-
   /**
    *  A flag determining whether the panel is disabled or not.
    *  When disabled, the panel cannot be toggled.
@@ -102,10 +97,9 @@ export interface NgbPanelChangeEvent {
   template: `
   <div class="card">
     <template ngFor let-panel [ngForOf]="panels">
-      <div role="tab" id="{{panel.id}}-header" [attr.aria-selected]="panel.focused"
+      <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)" (focus)="panel.focused = true" 
-          (blur)="panel.focused = false" [class.text-muted]="panel.disabled" 
+        <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled"
           [attr.aria-expanded]="isOpen(panel.id)" [attr.aria-controls]="panel.id">
           {{panel.title}}<template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></template>
         </a>