diff options
Diffstat (limited to 'docs/_includes/components')
| -rw-r--r-- | docs/_includes/components/button-dropdowns.html | 46 | ||||
| -rw-r--r-- | docs/_includes/components/button-groups.html | 143 | ||||
| -rw-r--r-- | docs/_includes/components/dropdowns.html | 10 | ||||
| -rw-r--r-- | docs/_includes/components/input-groups.html | 12 | ||||
| -rw-r--r-- | docs/_includes/components/navbar.html | 4 | ||||
| -rw-r--r-- | docs/_includes/components/navs.html | 55 | ||||
| -rw-r--r-- | docs/_includes/components/pagination.html | 46 |
7 files changed, 165 insertions, 151 deletions
diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html index 165e0777e..871370d43 100644 --- a/docs/_includes/components/button-dropdowns.html +++ b/docs/_includes/components/button-dropdowns.html @@ -12,7 +12,7 @@ <p>Turn a button into a dropdown toggle with some basic markup changes.</p> <div class="bs-example"> <div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -22,7 +22,7 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -32,7 +32,7 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -42,7 +42,7 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -52,7 +52,7 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -62,7 +62,7 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -75,7 +75,7 @@ {% highlight html %} <!-- Single button --> <div class="btn-group"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> @@ -93,7 +93,7 @@ <div class="bs-example"> <div class="btn-group"> <button type="button" class="btn btn-default">Default</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -107,7 +107,7 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -121,7 +121,7 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -135,7 +135,7 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -149,7 +149,7 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -163,7 +163,7 @@ </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -180,7 +180,7 @@ <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -199,7 +199,7 @@ <div class="bs-example"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> - <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> + <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> @@ -213,7 +213,7 @@ </div><!-- /btn-toolbar --> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> + <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> @@ -227,7 +227,7 @@ </div><!-- /btn-toolbar --> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> - <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> + <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> @@ -243,7 +243,7 @@ {% highlight html %} <!-- Large button group --> <div class="btn-group"> - <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> + <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> @@ -253,7 +253,7 @@ <!-- Small button group --> <div class="btn-group"> - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> + <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> @@ -263,7 +263,7 @@ <!-- Extra small button group --> <div class="btn-group"> - <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> + <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> @@ -278,7 +278,7 @@ <div class="btn-toolbar" role="toolbar"> <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -292,7 +292,7 @@ </div><!-- /btn-group --> <div class="btn-group dropup"> <button type="button" class="btn btn-primary">Right dropup</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -309,7 +309,7 @@ {% highlight html %} <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> 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> diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html index 8f0b0c942..6bedbc81b 100644 --- a/docs/_includes/components/dropdowns.html +++ b/docs/_includes/components/dropdowns.html @@ -7,7 +7,7 @@ <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> @@ -21,7 +21,7 @@ </div><!-- /example --> {% highlight html %} <div class="dropdown"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> @@ -54,7 +54,7 @@ <p>Add a header to label sections of actions in any dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> @@ -80,7 +80,7 @@ <p>Add a divider to separate series of links in a dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> @@ -105,7 +105,7 @@ <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index bd29dbe49..31ddfd0c4 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -187,7 +187,7 @@ <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -203,7 +203,7 @@ <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -221,7 +221,7 @@ <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -237,7 +237,7 @@ <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -258,7 +258,7 @@ <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Action</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> @@ -278,7 +278,7 @@ <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Action</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html index 5db4d52cf..d0f8a67d6 100644 --- a/docs/_includes/components/navbar.html +++ b/docs/_includes/components/navbar.html @@ -40,7 +40,7 @@ <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> - <li class="active"><a href="#">Link</a></li> + <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> @@ -95,7 +95,7 @@ <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> - <li class="active"><a href="#">Link</a></li> + <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index c9fc189c5..2ea20d0e8 100644 --- a/docs/_includes/components/navs.html +++ b/docs/_includes/components/navs.html @@ -3,38 +3,45 @@ <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p> + <div class="bs-callout bs-callout-info"> + <h4>Using navs for tab panels requires JavaScript tabs plugin</h4> + <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p> + </div> + + <div class="bs-callout bs-callout-warning"> + <h4>Make navs used as navigation accessible</h4> + <p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p> + </div> + <h2 id="nav-tabs">Tabs</h2> <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <div class="bs-example"> - <ul class="nav nav-tabs" role="tablist"> + <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-tabs" role="tablist"> +<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> {% endhighlight %} - <div class="bs-callout bs-callout-info"> - <h4>Requires JavaScript tabs plugin</h4> - <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p> - </div> + <h2 id="nav-pills">Pills</h2> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <div class="bs-example"> - <ul class="nav nav-pills" role="tablist"> + <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-pills" role="tablist"> +<ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> @@ -42,14 +49,14 @@ {% endhighlight %} <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <div class="bs-example"> - <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;"> + <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-pills nav-stacked" role="tablist"> +<ul class="nav nav-pills nav-stacked"> ... </ul> {% endhighlight %} @@ -63,23 +70,23 @@ <p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> </div> <div class="bs-example"> - <ul class="nav nav-tabs nav-justified" role="tablist"> + <ul class="nav nav-tabs nav-justified"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <br> - <ul class="nav nav-pills nav-justified" role="tablist"> + <ul class="nav nav-pills nav-justified"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-tabs nav-justified" role="tablist"> +<ul class="nav nav-tabs nav-justified"> ... </ul> -<ul class="nav nav-pills nav-justified" role="tablist"> +<ul class="nav nav-pills nav-justified"> ... </ul> {% endhighlight %} @@ -94,14 +101,14 @@ </div> <div class="bs-example"> - <ul class="nav nav-pills" role="tablist"> + <ul class="nav nav-pills"> <li role="presentation"><a href="#">Clickable link</a></li> <li role="presentation"><a href="#">Clickable link</a></li> <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-pills" role="tablist"> +<ul class="nav nav-pills"> ... <li role="presentation" class="disabled"><a href="#">Disabled link</a></li> ... @@ -114,11 +121,11 @@ <h3>Tabs with dropdowns</h3> <div class="bs-example"> - <ul class="nav nav-tabs" role="tablist"> + <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Help</a></li> <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> @@ -132,10 +139,10 @@ </ul> </div> {% highlight html %} -<ul class="nav nav-tabs" role="tablist"> +<ul class="nav nav-tabs"> ... <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> @@ -148,11 +155,11 @@ <h3>Pills with dropdowns</h3> <div class="bs-example"> - <ul class="nav nav-pills" role="tablist"> + <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Help</a></li> <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> @@ -166,10 +173,10 @@ </ul> </div><!-- /example --> {% highlight html %} -<ul class="nav nav-pills" role="tablist"> +<ul class="nav nav-pills"> ... <li role="presentation" class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> diff --git a/docs/_includes/components/pagination.html b/docs/_includes/components/pagination.html index 27e5b6247..f5e78977a 100644 --- a/docs/_includes/components/pagination.html +++ b/docs/_includes/components/pagination.html @@ -8,26 +8,26 @@ <div class="bs-example"> <nav> <ul class="pagination"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pagination"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> {% endhighlight %} @@ -37,30 +37,30 @@ <div class="bs-example"> <nav> <ul class="pagination"> - <li class="disabled"><a href="#">«</a></li> + <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pagination"> - <li class="disabled"><a href="#">«</a></li> + <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul> </nav> {% endhighlight %} - <p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p> + <p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p> {% highlight html %} <nav> <ul class="pagination"> - <li class="disabled"><span>«</span></li> + <li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li> <li class="active"><span>1 <span class="sr-only">(current)</span></span></li> ... </ul> @@ -73,35 +73,35 @@ <div class="bs-example"> <nav> <ul class="pagination pagination-lg"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> <nav> <ul class="pagination"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> <nav> <ul class="pagination pagination-sm"> - <li><a href="#">«</a></li> + <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> - <li><a href="#">»</a></li> + <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li> </ul> </nav> </div> @@ -139,16 +139,16 @@ <div class="bs-example"> <nav> <ul class="pager"> - <li class="previous"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pager"> - <li class="previous"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> {% endhighlight %} @@ -159,16 +159,16 @@ <div class="bs-example"> <nav> <ul class="pager"> - <li class="previous disabled"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> </div> {% highlight html %} <nav> <ul class="pager"> - <li class="previous disabled"><a href="#">← Older</a></li> - <li class="next"><a href="#">Newer →</a></li> + <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li> + <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> {% endhighlight %} |