Permalink
Browse files

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

  • Loading branch information...
tmorehouse committed Sep 5, 2017
1 parent ea052fc commit 2a344071d8c69e27a8303a68ec3227fa485c4fed
Showing with 15 additions and 11 deletions.
  1. +15 −11 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

0 comments on commit 2a34407

Please sign in to comment.