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 49a9b9292814ce5c9350276f5c1f8b4ccd27817a..252531cfe5b7361e50888c31702a60809299bb56 100644 (file)
--- 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 d92a083296352850dd12f2cec0919de60055dd57..de060eabdac97a155eefddb2c1d5f667162388ff 100644 (file)
--- 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>