Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Assorted accessibility (and some consistency) fixes for documentation #14951

Closed
wants to merge 29 commits into from
Closed

Assorted accessibility (and some consistency) fixes for documentation #14951

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
584c2a3
Add aria-expanded and role to dropdown demos/code
patrickhlauke Oct 30, 2014
a331c72
Add aria-expanded and remove tabindex=-1
patrickhlauke Oct 30, 2014
d09cba0
Add aria-pressed advice to active state button
patrickhlauke Oct 30, 2014
c43e0b9
Make « and » SR friendly, suppress ← and →
patrickhlauke Oct 30, 2014
f2a088f
Fixed inconsistent nav link names
patrickhlauke Oct 30, 2014
3cfc158
Added role and aria-label to groups/toolbars
patrickhlauke Oct 30, 2014
3facc46
Advice on adding correct role to links as buttons
patrickhlauke Oct 30, 2014
bff5442
Expand link functionality caveat for kbd user case
patrickhlauke Oct 30, 2014
7a1717f
Add role="tabpanel" and aria-controls to examples
patrickhlauke Oct 31, 2014
3425f96
Removed role=tablist, added clarification on tabs
patrickhlauke Oct 31, 2014
501b782
Removed superfluous input-group
patrickhlauke Oct 31, 2014
d36eb26
Expanded advice about adding labels
patrickhlauke Oct 31, 2014
491f1b3
Inconsistent navigation/headings in CSS section
patrickhlauke Oct 31, 2014
59d0dfe
Added some labelling, aria-describedby for help
patrickhlauke Oct 31, 2014
83b4c70
Revert "Removed superfluous input-group"
patrickhlauke Oct 31, 2014
285e01c
Use only the input-group email field in the example
patrickhlauke Oct 31, 2014
e1c89b4
example input and label in a .form-group
patrickhlauke Oct 31, 2014
8e00d3c
Add warning about <a> acting as buttons
patrickhlauke Oct 31, 2014
d93b708
Convey validation styles/icons to SR users
patrickhlauke Oct 31, 2014
b9913cd
Advice on use of Navs in as tablist or navigation
patrickhlauke Oct 31, 2014
a4251de
Advice on contextual foreground/background colors
patrickhlauke Oct 31, 2014
d2c0664
Advice on color for buttons used to convey meaning
patrickhlauke Oct 31, 2014
f92e6d7
Advice on contextual classes to convey meaning
patrickhlauke Oct 31, 2014
a81c35c
add nav elements, denote current link
patrickhlauke Oct 31, 2014
beffab6
denote current .active link with extra sr-only text
patrickhlauke Oct 31, 2014
9b57d9b
Addition to the callout on using role="navigation"
patrickhlauke Nov 1, 2014
672473d
Add color contrast note to accessibility section
patrickhlauke Nov 1, 2014
2eb04f0
Typos, style, reverting (current page) use
patrickhlauke Nov 4, 2014
93bebc7
Minor stray space
patrickhlauke Nov 4, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions docs/_includes/components/button-dropdowns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
<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>
Expand All @@ -22,7 +22,7 @@ <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
</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>
Expand All @@ -32,7 +32,7 @@ <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
</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>
Expand All @@ -42,7 +42,7 @@ <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
</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>
Expand All @@ -52,7 +52,7 @@ <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
</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>
Expand All @@ -62,7 +62,7 @@ <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
</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>
Expand All @@ -75,7 +75,7 @@ <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
{% 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">
Expand All @@ -93,7 +93,7 @@ <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
<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>
Expand All @@ -107,7 +107,7 @@ <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
</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>
Expand All @@ -121,7 +121,7 @@ <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
</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>
Expand All @@ -135,7 +135,7 @@ <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
</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>
Expand All @@ -149,7 +149,7 @@ <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
</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>
Expand All @@ -163,7 +163,7 @@ <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
</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>
Expand All @@ -180,7 +180,7 @@ <h3 id="btn-dropdowns-split">Split button dropdowns</h3>
<!-- 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>
Expand All @@ -199,7 +199,7 @@ <h3 id="btn-dropdowns-sizing">Sizing</h3>
<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">
Expand All @@ -213,7 +213,7 @@ <h3 id="btn-dropdowns-sizing">Sizing</h3>
</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">
Expand All @@ -227,7 +227,7 @@ <h3 id="btn-dropdowns-sizing">Sizing</h3>
</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">
Expand All @@ -243,7 +243,7 @@ <h3 id="btn-dropdowns-sizing">Sizing</h3>
{% 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">
Expand All @@ -253,7 +253,7 @@ <h3 id="btn-dropdowns-sizing">Sizing</h3>

<!-- 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">
Expand All @@ -263,7 +263,7 @@ <h3 id="btn-dropdowns-sizing">Sizing</h3>

<!-- 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">
Expand All @@ -278,7 +278,7 @@ <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
<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>
Expand All @@ -292,7 +292,7 @@ <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
</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>
Expand All @@ -309,7 +309,7 @@ <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
{% 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>
Expand Down
Loading