@oneuptime/common 13.0.4 → 13.0.5

package/UI/Components/TelemetryViewer/components/TelemetryDetailPanel.tsx

@@ -3,9 +3,9 @@ import React, {
   ReactElement,
   ReactNode,
   useEffect,
+  useId,
+  useRef,
 } from "react";
-import Icon from "../../Icon/Icon";
-import IconProp from "../../../../Types/Icon/IconProp";
 
 export interface TelemetryDetailPanelTab {
   id: string;
@@ -30,6 +30,51 @@ export interface TelemetryDetailPanelProps {
 const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
   props: TelemetryDetailPanelProps,
 ): ReactElement | null => {
+  const panelId: string = useId();
+  const titleId: string = `${panelId}-title`;
+  const panelRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
+  const closeButtonRef: React.MutableRefObject<HTMLButtonElement | null> =
+    useRef<HTMLButtonElement | null>(null);
+  const previousFocusRef: React.MutableRefObject<HTMLElement | null> =
+    useRef<HTMLElement | null>(null);
+  const tabRefs: React.MutableRefObject<Map<string, HTMLButtonElement>> =
+    useRef<Map<string, HTMLButtonElement>>(new Map());
+
+  const variant: "floating" | "embedded" = props.variant || "floating";
+
+  /*
+   * A floating drawer is modal: put keyboard focus inside it on open and
+   * return focus to the control that launched it on close. Querying the
+   * selected tab keeps this effect independent of controlled tab changes.
+   */
+  useEffect(() => {
+    if (!props.isOpen || variant !== "floating") {
+      return;
+    }
+
+    previousFocusRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+
+    const selectedTab: HTMLElement | null =
+      panelRef.current?.querySelector<HTMLElement>(
+        '[role="tab"][aria-selected="true"]',
+      ) || null;
+
+    (selectedTab || closeButtonRef.current || panelRef.current)?.focus();
+
+    return () => {
+      const previousFocus: HTMLElement | null = previousFocusRef.current;
+      previousFocusRef.current = null;
+
+      if (previousFocus?.isConnected) {
+        previousFocus.focus();
+      }
+    };
+  }, [props.isOpen, variant]);
+
   // Close on Escape
   useEffect(() => {
     if (!props.isOpen) {
@@ -50,7 +95,6 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
     return null;
   }
 
-  const variant: "floating" | "embedded" = props.variant || "floating";
   const widthClassName: string = props.widthClassName || "w-[38rem]";
 
   const activeTab: TelemetryDetailPanelTab | undefined = props.tabs.find(
@@ -59,18 +103,110 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
     },
   );
 
+  const handleTabKeyDown: (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    currentIndex: number,
+  ) => void = (
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    currentIndex: number,
+  ): void => {
+    let nextIndex: number | null = null;
+
+    if (event.key === "ArrowRight") {
+      nextIndex = (currentIndex + 1) % props.tabs.length;
+    } else if (event.key === "ArrowLeft") {
+      nextIndex = (currentIndex - 1 + props.tabs.length) % props.tabs.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = props.tabs.length - 1;
+    }
+
+    if (nextIndex === null) {
+      return;
+    }
+
+    event.preventDefault();
+    const nextTab: TelemetryDetailPanelTab | undefined = props.tabs[nextIndex];
+
+    if (!nextTab) {
+      return;
+    }
+
+    props.onTabChange(nextTab.id);
+    tabRefs.current.get(nextTab.id)?.focus();
+  };
+
+  const handlePanelKeyDown: (
+    event: React.KeyboardEvent<HTMLDivElement>,
+  ) => void = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (variant !== "floating" || event.key !== "Tab") {
+      return;
+    }
+
+    const panel: HTMLDivElement | null = panelRef.current;
+
+    if (!panel) {
+      return;
+    }
+
+    const focusableElements: Array<HTMLElement> = Array.from(
+      panel.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    ).filter((element: HTMLElement): boolean => {
+      return element.tabIndex >= 0 && !element.closest("[hidden]");
+    });
+
+    const firstElement: HTMLElement | undefined = focusableElements[0];
+    const lastElement: HTMLElement | undefined =
+      focusableElements[focusableElements.length - 1];
+
+    if (!firstElement || !lastElement) {
+      event.preventDefault();
+      panel.focus();
+      return;
+    }
+
+    const activeElement: Element | null = document.activeElement;
+
+    if (
+      event.shiftKey &&
+      (activeElement === firstElement || !panel.contains(activeElement))
+    ) {
+      event.preventDefault();
+      lastElement.focus();
+    } else if (
+      !event.shiftKey &&
+      (activeElement === lastElement || !panel.contains(activeElement))
+    ) {
+      event.preventDefault();
+      firstElement.focus();
+    }
+  };
+
   const body: ReactElement = (
     <div
+      ref={panelRef}
       className={`flex h-full flex-col bg-white ${
         variant === "floating"
           ? `fixed right-0 top-0 z-40 ${widthClassName} border-l border-gray-200 shadow-2xl`
           : "rounded-lg border border-gray-200"
       }`}
+      role={variant === "floating" ? "dialog" : "region"}
+      aria-modal={variant === "floating" ? true : undefined}
+      aria-labelledby={titleId}
+      tabIndex={-1}
+      onKeyDown={handlePanelKeyDown}
+      data-testid="telemetry-detail-panel"
     >
       {/* Header */}
       <div className="flex items-start justify-between gap-3 border-b border-gray-100 px-4 py-3">
         <div className="min-w-0 flex-1">
-          <div className="truncate text-sm font-semibold text-gray-900">
+          <div
+            id={titleId}
+            className="truncate text-sm font-semibold text-gray-900"
+          >
             {props.title}
           </div>
           {props.subtitle && (
@@ -82,26 +218,58 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
         <div className="flex items-center gap-1">
           {props.headerActions}
           <button
+            ref={closeButtonRef}
             type="button"
-            className="rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            className="rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
             onClick={props.onClose}
             title="Close (Esc)"
+            aria-label="Close details panel"
           >
-            <Icon icon={IconProp.Close} className="h-4 w-4" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth="1.5"
+              stroke="currentColor"
+              className="h-4 w-4"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
           </button>
         </div>
       </div>
 
       {/* Tabs */}
       {props.tabs.length > 1 && (
-        <div className="flex items-center gap-1 border-b border-gray-100 px-2 pt-1.5">
-          {props.tabs.map((tab: TelemetryDetailPanelTab) => {
+        <div
+          className="flex items-center gap-1 border-b border-gray-100 px-2 pt-1.5"
+          role="tablist"
+          aria-label="Detail sections"
+        >
+          {props.tabs.map((tab: TelemetryDetailPanelTab, index: number) => {
             const isActive: boolean = tab.id === props.activeTabId;
             return (
               <button
                 key={tab.id}
                 type="button"
-                className={`relative inline-flex items-center gap-1.5 rounded-t-md px-3 py-1.5 text-xs font-medium transition-colors ${
+                id={`${panelId}-tab-${tab.id}`}
+                role="tab"
+                aria-selected={isActive}
+                aria-controls={`${panelId}-panel-${tab.id}`}
+                tabIndex={isActive ? 0 : -1}
+                ref={(element: HTMLButtonElement | null): void => {
+                  if (element) {
+                    tabRefs.current.set(tab.id, element);
+                  } else {
+                    tabRefs.current.delete(tab.id);
+                  }
+                }}
+                className={`relative inline-flex items-center gap-1.5 rounded-t-md px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 ${
                   isActive
                     ? "text-indigo-700"
                     : "text-gray-500 hover:text-gray-700"
@@ -109,6 +277,11 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
                 onClick={() => {
                   props.onTabChange(tab.id);
                 }}
+                onKeyDown={(
+                  event: React.KeyboardEvent<HTMLButtonElement>,
+                ): void => {
+                  handleTabKeyDown(event, index);
+                }}
               >
                 {tab.label}
                 {tab.badge !== undefined && tab.badge !== null && (
@@ -132,7 +305,27 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
       )}
 
       {/* Body */}
-      <div className="flex-1 overflow-y-auto">{activeTab?.content}</div>
+      <div className="flex-1 overflow-y-auto">
+        {props.tabs.length > 1
+          ? props.tabs.map((tab: TelemetryDetailPanelTab): ReactElement => {
+              const isActive: boolean = tab.id === props.activeTabId;
+
+              return (
+                <div
+                  key={tab.id}
+                  id={`${panelId}-panel-${tab.id}`}
+                  role="tabpanel"
+                  aria-labelledby={`${panelId}-tab-${tab.id}`}
+                  tabIndex={isActive ? 0 : -1}
+                  hidden={!isActive}
+                  className="min-h-full outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500"
+                >
+                  {isActive ? tab.content : null}
+                </div>
+              );
+            })
+          : activeTab && <div className="min-h-full">{activeTab.content}</div>}
+      </div>
     </div>
   );
 

package/UI/Components/TelemetryViewer/components/TelemetryFacetSection.tsx

@@ -1,15 +1,20 @@
 import React, {
   FunctionComponent,
   ReactElement,
-  useEffect,
-  useRef,
+  useId,
   useState,
   useMemo,
 } from "react";
 import { FacetValue } from "../types";
 import TelemetryFacetValueRow from "./TelemetryFacetValueRow";
-import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
+import FacetSectionHeader from "./FacetSectionHeader";
+import FacetSearchInput from "./FacetSearchInput";
+import FacetShowMoreButton from "./FacetShowMoreButton";
+import useFacetSectionSearch, {
+  FacetSectionSearch,
+} from "../useFacetSectionSearch";
+import { getFacetEmptyStateText } from "../FacetVisibility";
 
 export interface TelemetryFacetSectionProps {
   title: string;
@@ -31,11 +36,24 @@ export interface TelemetryFacetSectionProps {
   onSearchChange?: ((text: string) => void) | undefined;
   // Force the search input to render even when below the local item threshold.
   alwaysShowSearch?: boolean;
+  // Optional icon shown before the title.
+  icon?: IconProp | undefined;
+  /*
+   * Controlled search text. The sidebar owns it so it can keep a section
+   * that is being searched on screen, and so the box survives a remount.
+   * Leave undefined for the section to keep its own.
+   */
+  searchText?: string | undefined;
+  onSearchTextChange?: ((text: string) => void) | undefined;
+  /*
+   * Shown when there are no values and no search. Defaults to "No values in
+   * this time range".
+   */
+  emptyStateText?: string | undefined;
 }
 
 const DEFAULT_VISIBLE_COUNT: number = 5;
 const SEARCH_THRESHOLD: number = 6;
-const SEARCH_DEBOUNCE_MS: number = 300;
 
 const TelemetryFacetSection: FunctionComponent<TelemetryFacetSectionProps> = (
   props: TelemetryFacetSectionProps,
@@ -44,7 +62,7 @@ const TelemetryFacetSection: FunctionComponent<TelemetryFacetSectionProps> = (
     props.defaultExpanded !== false,
   );
   const [showAll, setShowAll] = useState<boolean>(false);
-  const [searchText, setSearchText] = useState<string>("");
+  const bodyId: string = useId();
 
   const showSearch: boolean =
     props.alwaysShowSearch === true ||
@@ -56,27 +74,15 @@ const TelemetryFacetSection: FunctionComponent<TelemetryFacetSectionProps> = (
    * round-trip. Local filter still applies immediately for fast feedback
    * against the currently loaded set.
    */
-  const onSearchChange: TelemetryFacetSectionProps["onSearchChange"] =
-    props.onSearchChange;
-  const lastEmittedRef: React.MutableRefObject<string | null> = useRef<
-    string | null
-  >(null);
-  useEffect(() => {
-    if (!onSearchChange) {
-      return;
-    }
-    const trimmed: string = searchText.trim();
-    if (lastEmittedRef.current === trimmed) {
-      return;
-    }
-    const handle: ReturnType<typeof setTimeout> = setTimeout(() => {
-      lastEmittedRef.current = trimmed;
-      onSearchChange(trimmed);
-    }, SEARCH_DEBOUNCE_MS);
-    return () => {
-      clearTimeout(handle);
-    };
-  }, [searchText, onSearchChange]);
+  const search: FacetSectionSearch = useFacetSectionSearch({
+    searchText: props.searchText,
+    onSearchTextChange: props.onSearchTextChange,
+    onSearchChange: props.onSearchChange,
+    isSearchVisible: showSearch,
+  });
+
+  const searchText: string = search.activeSearchText;
+  const isSearching: boolean = searchText.trim() !== "";
 
   const filteredValues: Array<FacetValue> = useMemo(() => {
     if (!searchText.trim()) {
@@ -95,14 +101,13 @@ const TelemetryFacetSection: FunctionComponent<TelemetryFacetSectionProps> = (
   const visibleCount: number =
     props.initialVisibleCount ?? DEFAULT_VISIBLE_COUNT;
 
-  const displayedValues: Array<FacetValue> = searchText.trim()
+  const displayedValues: Array<FacetValue> = isSearching
     ? filteredValues
     : showAll
       ? filteredValues
       : filteredValues.slice(0, visibleCount);
 
-  const hasMore: boolean =
-    !searchText.trim() && filteredValues.length > visibleCount;
+  const hasMore: boolean = !isSearching && filteredValues.length > visibleCount;
 
   const maxCount: number =
     props.values.length > 0
@@ -117,41 +122,25 @@ const TelemetryFacetSection: FunctionComponent<TelemetryFacetSectionProps> = (
 
   return (
     <div className="border-b border-gray-100 py-2">
-      <button
-        type="button"
-        className="flex w-full items-center justify-between px-2 py-1 text-left"
-        onClick={() => {
+      <FacetSectionHeader
+        title={props.title}
+        icon={props.icon}
+        activeCount={activeCount}
+        isExpanded={isExpanded}
+        controlsId={bodyId}
+        onToggle={() => {
           setIsExpanded(!isExpanded);
         }}
-      >
-        <div className="flex items-center gap-1.5">
-          <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">
-            {props.title}
-          </span>
-          {activeCount > 0 && (
-            <span className="inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600">
-              {activeCount}
-            </span>
-          )}
-        </div>
-        <Icon
-          icon={isExpanded ? IconProp.ChevronDown : IconProp.ChevronRight}
-          className="h-3 w-3 text-gray-400"
-        />
-      </button>
+      />
 
       {isExpanded && (
-        <div className="mt-1 px-1">
+        <div id={bodyId} className="mt-1 px-1">
           {showSearch && (
             <div className="mb-1 px-1">
-              <input
-                type="text"
-                placeholder={`Search ${props.title.toLowerCase()}...`}
-                value={searchText}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setSearchText(e.target.value);
-                }}
-                className="w-full rounded border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700 placeholder-gray-400 outline-none focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200"
+              <FacetSearchInput
+                title={props.title}
+                value={search.searchText}
+                onChange={search.setSearchText}
               />
             </div>
           )}
@@ -179,24 +168,22 @@ const TelemetryFacetSection: FunctionComponent<TelemetryFacetSectionProps> = (
           })}
 
           {displayedValues.length === 0 && (
-            <p className="px-1 py-2 text-[11px] text-gray-400">
-              {searchText.trim() ? "No matches found" : "No values found"}
+            <p className="px-1.5 py-2 text-[11px] text-gray-400">
+              {getFacetEmptyStateText({
+                searchText: searchText,
+                emptyStateText: props.emptyStateText,
+              })}
             </p>
           )}
 
-          {hasMore && (
-            <button
-              type="button"
-              className="mt-1 px-1 text-[11px] font-medium text-indigo-500 hover:text-indigo-600"
-              onClick={() => {
-                setShowAll(!showAll);
-              }}
-            >
-              {showAll
-                ? "Show less"
-                : `+${props.values.length - visibleCount} more`}
-            </button>
-          )}
+          <FacetShowMoreButton
+            hasMore={hasMore}
+            isShowingAll={showAll}
+            hiddenCount={Math.max(0, filteredValues.length - visibleCount)}
+            onToggle={() => {
+              setShowAll(!showAll);
+            }}
+          />
         </div>
       )}
     </div>

package/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.tsx

@@ -1,7 +1,22 @@
-import React, { FunctionComponent, ReactElement, useMemo } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useId,
+  useMemo,
+  useState,
+} from "react";
 import { FacetData, FacetValue, ActiveFilter, FacetConfig } from "../types";
 import TelemetryFacetSection from "./TelemetryFacetSection";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+import HiddenFacetsFooter from "./HiddenFacetsFooter";
+import {
+  FacetVisibility,
+  computeFacetVisibility,
+  getSidebarFacetEmptyStateText,
+} from "../FacetVisibility";
+import useFacetSearchExemptions, {
+  FacetSearchExemptions,
+} from "../useFacetSearchExemptions";
 
 export interface TelemetryFacetSidebarProps {
   facetData: FacetData;
@@ -68,6 +83,59 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
     return map;
   }, [props.activeFilters]);
 
+  const configsByKey: Map<string, FacetConfig> = useMemo(() => {
+    return new Map<string, FacetConfig>(
+      orderedConfigs.map((config: FacetConfig): [string, FacetConfig] => {
+        return [config.key, config];
+      }),
+    );
+  }, [orderedConfigs]);
+
+  const [showHidden, setShowHidden] = useState<boolean>(false);
+  const facetListId: string = useId();
+
+  const facetSearch: FacetSearchExemptions = useFacetSearchExemptions({
+    facetData: props.facetData,
+    onFacetSearchChange: props.onFacetSearchChange,
+  });
+
+  /*
+   * Only configs that opt in with hideWhenEmpty (the resource facets) fold
+   * away while empty; every other config renders exactly as before.
+   */
+  const visibility: FacetVisibility = useMemo(() => {
+    return computeFacetVisibility({
+      keys: orderedConfigs.map((config: FacetConfig): string => {
+        return config.key;
+      }),
+      facetData: props.facetData,
+      isHideable: (key: string): boolean => {
+        return configsByKey.get(key)?.hideWhenEmpty === true;
+      },
+      activeValuesByKey: activeValuesByKey,
+      searchExemptKeys: facetSearch.searchExemptKeys,
+      showHidden: showHidden,
+      getTitle: (key: string): string => {
+        return configsByKey.get(key)?.title ?? key;
+      },
+    });
+  }, [
+    orderedConfigs,
+    configsByKey,
+    props.facetData,
+    activeValuesByKey,
+    facetSearch.searchExemptKeys,
+    showHidden,
+  ]);
+
+  const visibleConfigs: Array<FacetConfig> = visibility.visibleKeys
+    .map((key: string): FacetConfig | undefined => {
+      return configsByKey.get(key);
+    })
+    .filter((config: FacetConfig | undefined): config is FacetConfig => {
+      return config !== undefined;
+    });
+
   return (
     <div className="flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
       <div className="border-b border-gray-100 px-3 py-2.5">
@@ -82,15 +150,13 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
         </div>
       )}
 
-      <div className="flex-1 overflow-y-auto">
-        {orderedConfigs.map((config: FacetConfig) => {
+      <div id={facetListId} className="flex-1 overflow-y-auto">
+        {visibleConfigs.map((config: FacetConfig) => {
           const values: Array<FacetValue> = props.facetData[config.key] || [];
 
           const onSearchChange: ((text: string) => void) | undefined =
-            config.serverSearchable && props.onFacetSearchChange
-              ? (text: string) => {
-                  props.onFacetSearchChange!(config.key, text);
-                }
+            config.serverSearchable
+              ? facetSearch.getSearchChangeHandler(config.key)
               : undefined;
 
           return (
@@ -105,9 +171,30 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
               valueColorMap={config.valueColorMap}
               activeValues={activeValuesByKey[config.key]}
               onSearchChange={onSearchChange}
+              icon={config.icon}
+              searchText={facetSearch.searchTextByKey[config.key] ?? ""}
+              onSearchTextChange={(text: string) => {
+                facetSearch.setSearchText(config.key, text);
+              }}
+              emptyStateText={getSidebarFacetEmptyStateText({
+                isHideable: config.hideWhenEmpty === true,
+                emptyStateNoun: config.emptyStateNoun,
+                searchedAtArrivalText:
+                  facetSearch.searchedAtArrivalByKey[config.key],
+              })}
             />
           );
         })}
+
+        <HiddenFacetsFooter
+          hiddenCount={visibility.hiddenCount}
+          hiddenTitles={visibility.hiddenTitles}
+          isShowingHidden={showHidden}
+          controlsId={facetListId}
+          onToggle={() => {
+            setShowHidden(!showHidden);
+          }}
+        />
       </div>
     </div>
   );

package/UI/Components/TelemetryViewer/components/TelemetryFacetValueRow.tsx

@@ -23,6 +23,12 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
 
   const displayLabel: string = props.displayValue || props.value || "(empty)";
   const isActive: boolean = props.isActive || false;
+  /*
+   * Resource facets list every resource in the project, including ones with
+   * no telemetry in the range (count 0). Muting those lets the rows that do
+   * have data stand out without dropping the rest from the list.
+   */
+  const isZeroCount: boolean = props.count === 0 && !isActive;
 
   return (
     <div className="group flex items-center gap-2 py-0.5">
@@ -54,7 +60,11 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
         )}
         <span
           className={`min-w-0 truncate text-[12px] ${
-            isActive ? "font-medium text-indigo-700" : "text-gray-700"
+            isActive
+              ? "font-medium text-indigo-700"
+              : isZeroCount
+                ? "text-gray-400"
+                : "text-gray-700"
           }`}
         >
           {displayLabel}
@@ -77,7 +87,11 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
         </div>
         <span
           className={`min-w-[2rem] text-right font-mono text-[10px] tabular-nums ${
-            isActive ? "font-medium text-indigo-600" : "text-gray-400"
+            isActive
+              ? "font-medium text-indigo-600"
+              : isZeroCount
+                ? "text-gray-300"
+                : "text-gray-400"
           }`}
         >
           {props.count.toLocaleString()}
@@ -92,6 +106,7 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
           props.onExclude(props.value);
         }}
         title={`Exclude ${displayLabel}`}
+        aria-label={`Exclude ${displayLabel}`}
       >
         -
       </button>