diff options
| author | Patrick H. Lauke <[email protected]> | 2015-06-02 09:41:40 +0100 |
|---|---|---|
| committer | Patrick H. Lauke <[email protected]> | 2015-06-02 11:03:21 +0100 |
| commit | 5fd7bc1554d492bdd5794d35fce515fe951439a6 (patch) | |
| tree | 61ac7cd8243c6d6c4c6e8de4b373132b01419df7 /docs/_includes/components/input-groups.html | |
| parent | 3b59b97c626bf2accef8217339b04712666c36d9 (diff) | |
| download | bootstrap-5fd7bc1554d492bdd5794d35fce515fe951439a6.tar.xz bootstrap-5fd7bc1554d492bdd5794d35fce515fe951439a6.zip | |
generalize dropdowns / drop role="menu"
as role="menu" is a very specific (and strict) ARIA pattern for
desktop-like application menus, and our dropdowns are often used
as pure navigation dropdowns, this change abandons ARIA menus for
a more open-ended and light-weight approach
(see http://heydonworks.com/practical_aria_examples/#submenus and
http://www.w3.org/WAI/tutorials/menus/flyout/#improve-screen-reader-support-using-wai-aria)
note that in dropdown.js, switched to now target ``.dropdown-menu``
instead of ``role["menu"]`` - this also prevents bootstrap scripts
from "bleeding" into non-bootstrap components on the same page.
also removed the ``role=["listbox"]`` part, which appears to be
vestigial/unused (only place in bootstrap that uses that
role are carousels, and their key handling is done separately)
Diffstat (limited to 'docs/_includes/components/input-groups.html')
| -rw-r--r-- | docs/_includes/components/input-groups.html | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index a42370e72..8d42b27ce 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -191,8 +191,8 @@ <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" aria-expanded="false">Action <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -207,8 +207,8 @@ <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-btn"> - <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"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -225,8 +225,8 @@ <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" aria-expanded="false">Action <span class="caret"></span></button> - <ul class="dropdown-menu" role="menu"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -241,8 +241,8 @@ <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> - <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"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> + <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -262,11 +262,11 @@ <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default">Action</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" role="menu"> + <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -282,11 +282,11 @@ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> <div class="input-group-btn"> <button type="button" class="btn btn-default">Action</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu dropdown-menu-right" role="menu"> + <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> |