Merge branch 'master' into derp

Conflicts:
	docs/_layouts/default.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/docs.min.js
	docs/assets/js/src/application.js

1 files changed, 29 insertions, 12 deletions

diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index 945910c75..728356268 100644
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -10,7 +10,7 @@
         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
         </div>
@@ -21,11 +21,13 @@
           <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="sr-only">Previous</span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="sr-only">Next</span>
       </a>
     </div>
   </div><!-- /example -->
@@ -39,22 +41,30 @@
   </ol>
 
   <!-- Wrapper for slides -->
-  <div class="carousel-inner">
+  <div class="carousel-inner" role="listbox">
     <div class="item active">
       <img src="..." alt="...">
       <div class="carousel-caption">
         ...
       </div>
     </div>
+    <div class="item">
+      <img src="..." alt="...">
+      <div class="carousel-caption">
+        ...
+      </div>
+    </div>
     ...
   </div>
 
   <!-- Controls -->
-  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">Previous</span>
   </a>
-  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">Next</span>
   </a>
 </div>
 {% endhighlight %}
@@ -73,7 +83,7 @@
         <li data-target="#carousel-example-captions" data-slide-to="1"></li>
         <li data-target="#carousel-example-captions" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
           <div class="carousel-caption">
@@ -96,16 +106,18 @@
           </div>
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
+      <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="sr-only">Previous</span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
+      <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="sr-only">Next</span>
       </a>
     </div>
   </div><!-- /example -->
 {% highlight html %}
-<div class="item active">
+<div class="item">
   <img src="..." alt="...">
   <div class="carousel-caption">
     <h3>...</h3>
@@ -122,11 +134,11 @@
   <h2 id="carousel-usage">Usage</h2>
 
   <h3>Multiple carousels</h3>
-  <p>Carousels require the use of an <code>id</code> on the outermost container, <code>.carousel</code>, for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p>
+  <p>Carousels require the use of an <code>id</code> on the outermost container (the <code>.carousel</code>) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p>
 
   <h3>Via data attributes</h3>
   <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
-  <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p>
+  <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. <strong class="text-danger">It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p>
 
   <h3>Via JavaScript</h3>
   <p>Call carousel manually with:</p>
@@ -197,6 +209,11 @@ $('.carousel').carousel({
 
   <h3>Events</h3>
   <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
+  <p>Both events have the following additional properties:</p>
+  <ul>
+    <li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li>
+    <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
+  </ul>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>