From 39c3eedc7b50ea8a7aa9e810872b00e0f6e7614f Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:26:03 -0400
Subject: [PATCH] Fleet UI: Improvements to highlighting while tabbing and not
 clicking (#13508)

---
 changes/13064-highlighter-bug                       |  1 +
 frontend/components/BackLink/_styles.scss           |  1 +
 .../components/TableContainer/TableContainer.tsx    |  2 +-
 frontend/components/TableContainer/_styles.scss     |  5 +----
 frontend/components/TabsWrapper/_styles.scss        |  8 ++++++--
 frontend/components/buttons/Button/_styles.scss     | 13 +++++++++++++
 .../cards/HostsSummary/SummaryTile/_styles.scss     |  1 +
 frontend/pages/hosts/ManageHostsPage/_styles.scss   |  2 +-
 frontend/styles/global/_global.scss                 |  7 +++++++
 9 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 changes/13064-highlighter-bug

diff --git a/changes/13064-highlighter-bug b/changes/13064-highlighter-bug
new file mode 100644
index 0000000000..fe4221ab12
--- /dev/null
+++ b/changes/13064-highlighter-bug
@@ -0,0 +1 @@
+- Fleet UI - Tabs highlight while tabbing but not on multiple clicks
\ No newline at end of file
diff --git a/frontend/components/BackLink/_styles.scss b/frontend/components/BackLink/_styles.scss
index 39416cb1f9..cb4d9f2a6e 100644
--- a/frontend/components/BackLink/_styles.scss
+++ b/frontend/components/BackLink/_styles.scss
@@ -2,6 +2,7 @@
   display: inline-flex;
   align-items: center;
   padding: $pad-small $pad-xxsmall; // larger clickable area
+  border-radius: 3px; // Visible while tabbing;
   gap: $pad-xsmall;
 
   &:hover {
diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx
index 7816a87309..257f9443c6 100644
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/frontend/components/TableContainer/TableContainer.tsx
@@ -332,7 +332,7 @@ const TableContainer = ({
                 <Button
                   disabled={disableActionButton}
                   onClick={actionButton.onActionButtonClick}
-                  variant={actionButton.variant}
+                  variant={actionButton.variant || "brand"}
                   className={`${baseClass}__table-action-button`}
                 >
                   <>
diff --git a/frontend/components/TableContainer/_styles.scss b/frontend/components/TableContainer/_styles.scss
index 8a95f45f6b..d389661551 100644
--- a/frontend/components/TableContainer/_styles.scss
+++ b/frontend/components/TableContainer/_styles.scss
@@ -10,6 +10,7 @@
     justify-content: space-between;
     align-items: center;
     gap: $pad-small;
+    margin-top: 3px; // Fits button highlight during tabbing
 
     &.stack-table-controls {
       flex-direction: column-reverse;
@@ -66,10 +67,6 @@
     margin: 0;
     height: 40px;
 
-    :first-child {
-      margin-right: $pad-small;
-    }
-
     .count-error {
       color: $ui-error;
     }
diff --git a/frontend/components/TabsWrapper/_styles.scss b/frontend/components/TabsWrapper/_styles.scss
index 7025d2ddf4..d4e8d08caa 100644
--- a/frontend/components/TabsWrapper/_styles.scss
+++ b/frontend/components/TabsWrapper/_styles.scss
@@ -21,13 +21,17 @@
       &:focus {
         box-shadow: none;
         outline: 0;
-        background-color: $ui-vibrant-blue-10;
-
         &:after {
           left: 0;
           bottom: 0;
         }
       }
+
+      // focus-visible only highlights when tabbing not clicking
+      &:focus-visible {
+        background-color: $ui-vibrant-blue-10;
+      }
+
       // Bolding text when the button is active causes a layout shift
       // so we add a hidden pseudo element with the same text string
       &:before {
diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss
index af8a085220..7844a14d3a 100644
--- a/frontend/components/buttons/Button/_styles.scss
+++ b/frontend/components/buttons/Button/_styles.scss
@@ -222,6 +222,19 @@ $base-class: "button";
       outline: none;
     }
 
+    &:focus-visible {
+      @include button-focus-outline();
+
+      &::after {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        border: 1px solid #6a67fe;
+        border-radius: 6px;
+      }
+    }
+
     &:hover,
     &:focus {
       color: $core-vibrant-blue-over;
diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss
index bec54612ba..a2d35d8220 100644
--- a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/_styles.scss
@@ -7,6 +7,7 @@
     font-weight: normal;
     color: $core-fleet-black;
     text-decoration: none;
+    border-radius: 3px;
   }
 
   &__tile {
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index e83c786b64..d045a86ef6 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -290,7 +290,7 @@
   }
 
   &__export-btn {
-    padding-left: $pad-medium;
+    margin-left: $pad-medium;
 
     img {
       width: 13px;
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index 4036c9b8d5..17714c51a3 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -57,6 +57,13 @@ a {
   font-weight: $bold;
   font-size: $x-small;
   text-decoration: none;
+
+  &:focus-visible {
+    outline-color: #d9d9fe;
+    outline-offset: 3px;
+    outline-style: solid;
+    outline-width: 2px;
+  }
 }
 
 .__react_component_tooltip {