From 69b35b356787864f53e24ad81dfd90daf3a2a24d Mon Sep 17 00:00:00 2001
From: Oleksii Aleksandrov <alexof3@gmail.com>
Date: Thu, 17 May 2018 12:53:15 +0300
Subject: [PATCH] feat(accordion): add key navigation to accordion (#4192)

- Changed accordion component template, changed `div` to `button`
- Changed accordion demo `Custom html`, changed `div` to `button`
- Changed visual presentation of accordion headings because of tag `button`
---
 .../+accordion/demos/custom-html/custom-html.html      | 10 +++++-----
 src/accordion/accordion-group.component.html           |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/demo/src/app/components/+accordion/demos/custom-html/custom-html.html b/demo/src/app/components/+accordion/demos/custom-html/custom-html.html
index 555cf9cca3..10fae8b438 100644
--- a/demo/src/app/components/+accordion/demos/custom-html/custom-html.html
+++ b/demo/src/app/components/+accordion/demos/custom-html/custom-html.html
@@ -1,15 +1,15 @@
 <accordion>
   <accordion-group>
-    <div accordion-heading class="clearfix">
-      I can have markup!
+    <button class="btn btn-link btn-block clearfix" accordion-heading>
+      <div class="pull-left float-left">I can have markup!</div>
       <span class="badge badge-secondary float-right pull-right">Some HTML here</span>
-    </div>
+    </button>
     This is just some content to illustrate fancy headings.
   </accordion-group>
   <accordion-group>
-    <div accordion-heading>
+    <button class="btn btn-link" accordion-heading>
       I can have markup, too!
-    </div>
+    </button>
     <span class="badge badge-secondary center">And some HTML here</span>
   </accordion-group>
 </accordion>
diff --git a/src/accordion/accordion-group.component.html b/src/accordion/accordion-group.component.html
index e653c4c85d..dfa1b8041e 100644
--- a/src/accordion/accordion-group.component.html
+++ b/src/accordion/accordion-group.component.html
@@ -4,9 +4,9 @@
     <div class="panel-title">
       <div role="button" class="accordion-toggle"
            [attr.aria-expanded]="isOpen">
-        <div *ngIf="heading" [ngClass]="{'text-muted': isDisabled}">
+        <button class="btn btn-link" *ngIf="heading" [ngClass]="{'text-muted': isDisabled}">
           {{ heading }}
-        </div>
+        </button>
         <ng-content select="[accordion-heading]"></ng-content>
       </div>
     </div>