Merge branch 'v4-dev' into v4-forms-cleanup

docs/components/list-group.md

@@ -24,22 +24,22 @@ The most basic list group is simply an unordered list with list items, and the p
 </ul>
 {% endexample %}
 
-## Labels
+## Tags
 
-Add labels to any list group item to show unread counts, activity, etc.
+Add tags to any list group item to show unread counts, activity, etc.
 
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">14</span>
+    <span class="tag tag-default tag-pill pull-xs-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">2</span>
+    <span class="tag tag-default tag-pill pull-xs-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="label label-default label-pill pull-xs-right">1</span>
+    <span class="tag tag-default tag-pill pull-xs-right">1</span>
     Morbi leo risus
   </li>
 </ul>
@@ -104,6 +104,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Custom content
 
 Add nearly any HTML within, even for linked list groups like the one below.

docs/components/modal.md

@@ -34,7 +34,7 @@ Always try to place a modal's HTML code in a top-level position in your document
 {% callout warning %}
 #### Mobile device caveats
 
-There are some caveats regarding using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-navbars-and-virtual-keyboards) for details.
+There are some caveats regarding using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
 {% endcallout %}
 
 ### Static example

docs/components/popovers.md

@@ -265,7 +265,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
         <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
       </tr>
       <tr>
-        <td>offsets</td>
+        <td>offset</td>
         <td>string</td>
         <td>'0 0'</td>
         <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>

docs/components/progress.md

@@ -13,12 +13,24 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
 
 ### Example
 
+To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
+
 {% example html %}
-<progress class="progress" value="0" max="100">0%</progress>
-<progress class="progress" value="25" max="100">25%</progress>
-<progress class="progress" value="50" max="100">50%</progress>
-<progress class="progress" value="75" max="100">75%</progress>
-<progress class="progress" value="100" max="100">100%</progress>
+
+<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
+<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
+
+<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
+<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
+
+<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
+<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
+
+<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
+<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
+
+<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
+<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
 {% endexample %}
 
 ### IE9 support
@@ -26,9 +38,10 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
 Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
 
 {% example html %}
-<progress class="progress" value="25" max="100">
+<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
+<progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
   <div class="progress">
-    <span class="progress-bar" style="width: 25%;">25%</span>
+    <span class="progress-bar" style="width: 25%;"></span>
   </div>
 </progress>
 {% endexample %}
@@ -38,10 +51,10 @@ Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can w
 Progress bars use some of the same button and alert classes for consistent styles.
 
 {% example html %}
-<progress class="progress progress-success" value="25" max="100">25%</progress>
-<progress class="progress progress-info" value="50" max="100">50%</progress>
-<progress class="progress progress-warning" value="75" max="100">75%</progress>
-<progress class="progress progress-danger" value="100" max="100">100%</progress>
+<progress class="progress progress-success" value="25" max="100"></progress>
+<progress class="progress progress-info" value="50" max="100"></progress>
+<progress class="progress progress-warning" value="75" max="100"></progress>
+<progress class="progress progress-danger" value="100" max="100"></progress>
 {% endexample %}
 
 ### Striped
@@ -49,11 +62,11 @@ Progress bars use some of the same button and alert classes for consistent style
 Uses a gradient to create a striped effect.
 
 {% example html %}
-<progress class="progress progress-striped" value="10" max="100">10%</progress>
-<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
-<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
-<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
-<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
+<progress class="progress progress-striped" value="10" max="100"></progress>
+<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
+<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
+<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
+<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>
 {% endexample %}
 
 ### Animated stripes
@@ -63,12 +76,12 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres
 **Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
 
 <div class="bd-example">
-  <progress class="progress progress-striped" value="25" max="100">25%</progress>
+  <progress class="progress progress-striped" value="25" max="100"></progress>
   <button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
     Toggle animation
   </button>
 </div>
 
 {% highlight html %}
-<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
+<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>
 {% endhighlight %}

docs/components/scrollspy.md

@@ -14,7 +14,7 @@ group: components
 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.
 
 <div class="bd-example">
-  <nav id="navbar-example2" class="navbar navbar-default" role="navigation">
+  <nav id="navbar-example2" class="navbar navbar-default">
     <h3 class="navbar-brand">Project Name</h3>
     <ul class="nav nav-pills">
       <li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>

docs/components/tooltips.md

@@ -229,7 +229,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
         <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
       </tr>
       <tr>
-        <td>offsets</td>
+        <td>offset</td>
         <td>string</td>
         <td>'0 0'</td>
         <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>

docs/content/typography.md

@@ -211,7 +211,7 @@ Remove the default `list-style` and left margin on list items (immediate childre
 
 ### Inline
 
-Place all list items on a single line with `display: inline-block;` and some basic margin between.
+Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
 
 {% example html %}
 <ul class="list-inline">

docs/dist/js/bootstrap.js

@@ -462,6 +462,8 @@ var Button = (function ($) {
               input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
               $(this._element).trigger('change');
             }
+
+            input.focus();
           }
         } else {
           this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));

docs/dist/js/umd/button.js

@@ -108,6 +108,8 @@
                 input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
                 $(this._element).trigger('change');
               }
+
+              input.focus();
             }
           } else {
             this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));