diff options
| -rw-r--r-- | docs/_includes/js/dropdowns.html | 16 | ||||
| -rw-r--r-- | js/dropdown.js | 8 |
2 files changed, 14 insertions, 10 deletions
diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html index 27b06fe95..2f03bddc1 100644 --- a/docs/_includes/js/dropdowns.html +++ b/docs/_includes/js/dropdowns.html @@ -20,7 +20,7 @@ <div class="collapse navbar-collapse bs-example-js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> - <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> @@ -30,7 +30,7 @@ </ul> </li> <li class="dropdown"> - <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a> + <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 2 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> @@ -42,7 +42,7 @@ </ul> <ul class="nav navbar-nav navbar-right"> <li id="fat-menu" class="dropdown"> - <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a> + <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 3 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> @@ -62,7 +62,7 @@ <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> - <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a> + <a id="drop4" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> @@ -72,7 +72,7 @@ </ul> </li> <li class="dropdown"> - <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a> + <a id="drop5" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown 2 <span class="caret"></span></a> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> @@ -82,7 +82,7 @@ </ul> </li> <li class="dropdown"> - <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <span class="caret"></span></a> + <a id="drop6" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown 3 <span class="caret"></span></a> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> @@ -102,7 +102,7 @@ <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p> {% highlight html %} <div class="dropdown"> - <a data-toggle="dropdown" href="#">Dropdown trigger</a> + <a data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown trigger</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> @@ -111,7 +111,7 @@ <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> {% highlight html %} <div class="dropdown"> - <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> + <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> diff --git a/js/dropdown.js b/js/dropdown.js index bc671fef0..1924f70ae 100644 --- a/js/dropdown.js +++ b/js/dropdown.js @@ -42,7 +42,9 @@ if (e.isDefaultPrevented()) return - $this.trigger('focus') + $this + .trigger('focus') + .attr('aria-expanded', 'true') $parent .toggleClass('open') @@ -88,11 +90,13 @@ if (e && e.which === 3) return $(backdrop).remove() $(toggle).each(function () { - var $parent = getParent($(this)) + var $this = $(this) + var $parent = getParent($this) var relatedTarget = { relatedTarget: this } if (!$parent.hasClass('open')) return $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) if (e.isDefaultPrevented()) return + $this.attr('aria-expanded', 'false') $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget) }) } |