Merge pull request #15125 from patrickhlauke/docs-clean-up

Docs clean up - unnecessary role attributes, callout clarifications

docs/_includes/components/input-groups.html

@@ -22,7 +22,7 @@
   <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
   <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
   <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="input-group">
       <span class="input-group-addon">@</span>
       <input type="text" class="form-control" placeholder="Username">
@@ -59,7 +59,7 @@
 
   <h2 id="input-groups-sizing">Sizing</h2>
   <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="input-group input-group-lg">
       <span class="input-group-addon">@</span>
       <input type="text" class="form-control" placeholder="Username">
@@ -182,7 +182,7 @@
 
   <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
   <p></p>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="row">
       <div class="col-lg-6">
         <div class="input-group">
@@ -252,7 +252,7 @@
 {% endhighlight %}
 
   <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="row">
       <div class="col-lg-6">
         <div class="input-group">

docs/_includes/components/navbar.html

@@ -25,11 +25,11 @@
   </div>
   <div class="bs-callout bs-callout-warning" id="callout-navbar-role">
     <h4>Make navbars accessible</h4>
-    <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
+    <p>Be sure to use a <code>&lt;nav&gt;</code> element or, if using a more generic element such as a <code>&lt;div&gt;</code>, add a <code>role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</p>
   </div>
 
   <div class="bs-example">
-    <nav class="navbar navbar-default" role="navigation">
+    <nav class="navbar navbar-default">
       <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
@@ -84,7 +84,7 @@
     </nav>
   </div>
 {% highlight html %}
-<nav class="navbar navbar-default" role="navigation">
+<nav class="navbar navbar-default">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
@@ -143,7 +143,7 @@
   <h2 id="navbar-brand-image">Brand image</h2>
   <p>Replace the navbar brand with your own image by swapping the text for an <code>&lt;img&gt;</code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
   <div class="bs-example">
-    <nav class="navbar navbar-default" role="navigation">
+    <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
           <a class="navbar-brand" href="#">
@@ -154,7 +154,7 @@
     </nav>
   </div>
 {% highlight html %}
-<nav class="navbar navbar-default" role="navigation">
+<nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">
@@ -170,7 +170,7 @@
   <p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
   <p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
   <div class="bs-example">
-    <nav class="navbar navbar-default" role="navigation">
+    <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
@@ -215,7 +215,7 @@
   <h2 id="navbar-buttons">Buttons</h2>
   <p>Add the <code>.navbar-btn</code> class to <code>&lt;button&gt;</code> elements not residing in a <code>&lt;form&gt;</code> to vertically center them in the navbar.</p>
   <div class="bs-example">
-    <nav class="navbar navbar-default" role="navigation">
+    <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
@@ -244,7 +244,7 @@
   <h2 id="navbar-text">Text</h2>
   <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
   <div class="bs-example">
-    <nav class="navbar navbar-default" role="navigation">
+    <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
@@ -269,7 +269,7 @@
   <h2 id="navbar-links">Non-nav links</h2>
   <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
   <div class="bs-example">
-    <nav class="navbar navbar-default" role="navigation">
+    <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
@@ -304,7 +304,7 @@
   <h2 id="navbar-fixed-top">Fixed to top</h2>
   <p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
   <div class="bs-example bs-navbar-top-example">
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-top">
       <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
       <div class="container-fluid">
         <div class="navbar-header">
@@ -328,7 +328,7 @@
     </nav>
   </div><!-- /example -->
 {% highlight html %}
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
     ...
   </div>
@@ -348,7 +348,7 @@ body { padding-top: 70px; }
   <h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
   <p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
   <div class="bs-example bs-navbar-bottom-example">
-    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-bottom">
       <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
       <div class="container-fluid">
         <div class="navbar-header">
@@ -372,7 +372,7 @@ body { padding-top: 70px; }
     </nav>
   </div><!-- /example -->
 {% highlight html %}
-<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-bottom">
   <div class="container">
     ...
   </div>
@@ -393,7 +393,7 @@ body { padding-bottom: 70px; }
   <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
   <p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
   <div class="bs-example bs-navbar-top-example">
-    <nav class="navbar navbar-default navbar-static-top" role="navigation">
+    <nav class="navbar navbar-default navbar-static-top">
       <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
       <div class="container-fluid">
         <div class="navbar-header">
@@ -418,7 +418,7 @@ body { padding-bottom: 70px; }
     </nav>
   </div><!-- /example -->
 {% highlight html %}
-<nav class="navbar navbar-default navbar-static-top" role="navigation">
+<nav class="navbar navbar-default navbar-static-top">
   <div class="container">
     ...
   </div>
@@ -429,7 +429,7 @@ body { padding-bottom: 70px; }
   <h2 id="navbar-inverted">Inverted navbar</h2>
   <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
   <div class="bs-example">
-    <nav class="navbar navbar-inverse" role="navigation">
+    <nav class="navbar navbar-inverse">
       <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
@@ -454,7 +454,7 @@ body { padding-bottom: 70px; }
     </nav>
   </div><!-- /example -->
 {% highlight html %}
-<nav class="navbar navbar-inverse" role="navigation">
+<nav class="navbar navbar-inverse">
   ...
 </nav>
 {% endhighlight %}

docs/_includes/js/dropdowns.html

@@ -6,7 +6,7 @@
 
   <h3>Within a navbar</h3>
   <div class="bs-example">
-    <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
+    <nav id="navbar-example" class="navbar navbar-default navbar-static">
       <div class="container-fluid">
         <div class="navbar-header">
           <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">

docs/_includes/js/modal.html

@@ -234,7 +234,7 @@
             <h4 class="modal-title" id="exampleModalLabel">New message</h4>
           </div>
           <div class="modal-body">
-            <form role="form">
+            <form>
               <div class="form-group">
                 <label for="recipient-name" class="control-label">Recipient:</label>
                 <input type="text" class="form-control" id="recipient-name">
@@ -267,7 +267,7 @@
         <h4 class="modal-title" id="exampleModalLabel">New message</h4>
       </div>
       <div class="modal-body">
-        <form role="form">
+        <form>
           <div class="form-group">
             <label for="recipient-name" class="control-label">Recipient:</label>
             <input type="text" class="form-control" id="recipient-name">

docs/_includes/js/scrollspy.html

@@ -4,7 +4,7 @@
   <h2 id="scrollspy-examples">Example in navbar</h2>
   <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
   <div class="bs-example">
-    <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
+    <nav id="navbar-example2" class="navbar navbar-default navbar-static">
       <div class="container-fluid">
         <div class="navbar-header">
           <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">

docs/_includes/nav/main.html

@@ -9,7 +9,7 @@
       </button>
       <a href="../" class="navbar-brand">Bootstrap</a>
     </div>
-    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+    <nav class="collapse navbar-collapse bs-navbar-collapse">
       <ul class="nav navbar-nav">
         <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
           <a href="../getting-started/">Getting started</a>

docs/customize.html

@@ -35,7 +35,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
   </div>
 </div><!-- /import -->
 
-<form class="bs-customizer" role="form">
+<form class="bs-customizer">
   <div class="bs-docs-section" id="less-section">
     <button class="btn btn-default toggle" type="button">Toggle all</button>
     <h1 id="less" class="page-header">Less files</h1>

docs/examples/carousel/index.html

@@ -32,7 +32,7 @@
     <div class="navbar-wrapper">
       <div class="container">
 
-        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+        <nav class="navbar navbar-inverse navbar-static-top">
           <div class="container">
             <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/dashboard/index.html

@@ -29,7 +29,7 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/jumbotron/index.html

@@ -29,7 +29,7 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -41,7 +41,7 @@
           <a class="navbar-brand" href="#">Project name</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
-          <form class="navbar-form navbar-right" role="form">
+          <form class="navbar-form navbar-right">
             <div class="form-group">
               <input type="text" placeholder="Email" class="form-control">
             </div>

docs/examples/justified-nav/index.html

@@ -33,7 +33,7 @@
 
       <div class="masthead">
         <h3 class="text-muted">Project name</h3>
-        <div role="navigation">
+        <nav>
           <ul class="nav nav-justified">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Projects</a></li>
@@ -42,7 +42,7 @@
             <li><a href="#">About</a></li>
             <li><a href="#">Contact</a></li>
           </ul>
-        </div>
+        </nav>
       </div>
 
       <!-- Jumbotron -->

docs/examples/navbar-fixed-top/index.html

@@ -30,7 +30,7 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/navbar-static-top/index.html

@@ -30,7 +30,7 @@
   <body>
 
     <!-- Static navbar -->
-    <nav class="navbar navbar-default navbar-static-top" role="navigation">
+    <nav class="navbar navbar-default navbar-static-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/navbar/index.html

@@ -32,7 +32,7 @@
     <div class="container">
 
       <!-- Static navbar -->
-      <nav class="navbar navbar-default" role="navigation">
+      <nav class="navbar navbar-default">
         <div class="container-fluid">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/non-responsive/index.html

@@ -32,7 +32,7 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/offcanvas/index.html

@@ -28,7 +28,7 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+    <nav class="navbar navbar-fixed-top navbar-inverse">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -95,7 +95,7 @@
           </div><!--/row-->
         </div><!--/.col-xs-12.col-sm-9-->
 
-        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
+        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
           <div class="list-group">
             <a href="#" class="list-group-item active">Link</a>
             <a href="#" class="list-group-item">Link</a>

docs/examples/signin/index.html

@@ -31,7 +31,7 @@
 
     <div class="container">
 
-      <form class="form-signin" role="form">
+      <form class="form-signin">
         <h2 class="form-signin-heading">Please sign in</h2>
         <label for="inputEmail" class="sr-only">Email address</label>
         <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>

docs/examples/starter-template/index.html

@@ -29,7 +29,7 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/sticky-footer-navbar/index.html

@@ -30,7 +30,7 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

docs/examples/theme/index.html

@@ -32,7 +32,7 @@
   <body role="document">
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">