rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add missing aria-orientation to list group tablists

Browse source 
For correct keyboard handling (cursor up/down) when interacting with these
This commit is contained in:
patrickhlauke 2019-06-19 14:16:33 +01:00
parent d91293d966
commit 8de6558408
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
site/content/docs/4.3/components/list-group.md
View file

@ -205,7 +205,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<div class="bd-example" role="tabpanel">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<div class="list-group" id="list-tab" role="tablist" aria-orientation="vertical">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
@ -234,7 +234,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
{{< highlight html >}}
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<div class="list-group" id="list-tab" role="tablist" aria-orientation="vertical">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
@ -259,7 +259,7 @@ You can activate a list group navigation without writing any JavaScript by simpl
<div role="tabpanel">
{{< highlight html >}}
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<div class="list-group" id="myList" role="tablist" aria-orientation="vertical">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
@ -316,7 +316,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
{{< highlight html >}}
<div class="list-group" id="myList" role="tablist">
<div class="list-group" id="myList" role="tablist" aria-orientation="vertical">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>