root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

button.js: Fix keyboard navigation 

This PR fixes the keyboard navigation again while still keeping #16223 fixed.

Closes #19192
This commit is contained in:
Fabrice Daugan 2016-02-14 17:08:03 +01:00 committed by Chris Rebert
parent ad5e6565cc
commit ad1e98d094
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/button.js
View File

@ -108,10 +108,15 @@
$(document) $(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) { .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
var $btn = $(e.target) var $btn = $(e.target).closest('.btn')
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
Plugin.call($btn, 'toggle') Plugin.call($btn, 'toggle')
if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) {
// Prevent double click on radios, and the double selections (so cancellation) on checkboxes
e.preventDefault()
// The target component still receive the focus
if ($btn.is('input,button')) $btn.trigger('focus')
else $btn.find('input:visible,button:visible').first().trigger('focus')
}
}) })
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
$(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type)) $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))

2
js/tests/visual/button.html
View File

@ -22,6 +22,8 @@
<h1>Button <small>Bootstrap Visual Test</small></h1> <h1>Button <small>Bootstrap Visual Test</small></h1>
</div> </div>
<p>Try interacting via mouse, via keyboard, and via keyboard after first interacting via mouse. (Refresh the page between each trial.)</p>
<button type="button" data-loading-text="Loading for 3 seconds..." class="btn btn-primary js-loading-button"> <button type="button" data-loading-text="Loading for 3 seconds..." class="btn btn-primary js-loading-button">
Loading state Loading state
</button> </button>