diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2017-04-09 23:15:05 +0300 |
---|---|---|
committer | Patrick H. Lauke <redux@splintered.co.uk> | 2017-04-09 23:15:05 +0300 |
commit | 50d178ece0c22068938f5bc18d0a0d691ac0fb7c (patch) | |
tree | c0e247a908f2a7800d64b0f8cd7823acf03dbb28 /docs | |
parent | 0719ab18887c5b7415b9042b3ac60008de593f9f (diff) |
Remove incorrect role="tabpanel" from navs docs
`role="tabpanel"` is not appropriate as role for the overall container -
it only applies to the individual content parts of each tab
Diffstat (limited to 'docs')
-rw-r--r-- | docs/components/navs.md | 10 |
1 files changed, 4 insertions, 6 deletions
diff --git a/docs/components/navs.md b/docs/components/navs.md index fec61ef5d6..9ab2535ed6 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -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 |