fix(igxExpansionPanel): move id to header, adjust aria labels, #307

IgniteUI · Sep 17, 2018 · 821e3d4 · 821e3d4
1 parent 016bfff
commit 821e3d4
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 24 deletions.
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html
@@ -1,4 +1,5 @@
-<div class="igx-expansion-panel__header-inner" tabindex="0" role="button" [attr.aria-disabled]="disabled" [attr.aria-expanded]="isExpanded" [attr.aria-controls]="controls">
+<div class="igx-expansion-panel__header-inner" tabindex="0" role="button" [attr.id]="id"
+[attr.aria-disabled]="disabled" [attr.aria-expanded]="isExpanded" [attr.aria-controls]="controls">
     <div class="igx-expansion-panel__title-wrapper">
         <ng-content select="igx-expansion-panel-title"></ng-content>
         <ng-content select="igx-expansion-panel-description"></ng-content>

diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts
@@ -33,6 +33,7 @@ export enum ICON_POSITION {
 export class IgxExpansionPanelHeaderComponent {
      // properties section
     private _iconTemplate = false;
+    public id = '';
 
     @ContentChild(IgxExpansionPanelIconDirective)
     public set iconTemplate(val: any) {
@@ -43,13 +44,6 @@ export class IgxExpansionPanelHeaderComponent {
         return this._iconTemplate;
     }
 
-    @ContentChild(IgxExpansionPanelTitleDirective)
-    public title: IgxExpansionPanelTitleDirective;
-
-    @HostBinding('attr.aria-labelledby')
-    @Input()
-    public labelledby = this.title ? this.title.id : null;
-
     @HostBinding('attr.aria-level')
     @Input()
     public lv = '3';
@@ -82,7 +76,9 @@ export class IgxExpansionPanelHeaderComponent {
     public disabled = false;
 
     constructor(@Host() public panel: IgxExpansionPanelComponent, public cdr: ChangeDetectorRef,
-     public elementRef: ElementRef, private renderer: Renderer2) { }
+     public elementRef: ElementRef) {
+         this.id = `${this.panel.id}-header`;
+     }
 
      @HostListener('keydown.Enter', ['$event'])
      @HostListener('keydown.Space', ['$event'])

diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
@@ -11,8 +11,8 @@ import {
 } from '@angular/core';
 import { AnimationBuilder, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
 import { growVerOut, growVerIn } from '../animations/main';
-import { IgxExpansionPanelTitleDirective } from './expansion-panel.directives';
 import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component';
+import { IgxExpansionPanelHeaderComponent } from './expansion-panel-header.component';
 
 let NEXT_ID = 0;
 
@@ -56,7 +56,7 @@ export class IgxExpansionPanelComponent {
     public onExpanded = new EventEmitter<any>();
 
     public get headerId() {
-        return this.title ? this.title.id : '';
+        return this.header ? `${this.id}-header` : '';
     }
     constructor(
         public cdr: ChangeDetectorRef,
@@ -66,8 +66,8 @@ export class IgxExpansionPanelComponent {
     @ContentChild(forwardRef(() => IgxExpansionPanelBodyComponent), { read: IgxExpansionPanelBodyComponent })
     public body: IgxExpansionPanelBodyComponent;
 
-    @ContentChild(IgxExpansionPanelTitleDirective, { read: IgxExpansionPanelTitleDirective })
-    public title: IgxExpansionPanelTitleDirective;
+    @ContentChild(forwardRef(() => IgxExpansionPanelHeaderComponent), { read: IgxExpansionPanelHeaderComponent })
+    public header: IgxExpansionPanelHeaderComponent;
 
 
     private playOpenAnimation(cb: () => void) {

diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.directives.ts
@@ -1,7 +1,5 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
-let NEXT_ID = 0;
-
 @Directive({
     // tslint:disable-next-line:directive-selector
     selector: 'igx-expansion-panel-header'
@@ -13,10 +11,6 @@ export class IgxExpansionPanelHeaderDirective {
     selector: 'igx-expansion-panel-title'
 })
 export class IgxExpansionPanelTitleDirective {
-    @Input()
-    @HostBinding('attr.id')
-    public id = `igx-expansion-panel-header-title-${NEXT_ID++}`;
-
     @HostBinding('class.igx-expansion-panel__header-title')
     public cssClass = `igx-expansion-panel__header-title`;
 }

diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts
@@ -730,7 +730,7 @@ describe('igxExpansionPanel', () => {
             const panelElement = panel.elementRef.nativeElement;
             const header = fixture.componentInstance.header;
             const headerElement = header.elementRef.nativeElement;
-            const title = fixture.componentInstance.expansionPanel.title;
+            const title = fixture.componentInstance.expansionPanel.header;
             fixture.detectChanges();
             // IgxExpansionPanelHeaderComponent host
             expect(headerElement.getAttribute('aria-level')).toEqual('3');
@@ -785,7 +785,7 @@ describe('igxExpansionPanel', () => {
             const panelElement = panel.elementRef.nativeElement;
             const header = fixture.componentInstance.header;
             const headerElement = header.elementRef.nativeElement;
-            const title = panel.title;
+            const title = panel.header;
             panel.expand();
             tick();
             fixture.detectChanges();
@@ -811,7 +811,7 @@ describe('igxExpansionPanel', () => {
             fixture.detectChanges();
             const panel = fixture.componentInstance.expansionPanel;
             const panelElement = panel.elementRef.nativeElement;
-            const title = fixture.componentInstance.expansionPanel.title;
+            const title = fixture.componentInstance.expansionPanel.header;
             panel.expand();
             tick();
             fixture.detectChanges();

diff --git a/src/app/expansion-panel/expansion-panel-sample.html b/src/app/expansion-panel/expansion-panel-sample.html
@@ -8,14 +8,13 @@
         </div>
         <div class="game-board">
             <igx-expansion-panel [animationSettings]="animationSettings" class="game-board__collapsible" (onCollapsed)="handleCollapsed($event)"
-                (onExpanded)="handleExpanded($event)" #collapsibleComponent>
+                (onExpanded)="handleExpanded($event)" #collapsibleComponent [collapsed]="false">
                 <igx-expansion-panel-header [iconPosition]="iconPosition" (onInterraction)="onInterraction($event)"
                     [disabled]="false">
                     <igx-expansion-panel-title>Current Winning Player:</igx-expansion-panel-title>
                     <igx-expansion-panel-description>{{ getWinningPlayer }}</igx-expansion-panel-description>
                     <button igxButton class='igx-button--flat' (click)="resetScore($event)">Reset score</button>
                     <igx-expansion-panel-icon *ngIf="templatedIcon">
-                        <!-- <igx-icon fontSet="material" [name]="collapsed() ? 'arrow_drop_down':'arrow_drop_up'"></igx-icon> -->
                         {{collapsed() ? 'Expand':'Collapse'}}
                     </igx-expansion-panel-icon>
                 </igx-expansion-panel-header>