From ea1d69c64be168bb644ae9fc4450a5c85b51609b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 14 Apr 2017 20:13:46 +0100
Subject: [PATCH] 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.
---
 docs/assets/js/src/application.js   | 11 +++++++++--
 docs/assets/scss/_clipboard-js.scss |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js
index 2b53556b11..b98c3a5ea1 100644
--- 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 cc3176a99b..e27d1d4f84 100644
--- 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 {
-- 
2.47.2