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/css/forms.html

@@ -4,7 +4,7 @@
   <h2 id="forms-example">Basic example</h2>
   <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group">
         <label for="exampleInputEmail1">Email address</label>
         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -27,7 +27,7 @@
     </form>
   </div><!-- /example -->
 {% highlight html %}
-<form role="form">
+<form>
   <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -66,7 +66,7 @@
     <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
   </div>
   <div class="bs-example">
-    <form class="form-inline" role="form">
+    <form class="form-inline">
       <div class="form-group">
         <label class="sr-only" for="exampleInputEmail2">Email address</label>
         <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
@@ -84,7 +84,7 @@
     </form>
   </div><!-- /example -->
 {% highlight html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <div class="form-group">
     <label class="sr-only" for="exampleInputEmail2">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
@@ -132,7 +132,7 @@
   <h2 id="forms-horizontal">Horizontal form</h2>
   <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group">
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
         <div class="col-sm-10">
@@ -162,7 +162,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">
@@ -203,7 +203,7 @@
     <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
   </div>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input type="text" class="form-control" placeholder="Text input">
     </form>
   </div><!-- /.bs-example -->
@@ -218,7 +218,7 @@
   <h3>Textarea</h3>
   <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
     </form>
   </div><!-- /.bs-example -->
@@ -231,7 +231,7 @@
   <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code>&lt;fieldset&gt;</code>.</p>
   <h4>Default (stacked)</h4>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="checkbox">
         <label>
           <input type="checkbox" value="">
@@ -302,7 +302,7 @@
   <h4>Inline checkboxes and radios</h4>
   <p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <label class="checkbox-inline">
         <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
       </label>
@@ -314,7 +314,7 @@
       </label>
     </form>
     <br>
-    <form role="form">
+    <form>
       <label class="radio-inline">
         <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
       </label>
@@ -351,7 +351,7 @@
   <h4>Checkboxes and radios without label text</h4>
   <p>Should you have no text within the <code>&lt;label&gt;</code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="checkbox">
         <label>
           <input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
@@ -380,7 +380,7 @@
   <h3>Selects</h3>
   <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <select class="form-control">
         <option>1</option>
         <option>2</option>
@@ -420,7 +420,7 @@
   <h2 id="forms-controls-static">Static control</h2>
   <p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group">
         <label class="col-sm-2 control-label">Email</label>
         <div class="col-sm-10">
@@ -436,7 +436,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group">
     <label class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">
@@ -452,7 +452,7 @@
 </form>
 {% endhighlight %}
   <div class="bs-example">
-    <form class="form-inline" role="form">
+    <form class="form-inline">
       <div class="form-group">
         <label class="sr-only">Email</label>
         <p class="form-control-static">email@example.com</p>
@@ -465,7 +465,7 @@
     </form>
   </div>
 {% highlight html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <div class="form-group">
     <label class="sr-only">Email</label>
     <p class="form-control-static">email@example.com</p>
@@ -481,7 +481,7 @@
   <h2 id="forms-control-focus">Focus state</h2>
   <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
     </form>
   </div>
@@ -494,7 +494,7 @@
   <h2 id="forms-control-disabled">Disabled state</h2>
   <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
     </form>
   </div><!-- /.bs-example -->
@@ -507,7 +507,7 @@
 
   <div class="bs-callout bs-callout-warning" id="callout-fieldset-disabled-pointer-events">
     <h4>Caveat about link functionality of <code>&lt;a&gt;</code></h4>
-    <p>Our styles use <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a class="btn btn-*"&gt;</code> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
+    <p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
   </div>
 
   <div class="bs-callout bs-callout-danger" id="callout-fieldset-disabled-ie">
@@ -516,7 +516,7 @@
   </div>
 
   <div class="bs-example">
-    <form role="form">
+    <form>
       <fieldset disabled>
         <div class="form-group">
           <label for="disabledTextInput">Disabled input</label>
@@ -538,7 +538,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form role="form">
+<form>
   <fieldset disabled>
     <div class="form-group">
       <label for="disabledTextInput">Disabled input</label>
@@ -564,7 +564,7 @@
   <h2 id="forms-control-readonly">Readonly state</h2>
   <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
     </form>
   </div><!-- /.bs-example -->
@@ -583,7 +583,7 @@
   </div>
 
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group has-success">
         <label class="control-label" for="inputSuccess1">Input with success</label>
         <input type="text" class="form-control" id="inputSuccess1">
@@ -674,7 +674,7 @@
     <p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
   </div>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess2">Input with success</label>
         <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
@@ -718,7 +718,7 @@
 
   <h4>Optional icons in horizontal and inline forms</h4>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group has-success has-feedback">
         <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
         <div class="col-sm-9">
@@ -730,7 +730,7 @@
     </form>
   </div>
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group has-success has-feedback">
     <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
     <div class="col-sm-9">
@@ -743,7 +743,7 @@
 {% endhighlight %}
 
   <div class="bs-example">
-    <form class="form-inline" role="form">
+    <form class="form-inline">
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess4">Input with success</label>
         <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
@@ -753,7 +753,7 @@
     </form>
   </div>
 {% highlight html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <div class="form-group has-success has-feedback">
     <label class="control-label" for="inputSuccess4">Input with success</label>
     <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
@@ -789,7 +789,7 @@
   <h3>Height sizing</h3>
   <p>Create taller or shorter form controls that match button sizes.</p>
   <div class="bs-example bs-example-control-sizing">
-    <form role="form">
+    <form>
       <div class="controls">
         <input class="form-control input-lg" type="text" placeholder=".input-lg">
         <input type="text" class="form-control" placeholder="Default input">
@@ -820,7 +820,7 @@
   <h3>Horizontal form group sizes</h3>
   <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group form-group-lg">
         <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
         <div class="col-sm-10">
@@ -836,7 +836,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group form-group-lg">
     <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
     <div class="col-sm-10">
@@ -856,7 +856,7 @@
   <h3>Column sizing</h3>
   <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="row">
         <div class="col-xs-2">
           <input type="text" class="form-control" placeholder=".col-xs-2">
@@ -891,7 +891,7 @@
     <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
   </div>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group">
         <label for="inputHelpBlock">Input with help text</label>
         <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">

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