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

Remove incorrect role="tabpanel" from navs docs

Browse Source 
`role="tabpanel"` is not appropriate as role for the overall container -
it only applies to the individual content parts of each tab
This commit is contained in:
Patrick H. Lauke 2017-04-09 21:15:05 +01:00
parent 0719ab1888
commit 50d178ece0
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/navs.md
View File

@ -295,7 +295,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
@ -357,7 +357,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
To help fit your needs, this works with `<ul>`-based markup, as shown above, as well as `<nav>`-based markup shown below.
<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<nav class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="profile">Profile</a>
@ -411,7 +411,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as
The tabs plugin also works with pills.
<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
@ -469,7 +469,7 @@ The tabs plugin also works with pills.
And with vertical pills.
<div class="bd-example bd-example-tabs" role="tabpanel">
<div class="bd-example bd-example-tabs">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
@ -517,7 +517,6 @@ And with vertical pills.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
<div role="tabpanel">
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
@ -543,7 +542,6 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
{% endhighlight %}
</div>
### Via JavaScript