Fleet UI: Checkbox and accessibility styling, tab through select targets (#22943)

frontend/components/LiveQuery/SelectTargets.tsx

@@ -155,7 +155,6 @@ const SelectTargets = ({
   const { isPremiumTier, isOnGlobalTeam, currentUser } = useContext(AppContext);
 
   const [labels, setLabels] = useState<ILabelsByType | null>(null);
-  const [inputTabIndex, setInputTabIndex] = useState<number | null>(null);
   const [searchText, setSearchText] = useState("");
   const [debouncedSearchText, setDebouncedSearchText] = useState("");
   const [isDebouncing, setIsDebouncing] = useState(false);
@@ -263,12 +262,6 @@ const SelectTargets = ({
     labelsSummary && setLabels(parseLabels(labelsSummary));
   }, [labelsSummary]);
 
-  useEffect(() => {
-    if (inputTabIndex === null && labelsSummary && teams) {
-      setInputTabIndex(labelsSummary.length + teams.length || 0);
-    }
-  }, [inputTabIndex, labelsSummary, teams]);
-
   useEffect(() => {
     setIsDebouncing(true);
     debounceSearch(searchText);
@@ -485,7 +478,6 @@ const SelectTargets = ({
         autofocus
         searchResultsTableConfig={resultsTableConfig}
         selectedHostsTableConifg={selectedHostsTableConfig}
-        tabIndex={inputTabIndex || 0}
         searchText={searchText}
         searchResults={searchResults || []}
         isTargetsLoading={isFetchingSearchResults || isDebouncing}

frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx

@@ -91,7 +91,6 @@ const TargetsInput = ({
           type="search"
           iconSvg="search"
           value={searchText}
-          tabIndex={tabIndex}
           iconPosition="start"
           label={label}
           placeholder={placeholder}

frontend/components/LiveQuery/_styles.scss

@@ -0,0 +1,50 @@
+.target-pill-selector {
+  padding: $pad-small;
+  background-color: $core-white;
+  border: none;
+  box-shadow: inset 0 0 0 1px $ui-fleet-black-25;
+  border-radius: $border-radius-medium;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-bottom: $pad-small;
+
+  &:not(:last-of-type) {
+    margin-right: $pad-small;
+  }
+  img {
+    max-width: 12px;
+  }
+  .plus-icon {
+    padding-right: 3px;
+  }
+  .selector-name {
+    margin-left: 8px;
+    font-size: $x-small;
+    flex: 1;
+  }
+  .selector-count {
+    margin-left: 8px;
+    font-size: $xxx-small;
+    font-weight: $bold;
+  }
+  &[data-selected="true"] {
+    background-color: $ui-vibrant-blue-10;
+    box-shadow: inset 0 0 0 1px $core-vibrant-blue;
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px $core-vibrant-blue-over;
+  }
+
+  &:active {
+    box-shadow: inset 0 0 0 1px $core-vibrant-blue-down;
+  }
+
+  // When tabbing
+  &:focus-visible {
+    outline: 2px solid $ui-vibrant-blue-25;
+    outline-offset: 1px;
+    border-radius: 4px;
+  }
+}