From: Fabrice Daugan <fabrice.daugan@gmail.com>
Date: Sun, 14 Feb 2016 16:08:03 +0000 (+0100)
Subject: button.js: Fix keyboard navigation
X-Git-Tag: v3.3.7~120
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ad1e98d094468279da541de6b695681b169da8b3;p=thirdparty%2Fbootstrap.git

button.js: Fix keyboard navigation

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

Closes #19192
---

diff --git a/js/button.js b/js/button.js
index 49a9b92928..252531cfe5 100644
--- 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
index d92a083296..de060eabda 100644
--- 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>