Commit ea1d69c6 authored by Patrick H. Lauke's avatar Patrick H. Lauke Committed by Mark Otto
Browse files

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.
parent bc0cf36d
Showing with 10 additions and 2 deletions
+10 -2
...@@ -55,9 +55,16 @@ ...@@ -55,9 +55,16 @@
// Insert copy to clipboard button before .highlight // Insert copy to clipboard button before .highlight
$('.highlight').each(function () { $('.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) $(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', { var clipboard = new Clipboard('.btn-clipboard', {
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
color: #818a91; color: #818a91;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
border: 0;
border-radius: .25rem; border-radius: .25rem;
&:hover { &:hover {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment