feat(igxCollapsible): Adding aria and id. #307

IgniteUI · Aug 22, 2018 · 20af711 · 20af711
1 parent a46abee
commit 20af711
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.component.html b/projects/igniteui-angular/src/lib/collapsible/collapsible.component.html
@@ -1,8 +1,8 @@
+
 <div>
-    <div>
-        <ng-content select="igx-collapsible-header"></ng-content>
-    </div>
-    <div *ngIf="!collapsed" style="border: 1px solid rgb(216, 14, 122); background-color:gainsboro">
-        <ng-content select="igx-collapsible-body"></ng-content>
-    </div>
+    <ng-content select="igx-collapsible-header"></ng-content>
 </div>
+<div *ngIf="!collapsed" style="border: 1px solid rgb(216, 14, 122); background-color:gainsboro">
+    <ng-content select="igx-collapsible-body"></ng-content>
+</div>
+
diff --git a/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts b/projects/igniteui-angular/src/lib/collapsible/collapsible.component.ts
@@ -18,6 +18,10 @@ import {
     ContentChild
 } from '@angular/core';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
+import { AnimationBuilder, AnimationReferenceMetadata, AnimationMetadataType, AnimationAnimateRefMetadata } from '@angular/animations';
+import { IAnimationParams } from './../animations/main';
+
+let NEXT_ID = 0;
 
 @Directive({
     // tslint:disable-next-line:directive-selector
@@ -51,26 +55,55 @@ export class IgxCollapsibleBodyDirective {
     templateUrl: 'collapsible.component.html'
 })
 export class IgxCollapsibleComponent {
-     // properties section
+    /**
+     * Sets/gets the `id` of the collapsible component.
+     * If not set, `id` will have value `"igx-collapsible-0"`;
+     * ```html
+     * <igx-collapsible id = "my-first-collapsible"></igx-collapsible>
+     * ```
+     * ```typescript
+     * let collapsibleId =  this.collapsible.id;
+     * ```
+     * @memberof IgxCollapsibleComponent
+     */
+
+    @HostBinding('attr.id')
+    @Input()
+    public id = `igx-collapsible-${NEXT_ID++}`;
+
+    @HostBinding('class.igx-collapsible')
+    public cssClass = 'igx-collapsible';
 
     @ContentChild(IgxCollapsibleBodyDirective, { read: IgxCollapsibleBodyDirective })
     public textArea: IgxCollapsibleBodyDirective;
 
     @ViewChild('toggleBtn', { read: ElementRef })
     public toggleBtn: ElementRef;
 
+    /**
+     * An @Input property that set aria-labelledby attribute
+     * ```html
+     *<igx-combo [ariaLabelledBy]="'label1'">
+     * ```
+     */
+    @HostBinding('attr.aria-labelledby')
+    @Input()
+    public ariaLabelledBy: string;
 
     @Input()
     public collapsed;
 
+    @HostBinding('attr.aria-expanded')
+    private get HostState () {
+        return !this.collapsed;
+    }
+
     @Input()
     public disabled;
 
     @Input()
     public headerButtons;
 
-    // @HostBinding('class.igx-chip--disabled')
-
     @Output()
     public onCollapsed = new EventEmitter<any>();
 

diff --git a/src/app/collapsible/collapsible-sample.html b/src/app/collapsible/collapsible-sample.html
@@ -9,5 +9,4 @@ <h2>WIP</h2>
             Body text
         </igx-collapsible-body>
     </igx-collapsible>
-
 </div>