Fleet UI: Improvements to highlighting while tabbing and not clicking (#13508)

2023-08-25 12:26:03 -04:00
parent 1e99abed19
commit 39c3eedc7b
9 changed files with 32 additions and 8 deletions
@@ -0,0 +1 @@
+- Fleet UI - Tabs highlight while tabbing but not on multiple clicks
@@ -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 {
@@ -332,7 +332,7 @@ const TableContainer = ({
                <Button
                  disabled={disableActionButton}
                  onClick={actionButton.onActionButtonClick}
-                  variant={actionButton.variant}
+                  variant={actionButton.variant || "brand"}
                  className={`${baseClass}__table-action-button`}
                >
                  <>
@@ -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;
    }
@@ -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 {
@@ -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;
@@ -7,6 +7,7 @@
    font-weight: normal;
    color: $core-fleet-black;
    text-decoration: none;
+    border-radius: 3px;
  }

  &__tile {
@@ -290,7 +290,7 @@
  }

  &__export-btn {
-    padding-left: $pad-medium;
+    margin-left: $pad-medium;

    img {
      width: 13px;
@@ -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 {
				`@@ -0,0 +1 @@`
				`- Fleet UI - Tabs highlight while tabbing but not on multiple clicks`