Merge branch 'master' into v4

Conflicts:
	Gruntfile.js
	_config.yml
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	dist/fonts/glyphicons-halflings-regular.eot
	dist/fonts/glyphicons-halflings-regular.svg
	dist/fonts/glyphicons-halflings-regular.ttf
	dist/fonts/glyphicons-halflings-regular.woff
	docs/_data/glyphicons.yml
	docs/_includes/components/alerts.html
	docs/_includes/components/badges.html
	docs/_includes/components/button-dropdowns.html
	docs/_includes/components/button-groups.html
	docs/_includes/components/dropdowns.html
	docs/_includes/components/glyphicons.html
	docs/_includes/components/input-groups.html
	docs/_includes/components/labels.html
	docs/_includes/components/media.html
	docs/_includes/components/navbar.html
	docs/_includes/components/navs.html
	docs/_includes/components/pagination.html
	docs/_includes/components/panels.html
	docs/_includes/components/progress-bars.html
	docs/_includes/css/buttons.html
	docs/_includes/css/forms.html
	docs/_includes/css/grid.html
	docs/_includes/css/helpers.html
	docs/_includes/css/images.html
	docs/_includes/css/less.html
	docs/_includes/css/responsive-utilities.html
	docs/_includes/css/sass.html
	docs/_includes/css/tables.html
	docs/_includes/css/type.html
	docs/_includes/getting-started/accessibility.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/community.html
	docs/_includes/getting-started/download.html
	docs/_includes/getting-started/examples.html
	docs/_includes/getting-started/whats-included.html
	docs/_includes/js/affix.html
	docs/_includes/js/alerts.html
	docs/_includes/js/buttons.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/dropdowns.html
	docs/_includes/js/modal.html
	docs/_includes/js/overview.html
	docs/_includes/js/tabs.html
	docs/_includes/nav/components.html
	docs/_includes/nav/css.html
	docs/_includes/nav/javascript.html
	docs/_includes/nav/main.html
	docs/about.html
	docs/assets/css/docs.min.css
	docs/assets/js/customize.min.js
	docs/assets/js/raw-files.min.js
	docs/dist/css/bootstrap-theme.css
	docs/dist/css/bootstrap-theme.min.css
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/dist/fonts/glyphicons-halflings-regular.eot
	docs/dist/fonts/glyphicons-halflings-regular.svg
	docs/dist/fonts/glyphicons-halflings-regular.ttf
	docs/dist/fonts/glyphicons-halflings-regular.woff
	docs/examples/carousel/index.html
	docs/examples/navbar-fixed-top/index.html
	docs/examples/navbar-static-top/index.html
	docs/examples/navbar/index.html
	docs/examples/non-responsive/index.html
	docs/examples/non-responsive/non-responsive.css
	docs/examples/sticky-footer-navbar/index.html
	docs/examples/theme/index.html
	fonts/glyphicons-halflings-regular.eot
	fonts/glyphicons-halflings-regular.svg
	fonts/glyphicons-halflings-regular.ttf
	fonts/glyphicons-halflings-regular.woff
	less/_carousel.less
	less/_forms.less
	less/glyphicons.less

1 files changed, 63 insertions, 72 deletions

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 370f4afcc..80c69b5b9 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -10,12 +10,19 @@ Group a series of buttons together on a single line with the button group. Add o
   <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
 </div>
 
+<div class="bs-callout bs-callout-warning">
+  <h4>Ensure correct <code>role</code> and provide a label</h4>
+  <p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
+  <p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code>&lt;button&gt;</code> elements) or a dropdown.</p>
+  <p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
+</div>
+
 ### Basic example
 
 Wrap a series of buttons with `.btn` in `.btn-group`.
 
 {% example html %}
-<div class="btn-group">
+<div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-secondary">Left</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Right</button>
@@ -27,19 +34,19 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 Combine sets of button groups into button toolbars for more complex components.
 
 {% example html %}
-<div class="btn-toolbar" role="toolbar">
-  <div class="btn-group">
+<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+  <div class="btn-group" role="group" aria-label="First group">
     <button type="button" class="btn btn-secondary">1</button>
     <button type="button" class="btn btn-secondary">2</button>
     <button type="button" class="btn btn-secondary">3</button>
     <button type="button" class="btn btn-secondary">4</button>
   </div>
-  <div class="btn-group">
+  <div class="btn-group" role="group" aria-label="Second group">
     <button type="button" class="btn btn-secondary">5</button>
     <button type="button" class="btn btn-secondary">6</button>
     <button type="button" class="btn btn-secondary">7</button>
   </div>
-  <div class="btn-group">
+  <div class="btn-group" role="group" aria-label="Third group">
     <button type="button" class="btn btn-secondary">8</button>
   </div>
 </div>
@@ -50,41 +57,36 @@ Combine sets of button groups into button toolbars for more complex components.
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to the `.btn-group`.
 
 <div class="bs-example">
-  <div class="btn-toolbar" role="toolbar">
-    <div class="btn-group btn-group-lg">
-      <button type="button" class="btn btn-secondary">Left</button>
-      <button type="button" class="btn btn-secondary">Middle</button>
-      <button type="button" class="btn btn-secondary">Right</button>
-    </div>
+  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+    <button type="button" class="btn btn-secondary">Left</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
+    <button type="button" class="btn btn-secondary">Right</button>
   </div>
-  <div class="btn-toolbar" role="toolbar">
-    <div class="btn-group">
-      <button type="button" class="btn btn-secondary">Left</button>
-      <button type="button" class="btn btn-secondary">Middle</button>
-      <button type="button" class="btn btn-secondary">Right</button>
-    </div>
+  <br>
+  <div class="btn-group" role="group" aria-label="Default button group">
+    <button type="button" class="btn btn-secondary">Left</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
+    <button type="button" class="btn btn-secondary">Right</button>
   </div>
-  <div class="btn-toolbar" role="toolbar">
-    <div class="btn-group btn-group-sm">
-      <button type="button" class="btn btn-secondary">Left</button>
-      <button type="button" class="btn btn-secondary">Middle</button>
-      <button type="button" class="btn btn-secondary">Right</button>
-    </div>
+  <br>
+  <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+    <button type="button" class="btn btn-secondary">Left</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
+    <button type="button" class="btn btn-secondary">Right</button>
   </div>
-  <div class="btn-toolbar" role="toolbar">
-    <div class="btn-group btn-group-xs">
-      <button type="button" class="btn btn-secondary">Left</button>
-      <button type="button" class="btn btn-secondary">Middle</button>
-      <button type="button" class="btn btn-secondary">Right</button>
-    </div>
+  <br>
+  <div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
+    <button type="button" class="btn btn-secondary">Left</button>
+    <button type="button" class="btn btn-secondary">Middle</button>
+    <button type="button" class="btn btn-secondary">Right</button>
   </div>
 </div>
 
 {% highlight html %}
-<div class="btn-group btn-group-lg">...</div>
-<div class="btn-group">...</div>
-<div class="btn-group btn-group-sm">...</div>
-<div class="btn-group btn-group-xs">...</div>
+<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
+<div class="btn-group" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
+<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
 {% endhighlight %}
 
 ### Nesting
@@ -92,12 +94,12 @@ Instead of applying button sizing classes to every button in a group, just add `
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
 {% example html %}
-<div class="btn-group">
+<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
   <button type="button" class="btn btn-secondary">1</button>
   <button type="button" class="btn btn-secondary">2</button>
 
-  <div class="btn-group">
-    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+  <div class="btn-group" role="group">
+    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
       Dropdown
     </button>
     <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
@@ -113,11 +115,11 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
 Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
 
 <div class="bs-example">
-  <div class="btn-group-vertical">
+  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
     <button type="button" class="btn btn-secondary">Button</button>
     <button type="button" class="btn btn-secondary">Button</button>
-    <div class="btn-group">
-      <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
@@ -127,8 +129,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
     </div>
     <button type="button" class="btn btn-secondary">Button</button>
     <button type="button" class="btn btn-secondary">Button</button>
-    <div class="btn-group">
-      <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
@@ -136,8 +138,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
         <li><a href="#">Dropdown link</a></li>
       </ul>
     </div>
-    <div class="btn-group">
-      <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
@@ -145,8 +147,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
         <li><a href="#">Dropdown link</a></li>
       </ul>
     </div>
-    <div class="btn-group">
-      <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+    <div class="btn-group" role="group">
+      <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
@@ -176,18 +178,19 @@ Make a group of buttons stretch at equal sizes to span the entire width of its p
 
 Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.
 
+{% example html %}
 <div class="bs-example">
-  <div class="btn-group btn-group-justified">
+  <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
     <a class="btn btn-secondary" href="#" role="button">Left</a>
     <a class="btn btn-secondary" href="#" role="button">Middle</a>
     <a class="btn btn-secondary" href="#" role="button">Right</a>
   </div>
   <br>
-  <div class="btn-group btn-group-justified">
+  <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
     <a class="btn btn-secondary" href="#" role="button">Left</a>
     <a class="btn btn-secondary" href="#" role="button">Middle</a>
-    <div class="btn-group">
-      <a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown">
+    <div class="btn-group" role="group">
+      <a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown"role="button" aria-expanded="false">
         Dropdown
       </a>
       <ul class="dropdown-menu" role="menu">
@@ -200,41 +203,29 @@ Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.
     </div>
   </div>
 </div>
+{% endexample %}
 
-{% highlight html %}
-<div class="btn-group btn-group-justified">
-  ...
+<div class="bs-callout bs-callout-warning">
+  <h4>Links acting as buttons</h4>
+  <p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
 </div>
-{% endhighlight %}
 
 #### With `<button>` elements
 
-To use justified button groups with `<button>` elements, **you must wrap each button in a button group**. Most browsers don't properly apply our CSS for justification to `<button>` elements, but since we support button dropdowns, we can workaround that.
+To use justified button groups with `<button>` elements, **you must wrap each button in a button group**. Most browsers don't properly apply our CSS for justification to `<button>` elements, but since we support button dropdowns, we can work around that.
 
+{% example html %}
 <div class="bs-example">
-  <div class="btn-group btn-group-justified">
-    <div class="btn-group">
+  <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
+    <div class="btn-group" role="group">
       <button type="button" class="btn btn-secondary">Left</button>
     </div>
-    <div class="btn-group">
+    <div class="btn-group" role="group">
       <button type="button" class="btn btn-secondary">Middle</button>
     </div>
-    <div class="btn-group">
+    <div class="btn-group" role="group">
       <button type="button" class="btn btn-secondary">Right</button>
     </div>
   </div>
 </div>
-
-{% highlight html %}
-<div class="btn-group btn-group-justified">
-  <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Left</button>
-  </div>
-  <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Middle</button>
-  </div>
-  <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Right</button>
-  </div>
-</div>
-{% endhighlight %}
+{% endexample %}