rionmonster commented on code in PR #27541:
URL: https://github.com/apache/flink/pull/27541#discussion_r2772343220
##########
docs/assets/_custom.scss:
##########
@@ -241,3 +245,47 @@ pre.chroma code {
.table-inline {
background: white;
}
+
+// Code block copy button
+.code-block-wrapper {
+ position: relative;
+
+ .copy-code-button {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ padding: 0.25rem 0.5rem;
+ background: var(--gray-200);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ opacity: 0;
Review Comment:
For accessibility purposes, we may want to consider updating the `opacity`
values here to default to something higher than zero (e.g., 0.25, 0.50, 0.75,
etc.) as the copy button is otherwise hidden unless the user explicitly hovers
over the block:
https://github.com/user-attachments/assets/c4934a84-6d27-4102-9e95-55e4dc7b27a3
Whereas if it's adjusted to a slightly larger value (shown as 0.25 below,
but 0.50 or greater could be more pronounced), it's a bit more clear that the
contents can be easily copied regardless if the user is hovering or not:
https://github.com/user-attachments/assets/850ad997-e7e1-4aca-9e66-a8c15cbd15e1
It's a great feature and I think updating this will make it far more
accessible, particularly on mobile devices where users may not be actively
hovering over the contents.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
