feat(docs): Add aria roles to collapse accordion example

bootstrap-vue · Sep 5, 2017 · 2a34407 · 2a34407
1 parent ea052fc
commit 2a34407
Showing 1 changed file with 15 additions and 11 deletions.
diff --git 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