From 8bb2fdf7dc6c763e44ee6bfbc4ed86d20438edc0 Mon Sep 17 00:00:00 2001
From: svetoldo4444ka <svetlana.korotkykh@valor-software.com>
Date: Thu, 22 Mar 2018 14:43:56 +0200
Subject: [PATCH] feat(accordion): add key navigation to accordion (#3993)

* add key navigation

* refactor(accordion): add key navigation to accordion
---
 .../+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>