Skip to content

B
bootstrap
Commit 9889948f authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

abandon activedescendant because it was awful

parent a7b49a7d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 89 deletions
docs/assets/css/bootstrap.css
View file @ 9889948f
......@@ -2419,18 +2419,13 @@ table .span24 {
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.dropdown-menu:hover #aria-active > a:hover,
.dropdown-menu #aria-active > a {
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
}
.dropdown-menu:hover #aria-active > a {
color: #333333;
background-color: #ffffff;
outline: 0;
}
.open {
......
docs/assets/js/bootstrap-dropdown.js
View file @ 9889948f
......@@ -26,8 +26,7 @@
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle="dropdown"]'
, active = 'aria-active'
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
......@@ -61,15 +60,16 @@
}
, keydown: function (e) {
var $this = $(this)
var $this
, $items
, $active
, $parent
, isActive
, index
if (e.keyCode == 27) return $this.click()
if (!/(38|40|27)/.test(e.keyCode)) return
if (!/(38|40|13)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
......@@ -78,27 +78,23 @@
$parent = getParent($this)
$parent.hasClass('open') || $this.click()
isActive = $parent.hasClass('open')
$items = $('[role=menu] li:not(.divider)', $parent)
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return
index = $items.index($items.filter('#' + active))
$items
.eq(index)
.attr('id', '')
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
else if (e.keyCode == 40 && index < $items.length - 1) index++ // down
else if (e.keyCode == 13 && ~index) return $items.eq(index).find('a').click() // enter
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.attr('id', active)
.focus()
}
}
......@@ -106,8 +102,6 @@
function clearMenus() {
getParent($(toggle))
.removeClass('open')
.find('#' + active)
.attr('id', '')
}
function getParent($this) {
......@@ -145,12 +139,14 @@
* =================================== */
$(function () {
console.log(toggle + ', ' + toggle + ' + [role=menu]')
$('html')
.on('click.dropdown.data-api', clearMenus)
$('body')
.on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
}(window.jQuery);
\ No newline at end of file
docs/assets/js/bootstrap.js
View file @ 9889948f
......@@ -594,8 +594,7 @@
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle="dropdown"]'
, active = 'aria-active'
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
......@@ -629,15 +628,16 @@
}
, keydown: function (e) {
var $this = $(this)
var $this
, $items
, $active
, $parent
, isActive
, index
if (e.keyCode == 27) return $this.click()
if (!/(38|40|27)/.test(e.keyCode)) return
if (!/(38|40|13)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
......@@ -646,27 +646,23 @@
$parent = getParent($this)
$parent.hasClass('open') || $this.click()
isActive = $parent.hasClass('open')
$items = $('[role=menu] li:not(.divider)', $parent)
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return
index = $items.index($items.filter('#' + active))
$items
.eq(index)
.attr('id', '')
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
else if (e.keyCode == 40 && index < $items.length - 1) index++ // down
else if (e.keyCode == 13 && ~index) return $items.eq(index).find('a').click() // enter
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.attr('id', active)
.focus()
}
}
......@@ -674,8 +670,6 @@
function clearMenus() {
getParent($(toggle))
.removeClass('open')
.find('#' + active)
.attr('id', '')
}
function getParent($this) {
......@@ -713,12 +707,14 @@
* =================================== */
$(function () {
console.log(toggle + ', ' + toggle + ' + [role=menu]')
$('html')
.on('click.dropdown.data-api', clearMenus)
$('body')
.on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
}(window.jQuery);/* =========================================================
......
docs/assets/js/bootstrap.min.js
View file @ 9889948f
This diff is collapsed.
docs/javascript.html
View file @ 9889948f
......@@ -374,7 +374,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop1">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">Action</a></li>
<li><a tabindex="-1" href="#anotherAction">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
......@@ -384,7 +384,7 @@ $('#myModal').on('hidden', function () {
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop2">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
......@@ -396,7 +396,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop3">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
......@@ -413,7 +413,7 @@ $('#myModal').on('hidden', function () {
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop4">
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
......@@ -423,7 +423,7 @@ $('#myModal').on('hidden', function () {
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
......@@ -433,7 +433,7 @@ $('#myModal').on('hidden', function () {
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
......@@ -462,7 +462,7 @@ $('#myModal').on('hidden', function () {
Dropdown
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
......@@ -480,7 +480,7 @@ $('#myModal').on('hidden', function () {
Dropdown
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
......
docs/templates/pages/javascript.mustache
View file @ 9889948f
......@@ -297,7 +297,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop1">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
......@@ -307,7 +307,7 @@ $('#myModal').on('hidden', function () {
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop2">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
......@@ -319,7 +319,7 @@ $('#myModal').on('hidden', function () {
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop3">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
......@@ -336,7 +336,7 @@ $('#myModal').on('hidden', function () {
<li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop4">
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
......@@ -346,7 +346,7 @@ $('#myModal').on('hidden', function () {
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
......@@ -356,7 +356,7 @@ $('#myModal').on('hidden', function () {
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
......@@ -385,7 +385,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Dropdown{{/i}}
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Another action{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a tabindex="-1" href="#"&gt;{{_i}}Something else here{{/i}}&lt;/a&gt;&lt;/li&gt;
......@@ -403,7 +403,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Dropdown{{/i}}
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
......
js/bootstrap-dropdown.js
View file @ 9889948f
......@@ -26,8 +26,7 @@
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle="dropdown"]'
, active = 'aria-active'
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
......@@ -61,15 +60,16 @@
}
, keydown: function (e) {
var $this = $(this)
var $this
, $items
, $active
, $parent
, isActive
, index
if (e.keyCode == 27) return $this.click()
if (!/(38|40|27)/.test(e.keyCode)) return
if (!/(38|40|13)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
......@@ -78,27 +78,23 @@
$parent = getParent($this)
$parent.hasClass('open') || $this.click()
isActive = $parent.hasClass('open')
$items = $('[role=menu] li:not(.divider)', $parent)
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider) a', $parent)
if (!$items.length) return
index = $items.index($items.filter('#' + active))
$items
.eq(index)
.attr('id', '')
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
else if (e.keyCode == 40 && index < $items.length - 1) index++ // down
else if (e.keyCode == 13 && ~index) return $items.eq(index).find('a').click() // enter
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.attr('id', active)
.focus()
}
}
......@@ -106,8 +102,6 @@
function clearMenus() {
getParent($(toggle))
.removeClass('open')
.find('#' + active)
.attr('id', '')
}
function getParent($this) {
......@@ -145,12 +139,14 @@
* =================================== */
$(function () {
console.log(toggle + ', ' + toggle + ' + [role=menu]')
$('html')
.on('click.dropdown.data-api', clearMenus)
$('body')
.on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
}(window.jQuery);
\ No newline at end of file
less/dropdowns.less
View file @ 9889948f
......@@ -94,17 +94,13 @@
// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.dropdown-menu:hover #aria-active > a:hover,
.dropdown-menu #aria-active > a {
.dropdown-menu .active > a:hover {
color: @dropdownLinkColorHover;
text-decoration: none;
background-color: @dropdownLinkBackgroundHover;
}
.dropdown-menu:hover #aria-active > a {
color: @dropdownLinkColor;
background-color: @dropdownBackground;
outline: 0;
}
// Open state for the dropdown
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment