Make sure copy button is tab-accessible and visible on tab (dotnet#3192)

Co-authored-by: Adam Ratzman <adamratzman@microsoft.com>
adamint · Apr 3, 2024 · 2bba2ad · 2bba2ad
1 parent 7a2d4cc
commit 2bba2ad
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/Aspire.Dashboard/Components/Controls/GridValue.razor b/src/Aspire.Dashboard/Components/Controls/GridValue.razor
@@ -34,7 +34,12 @@
     }
 
     @{
-        (string, object)[] uncapturedAttributes = [("alt", PreCopyToolTip), ("title", string.Empty), ("aria-label", Loc[nameof(ControlsStrings.GridValueCopyToClipboard)])];
+        (string, object)[] uncapturedAttributes = [
+            ("alt", PreCopyToolTip),
+            ("title", string.Empty),
+            ("aria-label", Loc[nameof(ControlsStrings.GridValueCopyToClipboard)]),
+            ("tabindex", "0")
+        ];
     }
 
     <FluentButton Appearance="Appearance.Lightweight"

diff --git a/src/Aspire.Dashboard/Components/Controls/GridValue.razor.css b/src/Aspire.Dashboard/Components/Controls/GridValue.razor.css
@@ -20,6 +20,6 @@
     cursor: pointer;
 }
 
-::deep:hover .defaultHidden {
+::deep:hover .defaultHidden, ::deep:focus-within .defaultHidden  {
     opacity: 1;  /* safari has a bug where hover is not always called on an invisible element, so we use opacity instead */
 }