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`

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>

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>