From 2ffd273365de2a8575ae30af7e9510850b6e623c Mon Sep 17 00:00:00 2001
From: logonoff <git@logonoff.co>
Date: Wed, 30 Apr 2025 16:36:27 -0400
Subject: [PATCH] fix(techdocs): add focus+hover styling to codeblock CTC
 button (#29792)

* fix(techdocs): add aria-label to codeblock CTC button

Signed-off-by: logonoff <git@logonoff.co>

* fix(techdocs): add focus+hover styling to codeblock CTC button

Signed-off-by: logonoff <git@logonoff.co>

---------

Signed-off-by: logonoff <git@logonoff.co>
---
 .changeset/thick-hotels-rhyme.md                             | 5 +++++
 plugins/techdocs/src/reader/transformers/copyToClipboard.tsx | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/thick-hotels-rhyme.md

diff --git a/.changeset/thick-hotels-rhyme.md b/.changeset/thick-hotels-rhyme.md
new file mode 100644
index 0000000000..b7047dcd71
--- /dev/null
+++ b/.changeset/thick-hotels-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Add hover and focus styling to the "copy to clipboard" button within codeblocks in techdocs. Also added an aria-label to the button for accessibility.
diff --git a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx
index a703868ee0..d34a05fa06 100644
--- a/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx
+++ b/plugins/techdocs/src/reader/transformers/copyToClipboard.tsx
@@ -67,9 +67,10 @@ const CopyToClipboardButton = ({ text }: CopyToClipboardButtonProps) => {
       leaveDelay={1000}
     >
       <IconButton
-        style={{ color: 'inherit', position: 'absolute' }}
+        style={{ position: 'absolute' }}
         className="md-clipboard md-icon"
         onClick={handleClick}
+        aria-label="Copy to clipboard"
       >
         <CopyToClipboardIcon />
       </IconButton>