diff options
Diffstat (limited to 'docs/_includes/components/button-groups.html')
| -rw-r--r-- | docs/_includes/components/button-groups.html | 143 |
1 files changed, 75 insertions, 68 deletions
diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html index 216e4426b..4a1fc86f8 100644 --- a/docs/_includes/components/button-groups.html +++ b/docs/_includes/components/button-groups.html @@ -8,17 +8,24 @@ <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><button></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> + <h3 id="btn-groups-single">Basic example</h3> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <div class="bs-example"> - <div class="btn-group" style="margin: 9px 0 5px;"> + <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> {% highlight html %} -<div class="btn-group"> +<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> @@ -28,79 +35,74 @@ <h3 id="btn-groups-toolbar">Button toolbar</h3> <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p> <div class="bs-example"> - <div class="btn-toolbar" role="toolbar" style="margin: 0;"> - <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-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> </div> - <div class="btn-group"> + <div class="btn-group" role="group" aria-label="Second group"> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">7</button> </div> - <div class="btn-group"> + <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-default">8</button> </div> </div> </div> {% highlight html %} -<div class="btn-toolbar" role="toolbar"> - <div class="btn-group">...</div> - <div class="btn-group">...</div> - <div class="btn-group">...</div> +<div class="btn-toolbar" role="toolbar" aria-label="..."> + <div class="btn-group" role="group" aria-label="...">...</div> + <div class="btn-group" role="group" aria-label="...">...</div> + <div class="btn-group" role="group" aria-label="...">...</div> </div> {% endhighlight %} <h3 id="btn-groups-sizing">Sizing</h3> <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p> <div class="bs-example"> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group btn-group-lg"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> + <div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> + <button type="button" class="btn btn-default">Left</button> + <button type="button" class="btn btn-default">Middle</button> + <button type="button" class="btn btn-default">Right</button> </div> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> + <br> + <div class="btn-group" role="group" aria-label="Default button group"> + <button type="button" class="btn btn-default">Left</button> + <button type="button" class="btn btn-default">Middle</button> + <button type="button" class="btn btn-default">Right</button> </div> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group btn-group-sm"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">Right</button> - </div> + <br> + <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> + <button type="button" class="btn btn-default">Left</button> + <button type="button" class="btn btn-default">Middle</button> + <button type="button" class="btn btn-default">Right</button> </div> - <div class="btn-toolbar" role="toolbar"> - <div class="btn-group btn-group-xs"> - <button type="button" class="btn btn-default">Left</button> - <button type="button" class="btn btn-default">Middle</button> - <button type="button" class="btn btn-default">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-default">Left</button> + <button type="button" class="btn btn-default">Middle</button> + <button type="button" class="btn btn-default">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 %} <h3 id="btn-groups-nested">Nesting</h3> <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p> <div class="bs-example"> - <div class="btn-group"> + <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> - <div class="btn-group"> - <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> @@ -112,12 +114,12 @@ </div> </div> {% highlight html %} -<div class="btn-group"> +<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> - <div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> @@ -132,11 +134,11 @@ <h3 id="btn-groups-vertical">Vertical variation</h3> <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p> <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-default">Button</button> <button type="button" class="btn btn-default">Button</button> - <div class="btn-group"> - <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> @@ -147,8 +149,8 @@ </div> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> - <div class="btn-group"> - <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> @@ -157,8 +159,8 @@ <li><a href="#">Dropdown link</a></li> </ul> </div> - <div class="btn-group"> - <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> @@ -167,8 +169,8 @@ <li><a href="#">Dropdown link</a></li> </ul> </div> - <div class="btn-group"> - <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> @@ -180,7 +182,7 @@ </div> </div> {% highlight html %} -<div class="btn-group-vertical"> +<div class="btn-group-vertical" role="group" aria-label="..."> ... </div> {% endhighlight %} @@ -201,17 +203,17 @@ <h4>With <code><a></code> elements</h4> <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p> <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 href="#" class="btn btn-default" role="button">Left</a> <a href="#" class="btn btn-default" role="button">Middle</a> <a href="#" class="btn btn-default" 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 href="#" class="btn btn-default" role="button">Left</a> <a href="#" class="btn btn-default" role="button">Middle</a> - <div class="btn-group"> - <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <div class="btn-group" role="group"> + <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> @@ -225,35 +227,40 @@ </div> </div> {% highlight html %} -<div class="btn-group btn-group-justified"> +<div class="btn-group btn-group-justified" role="group" aria-label="..."> ... </div> {% endhighlight %} + <div class="bs-callout bs-callout-warning"> + <h4>Links acting as buttons</h4> + <p>If the <code><a></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> + <h4>With <code><button></code> elements</h4> - <p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can workaround that.</p> + <p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can work around that.</p> <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-default">Left</button> </div> - <div class="btn-group"> + <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> - <div class="btn-group"> + <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div> </div> {% highlight html %} -<div class="btn-group btn-group-justified"> - <div class="btn-group"> +<div class="btn-group btn-group-justified" role="group" aria-label="..."> + <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> </div> - <div class="btn-group"> + <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> - <div class="btn-group"> + <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div> |