button.js: Fix keyboard navigation

This PR fixes the keyboard navigation again while still keeping #16223 fixed. Closes #19192
twbs · Feb 16, 2016 · ad1e98d · ad1e98d
1 parent ad5e656
commit ad1e98d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/js/button.js b/js/button.js
@@ -108,10 +108,15 @@
 
   $(document)
     .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
-      var $btn = $(e.target)
-      if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
+      var $btn = $(e.target).closest('.btn')
       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) {
       $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))

diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
@@ -22,6 +22,8 @@
     <h1>Button <small>Bootstrap Visual Test</small></h1>
   </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">
     Loading state
   </button>