Merge branch 'accessibility' into 2.1.0-wip

Conflicts:
	docs/assets/js/bootstrap.min.js
	docs/javascript.html
	docs/templates/pages/javascript.mustache

1 files changed, 58 insertions, 55 deletions

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 4ed30284a..c50fb0b7a 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -122,18 +122,19 @@
 
           <h2>{{_i}}Live demo{{/i}}</h2>
           <p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
+
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide fade">
+          <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
-              <h3>{{_i}}Modal Heading{{/i}}</h3>
+              <h3 id="myModalLabel">{{_i}}Modal Heading{{/i}}</h3>
             </div>
             <div class="modal-body">
               <h4>{{_i}}Text in a modal{{/i}}</h4>
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
               <h4>{{_i}}Popover in a modal{{/i}}</h4>
-              <p>{{_i}}This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
+              <p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
 
               <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
               <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
@@ -150,8 +151,8 @@
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
-              <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
+              <a href="#" role="button" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
+              <a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
             </div>
           </div>
           <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
@@ -196,24 +197,25 @@
           <p>{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
           <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;{{_i}}Launch Modal{{/i}}&lt;/a&gt;
+&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;{{_i}}Launch Modal{{/i}}&lt;/a&gt;
 </pre>
 
 <pre class="prettyprint linenums">
-&lt;div class="modal hide" id="myModal"&gt;
+&lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
   &lt;div class="modal-header"&gt;
     &lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
-    &lt;h3&gt;Modal header&lt;/h3&gt;
+    &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
   &lt;/div&gt;
   &lt;div class="modal-body"&gt;
     &lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
-    &lt;a href="#" class="btn" data-dismiss="modal"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
-    &lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
+    &lt;a href="#" role="button" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
+    &lt;a href="#" role="button" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
+
           <div class="alert alert-info">
             <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}}
           </div>
@@ -287,41 +289,42 @@ $('#myModal').on('hidden', function () {
         <div class="span9 columns">
           <h2>{{_i}}Examples{{/i}}</h2>
           <p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p>
+
           <div id="navbar-example" class="navbar navbar-static">
             <div class="navbar-inner">
               <div class="container" style="width: auto;">
                 <a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
-                <ul class="nav">
+                <ul class="nav" role="navigation">
                   <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                      <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                      <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                      <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+                      <li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
                       <li class="divider"></li>
-                      <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
                     </ul>
                   </li>
                   <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                      <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                      <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                      <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                    <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
+                      <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
                       <li class="divider"></li>
-                      <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
                     </ul>
                   </li>
                 </ul>
                 <ul class="nav pull-right">
                   <li id="fat-menu" class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                      <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                      <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                      <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                    <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+                      <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
                       <li class="divider"></li>
-                      <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
                     </ul>
                   </li>
                 </ul>
@@ -332,33 +335,33 @@ $('#myModal').on('hidden', function () {
           <ul class="nav nav-pills">
             <li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
             <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-              <ul id="menu1" class="dropdown-menu">
-                <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+              <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+              <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
+                <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
                 <li class="divider"></li>
-                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
               </ul>
             </li>
             <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
-              <ul id="menu2" class="dropdown-menu">
-                <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+              <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
+              <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
+                <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
                 <li class="divider"></li>
-                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
               </ul>
             </li>
             <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
-              <ul id="menu3" class="dropdown-menu">
-                <li><a href="#">{{_i}}Action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+              <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
+              <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
+                <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
                 <li class="divider"></li>
-                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
               </ul>
             </li>
           </ul> <!-- /tabs -->
@@ -378,16 +381,16 @@ $('#myModal').on('hidden', function () {
 &lt;ul class="nav nav-pills"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
   &lt;li class="dropdown" id="menu1"&gt;
-    &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
+    &lt;a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
       {{_i}}Dropdown{{/i}}
       &lt;b class="caret"&gt;&lt;/b&gt;
     &lt;/a&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      &lt;li&gt;&lt;a href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="#"&gt;{{_i}}Another action{{/i}}&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="#"&gt;{{_i}}Something else here{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Another action{{/i}}&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Something else here{{/i}}&lt;/a&gt;&lt;/li&gt;
       &lt;li class="divider"&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="#"&gt;{{_i}}Separated link{{/i}}&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Separated link{{/i}}&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
   ...
@@ -396,11 +399,11 @@ $('#myModal').on('hidden', function () {
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
   &lt;li class="dropdown"&gt;
-    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+    &lt;a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"&gt;
       {{_i}}Dropdown{{/i}}
       &lt;b class="caret"&gt;&lt;/b&gt;
     &lt;/a&gt;
-    &lt;ul class="dropdown-menu"&gt;
+    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
       ...
     &lt;/ul&gt;
   &lt;/li&gt;