diff options
| author | Patrick H. Lauke <redux@splintered.co.uk> | 2017-04-14 22:13:46 +0300 |
|---|---|---|
| committer | Mark Otto <markd.otto@gmail.com> | 2017-04-16 23:57:33 +0300 |
| commit | ea1d69c64be168bb644ae9fc4450a5c85b51609b (patch) | |
| tree | e746c399bbf4152b2a603cafcbbf01ad10d8c5ce /docs | |
| parent | bc0cf36dc85cc974d92d3a7c64987aa6bc37ea25 (diff) | |
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.
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/js/src/application.js | 11 | ||||
| -rw-r--r-- | 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 { |