Toolbar: Improve serach result and keyboard navigation

packages/browser-sdk/src/toolbar/Features.css

@@ -50,13 +50,17 @@
   transition-duration: 0.075s;
   transition-timing-function: cubic-bezier(0.75, -0.015, 0.565, 1.055);
 
-  &.show {
+  &.show-on-open {
     opacity: 1;
     transform: translateY(0);
     /* stagger effect where first item (i=0) has no delay,
        and delay is based on item count (n) so total animation time always is 509ms */
     transition-delay: calc(0.05s * var(--i) / max(var(--n) - 1, 1));
   }
+
+  &.not-visible {
+    visibility: hidden;
+  }
 }
 
 .feature-name-cell {
@@ -70,7 +74,9 @@
 .feature-link {
   color: var(--text-color);
   text-decoration: none;
-  &:hover {
+
+  &:hover,
+  &:focus-visible {
     text-decoration: underline;
   }
 }
@@ -83,6 +89,13 @@
 
 .reset {
   color: var(--brand300);
+
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
 }
 
 .feature-switch-cell {

packages/browser-sdk/src/toolbar/Features.tsx

@@ -6,27 +6,40 @@ import { FeatureItem } from "./Toolbar";
 
 export function FeaturesTable({
   features,
+  searchQuery,
   setEnabledOverride,
   appBaseUrl,
   isOpen,
 }: {
   features: FeatureItem[];
+  searchQuery: string | null;
   setEnabledOverride: (key: string, value: boolean | null) => void;
   appBaseUrl: string;
   isOpen: boolean;
 }) {
-  if (features.length === 0) {
+  const searchedFeatures =
+    searchQuery === null
+      ? features
+      : [...features].sort((a, _b) => (a.key.includes(searchQuery) ? -1 : 1));
+
+  if (searchedFeatures.length === 0) {
     return <div style={{ color: "var(--gray500)" }}>No features found</div>;
   }
   return (
-    <table class="features-table" style={{ "--n": features.length }}>
+    <table class="features-table" style={{ "--n": searchedFeatures.length }}>
       <tbody>
-        {features.map((feature, index) => (
+        {searchedFeatures.map((feature, index) => (
           <FeatureRow
             key={feature.key}
             appBaseUrl={appBaseUrl}
             feature={feature}
             index={index}
+            isNotVisible={
+              searchQuery !== null &&
+              !feature.key
+                .toLocaleLowerCase()
+                .includes(searchQuery.toLocaleLowerCase())
+            }
             isOpen={isOpen}
             setEnabledOverride={setEnabledOverride}
           />
@@ -42,28 +55,35 @@ function FeatureRow({
   feature,
   isOpen,
   index,
+  isNotVisible,
 }: {
   feature: FeatureItem;
   appBaseUrl: string;
   setEnabledOverride: (key: string, value: boolean | null) => void;
   isOpen: boolean;
   index: number;
+  isNotVisible: boolean;
 }) {
-  const [show, setShow] = useState(true);
+  const [showOnOpen, setShowOnOpen] = useState(isOpen);
   useEffect(() => {
-    setShow(isOpen);
+    setShowOnOpen(isOpen);
   }, [isOpen]);
   return (
     <tr
       key={feature.key}
-      class={["feature-row", show ? "show" : undefined].join(" ")}
+      class={[
+        "feature-row",
+        showOnOpen ? "show-on-open" : undefined,
+        isNotVisible ? "not-visible" : undefined,
+      ].join(" ")}
       style={{ "--i": index }}
     >
       <td class="feature-name-cell">
         <a
           class="feature-link"
           href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}
           rel="noreferrer"
+          tabIndex={index + 1}
           target="_blank"
         >
           {feature.key}
@@ -74,6 +94,7 @@ function FeatureRow({
           <Reset
             featureKey={feature.key}
             setEnabledOverride={setEnabledOverride}
+            tabIndex={index + 1}
           />
         ) : null}
       </td>
@@ -83,6 +104,7 @@ function FeatureRow({
             (feature.localOverride === null && feature.isEnabled) ||
             feature.localOverride === true
           }
+          tabIndex={index + 1}
           onChange={(e) => {
             const isChecked = e.currentTarget.checked;
             const isOverridden = isChecked !== feature.isEnabled;
@@ -103,6 +125,7 @@ export function FeatureSearch({
     <input
       class="search-input"
       placeholder="Search features"
+      tabIndex={0}
       type="search"
       autoFocus
       onInput={(s) => onSearch(s.currentTarget.value)}
@@ -113,10 +136,11 @@ export function FeatureSearch({
 function Reset({
   setEnabledOverride,
   featureKey,
+  ...props
 }: {
   setEnabledOverride: (key: string, value: boolean | null) => void;
   featureKey: string;
-}) {
+} & h.JSX.HTMLAttributes<HTMLAnchorElement>) {
   return (
     <a
       class="reset"
@@ -125,6 +149,7 @@ function Reset({
         e.preventDefault();
         setEnabledOverride(featureKey, null);
       }}
+      {...props}
     >
       reset
     </a>

packages/browser-sdk/src/toolbar/Switch.css

@@ -1,11 +1,30 @@
 .switch {
   cursor: pointer;
+  position: relative;
+}
+
+.switch-input {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+.switch-input:focus-visible + .switch-track {
+  outline: none;
+  box-shadow: 0 0 0 1px #fff;
 }
 
 .switch-track {
   position: relative;
   transition: background 0.1s ease;
   background: #606476;
+  border-radius: 999px;
 }
 
 .switch[data-enabled="true"] .switch-track {

packages/browser-sdk/src/toolbar/Switch.tsx

@@ -19,8 +19,8 @@ export function Switch({
       <label class="switch" data-enabled={checked}>
         <input
           checked={checked}
+          class="switch-input"
           name="enabled"
-          style={{ display: "none" }}
           type="checkbox"
           {...props}
         />

packages/browser-sdk/src/toolbar/Toolbar.tsx

@@ -73,10 +73,7 @@ export default function Toolbar({
     setSearch(val === "" ? null : val);
   };
 
-  const searchedFeatures =
-    search === null ? features : features.filter((f) => f.key.includes(search));
-
-  const sortedFeatures = [...searchedFeatures].sort((a, b) =>
+  const sortedFeatures = [...features].sort((a, b) =>
     a.key.localeCompare(b.key),
   );
 
@@ -114,6 +111,7 @@ export default function Toolbar({
             appBaseUrl={appBaseUrl}
             features={sortedFeatures}
             isOpen={isOpen}
+            searchQuery={search}
             setEnabledOverride={bucketClient.setFeatureOverride.bind(
               bucketClient,
             )}