rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Docs: (subjectively) nicer looking accordion example (#31137)

Browse Source 
* Docs: (subjectively) nicer looking accordion example

the use of `.btn-link` currently just looks a bit odd, subjectively (as in v5 we now force the underline to always be there, while in v4 at least it was only on hover/focus).
`.btn-light` seems more fitting

* Add extra classes for nicer overall look

as suggested by @ysds

* Tweak accessibility note for accordions and optional keyboard interactions
This commit is contained in:
Patrick H. Lauke 2020-09-10 08:04:13 +01:00 committed by GitHub
parent 6455c2e8aa
commit 42a0f8f007
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
site/content/docs/5.0/components/collapse.md
View File

@ -76,9 +76,9 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
{{< example >}}
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<div class="card-header p-0" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<button class="btn btn-light btn-block text-left p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
@ -91,9 +91,9 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<div class="card-header p-0" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<button class="btn btn-light btn-block text-left collapsed p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
@ -105,9 +105,9 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<div class="card-header p-0" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<button class="btn btn-light btn-block text-left collapsed p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
@ -127,7 +127,7 @@ Be sure to add `aria-expanded` to the control element. This attribute explicitly
If your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Note that Bootstrap's current implementation does not cover the various keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
## Usage