From 64ffb39f359a8d4d2f3fb8e264401c5b8d1016cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Wed, 1 Jan 2025 21:56:51 +0100
Subject: [PATCH] clipboard: make copy button reachable by keyboard #983

---
 assets/css/theme.css         |  5 +++++
 layouts/partials/version.txt |  2 +-
 static/js/theme.js           | 14 ++++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/assets/css/theme.css b/assets/css/theme.css
index d0d1e91db7..fa8bc02e47 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -1443,12 +1443,17 @@ div.highlight .copy-to-clipboard-button {
     display: block;
   }
 }
+div.highlight:focus-within .copy-to-clipboard-button,
+div.highlight .copy-to-clipboard-button:active,
 div.highlight:hover .copy-to-clipboard-button {
   display: block;
 }
 .disableHoverBlockCopyToClipBoard div.highlight .copy-to-clipboard-button {
   display: block;
 }
+.force-display {
+  display: block !important;
+}
 
 div.highlight > div table + .copy-to-clipboard-button > i,
 div.highlight pre:not(.mermaid) + .copy-to-clipboard-button > i,
diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt
index 9aaa1efd0c..227b9d234e 100644
--- a/layouts/partials/version.txt
+++ b/layouts/partials/version.txt
@@ -1 +1 @@
-7.2.1+8c403f2aadf03c87f7741ead8e4c5425cbe30ed1
\ No newline at end of file
+7.2.1+ee07f8ff7d48f12d35f6b843225d6ecb3af157ba
\ No newline at end of file
diff --git a/static/js/theme.js b/static/js/theme.js
index eb097047c3..05f421fc8e 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -688,6 +688,20 @@ function initCodeClipboard() {
           pre.parentNode.replaceChild(div, pre);
           pre = clone;
         }
+        // we have to make sure, the button is visible while
+        // Clipboard.js is doing its magic
+        button.addEventListener('focus', function (ev) {
+          setTimeout(function () {
+            ev.target.classList.add('force-display');
+          }, 0);
+        });
+        button.addEventListener('blur', function (ev) {
+          this.removeAttribute('aria-label');
+          this.classList.remove('tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw');
+          setTimeout(function () {
+            ev.target.classList.remove('force-display');
+          }, 0);
+        });
         pre.parentNode.insertBefore(button, pre.nextSibling);
       } else {
         code.dataset.code = text;