From 2a344071d8c69e27a8303a68ec3227fa485c4fed Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 5 Sep 2017 01:28:54 -0300
Subject: [PATCH] feat(docs): Add aria roles to collapse accordion example

---
 docs/components/collapse/README.md | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/components/collapse/README.md b/docs/components/collapse/README.md
index b50a7f79be5..9ef9289a5cf 100755
--- a/docs/components/collapse/README.md
+++ b/docs/components/collapse/README.md
@@ -127,12 +127,12 @@ Turn a group of `<b-collapse>` components into an accordion by supplying
 an accordion group identifier via the `accordion` prop:
 
 ```html
-<div>
-  <b-card no-body>
-    <b-card-header class="p-1">
-      <b-btn block v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
+<div role="tablist">
+  <b-card no-body class="mb-1">
+    <b-card-header header-tag="header" class="p-1" role="tab">
+      <b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
     </b-card-header>
-    <b-collapse id="accordion1" visible accordion="my-accordion">
+    <b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
       <b-card-body>
         <p class="card-text">
           I start opened because <code>visible</code> is <code>true</code>
@@ -149,10 +149,12 @@ an accordion group identifier via the `accordion` prop:
         </p>
       </b-card-body>
     </b-collapse>
-    <b-card-header class="p-1">
-      <b-btn block v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
+  </b-card>
+  <b-card no-body class="mb-1">
+    <b-card-header header-tag="header" class="p-1" role="tab">
+      <b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
     </b-card-header>
-    <b-collapse id="accordion2" accordion="my-accordion">
+    <b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
       <b-card-body>
         <p class="card-text">
           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
@@ -166,10 +168,12 @@ an accordion group identifier via the `accordion` prop:
         </p>
       </b-card-body>
     </b-collapse>
-    <b-card-header class="p-1">
-      <b-btn block v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
+  </b-card>
+  <b-card no-body class="mb-1">
+    <b-card-header header-tag="header" class="p-1" role="tab">
+      <b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
     </b-card-header>
-    <b-collapse id="accordion3" accordion="my-accordion">
+    <b-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
       <b-card-body>
         <p class="card-text">
           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry