Make "Copy" buttons actual buttons

This makes them keyboard-accessible. For mouse users, the only change
here is that the focus outline will remain on the button once clicked
(in future, this can be solved with :focus-ring, but for now this would
require a polyfill). the tooltip is explicitly hidden on `mouseleave`,
so even though the `<button>` retains focus after clicking, the tooltip
won't stay visible once mouse user moves away.
the mouse hover styles have explicitly not been make to also apply to
:focus, so as to minimise the visual impact for
mouse users (though the tooltip remains visible)
 - but due to the default outline and the custom tooltip, it
should be fairly clear when keyboard users set focus to a copy button
too.

diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js
index 2b53556b11a0faf234d67540f965b9ebc589afea..b98c3a5ea142783f7de862f3e3d06e81e47df339 100644 (file)
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@@ -55,9 +55,16 @@
 
     // Insert copy to clipboard button before .highlight
     $('.highlight').each(function () {
-      var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
+      var btnHtml = '<div class="bd-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
       $(this).before(btnHtml)
-      $('.btn-clipboard').tooltip()
+      $('.btn-clipboard')
+        .tooltip()
+        .on('mouseleave', function () {
+          // explicitly hide tooltip, since after clicking it remains
+          // focused (as it's a button), so tooltip would otherwise
+          // remain visible until focus is moved away
+          $(this).tooltip('hide')
+        })
     })
 
     var clipboard = new Clipboard('.btn-clipboard', {

diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
index cc3176a99b990353b097d95160e5d50a5a76be43..e27d1d4f8478010a2c9b7eb727368b5b728e49f6 100644 (file)
--- a/docs/assets/scss/_clipboard-js.scss
+++ b/docs/assets/scss/_clipboard-js.scss
@@ -23,6 +23,7 @@
   color: #818a91;
   cursor: pointer;
   background-color: transparent;
+  border: 0;
   border-radius: .25rem;
 
   &:hover {