diff options
| -rw-r--r-- | build/vnu-jar.js | 1 | ||||
| -rw-r--r-- | docs/4.0/components/navs.md | 22 |
2 files changed, 13 insertions, 10 deletions
diff --git a/build/vnu-jar.js b/build/vnu-jar.js index d6ba69073..d1002c0a9 100644 --- a/build/vnu-jar.js +++ b/build/vnu-jar.js @@ -27,7 +27,6 @@ childProcess.exec('java -version', (error, stdout, stderr) => { // Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072 'Attribute “autocomplete” is only allowed when the input type is.*', 'Attribute “autocomplete” not allowed on element “button” at this point.', - 'Bad value “tablist” for attribute “role” on element “nav”.', // We use holder.js with `data-src` and no `src` to avoid 404 errors; // we could work around this, but I'm not sure it's worth it. 'Element “img” is missing required attribute “src”.', diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md index f0baa0707..1a22b3bcf 100644 --- a/docs/4.0/components/navs.md +++ b/docs/4.0/components/navs.md @@ -347,13 +347,15 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, </div> {% endhighlight %} -To help fit your needs, this works with `<ul>`-based markup, as shown above, as well as `<nav>`-based markup shown below. +To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using `<nav>`, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the exammple below, a simple `<div>`) and wrap the `<nav>` around it. <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="nav-home" aria-selected="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <nav> + <div 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="nav-home" aria-selected="true">Home</a> + <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> @@ -369,10 +371,12 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, as </div> {% highlight html %} -<nav class="nav nav-tabs" id="myTab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> +<nav> + <div 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="nav-home" aria-selected="true">Home</a> + <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div> |