From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Sun, 9 Apr 2017 20:15:05 +0000 (+0100)
Subject: Remove incorrect role="tabpanel" from navs docs
X-Git-Tag: v4.0.0-beta~166^2~104^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=50d178ece0c22068938f5bc18d0a0d691ac0fb7c;p=thirdparty%2Fbootstrap.git

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
---

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