fix(expansion-panel): remove closed panel contents from tab order (#5441

) Fixes being able to tab into the content of a closed `md-expansion-panel`. Fixes #5432.
angular · Jul 9, 2017 · 1efa594 · 1efa594
1 parent 97494f7
commit 1efa594
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
@@ -57,8 +57,8 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
   ],
   animations: [
     trigger('bodyExpansion', [
-      state('collapsed', style({height: '0px'})),
-      state('expanded', style({height: '*'})),
+      state('collapsed', style({height: '0px', visibility: 'hidden'})),
+      state('expanded', style({height: '*', visibility: 'visible'})),
       transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
     ]),
     trigger('displayMode', [

diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts
@@ -1,15 +1,15 @@
-import {async, TestBed} from '@angular/core/testing';
+import {async, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdExpansionModule} from './index';
 
 
 describe('MdExpansionPanel', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule,
+        NoopAnimationsModule,
         MdExpansionModule
       ],
       declarations: [
@@ -20,9 +20,9 @@ describe('MdExpansionPanel', () => {
   }));
 
   it('should expanded and collapse the panel', () => {
-    let fixture = TestBed.createComponent(PanelWithContent);
-    let contentEl = fixture.debugElement.query(By.css('.mat-expansion-panel-content'));
-    let headerEl = fixture.debugElement.query(By.css('.mat-expansion-panel-header'));
+    const fixture = TestBed.createComponent(PanelWithContent);
+    const contentEl = fixture.debugElement.query(By.css('.mat-expansion-panel-content'));
+    const headerEl = fixture.debugElement.query(By.css('.mat-expansion-panel-header'));
     fixture.detectChanges();
     expect(headerEl.classes['mat-expanded']).toBeFalsy();
     expect(contentEl.classes['mat-expanded']).toBeFalsy();
@@ -34,7 +34,7 @@ describe('MdExpansionPanel', () => {
   });
 
   it('emit correct events for change in panel expanded state', () => {
-    let fixture = TestBed.createComponent(PanelWithContent);
+    const fixture = TestBed.createComponent(PanelWithContent);
     fixture.componentInstance.expanded = true;
     fixture.detectChanges();
     expect(fixture.componentInstance.openCallback).toHaveBeenCalled();
@@ -45,17 +45,37 @@ describe('MdExpansionPanel', () => {
   });
 
   it('creates a unique panel id for each panel', () => {
-    let fixtureOne = TestBed.createComponent(PanelWithContent);
-    let headerElOne = fixtureOne.nativeElement.querySelector('.mat-expansion-panel-header');
-    let fixtureTwo = TestBed.createComponent(PanelWithContent);
-    let headerElTwo = fixtureTwo.nativeElement.querySelector('.mat-expansion-panel-header');
+    const fixtureOne = TestBed.createComponent(PanelWithContent);
+    const headerElOne = fixtureOne.nativeElement.querySelector('.mat-expansion-panel-header');
+    const fixtureTwo = TestBed.createComponent(PanelWithContent);
+    const headerElTwo = fixtureTwo.nativeElement.querySelector('.mat-expansion-panel-header');
     fixtureOne.detectChanges();
     fixtureTwo.detectChanges();
 
-    let panelIdOne = headerElOne.getAttribute('aria-controls');
-    let panelIdTwo = headerElTwo.getAttribute('aria-controls');
+    const panelIdOne = headerElOne.getAttribute('aria-controls');
+    const panelIdTwo = headerElTwo.getAttribute('aria-controls');
     expect(panelIdOne).not.toBe(panelIdTwo);
   });
+
+  it('should not be able to focus content while closed', fakeAsync(() => {
+    const fixture = TestBed.createComponent(PanelWithContent);
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+    tick(250);
+
+    button.focus();
+    expect(document.activeElement).toBe(button, 'Expected button to start off focusable.');
+
+    button.blur();
+    fixture.componentInstance.expanded = false;
+    fixture.detectChanges();
+    tick(250);
+
+    button.focus();
+    expect(document.activeElement).not.toBe(button, 'Expected button to no longer be focusable.');
+  }));
 });
 
 
@@ -65,6 +85,7 @@ describe('MdExpansionPanel', () => {
                       (closed)="closeCallback()">
     <md-expansion-panel-header>Panel Title</md-expansion-panel-header>
     <p>Some content</p>
+    <button>I am a button</button>
   </md-expansion-panel>`})
 class PanelWithContent {
   expanded: boolean = false;