From c3bf590ff39eca5d884a8221b4b1196767517843 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Wed, 12 Aug 2026 18:35:32 -0700
Subject: [PATCH 1/3] header search component style adjustments

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/components/layout/HeaderQuickNav.test.tsx | 10 +++--
 src/components/layout/HeaderQuickNav.tsx      | 41 +++++++++++--------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/layout/HeaderQuickNav.test.tsx b/src/components/layout/HeaderQuickNav.test.tsx
index f6fbc6c..d730bd0 100644
--- a/src/components/layout/HeaderQuickNav.test.tsx
+++ b/src/components/layout/HeaderQuickNav.test.tsx
@@ -91,7 +91,8 @@ describe("HeaderQuickNav", () => {
 
     const input = screen.getByRole("searchbox", { name: "Search" });
     expect(input).toHaveAttribute("data-expanded", "false");
-    expect(screen.getByText("Ctrl K")).toBeInTheDocument();
+    expect(screen.getByText("Ctrl")).toBeInTheDocument();
+    expect(screen.getByText("k")).toBeInTheDocument();
 
     fireEvent.focus(input);
 
@@ -132,7 +133,7 @@ describe("HeaderQuickNav", () => {
     });
   });
 
-  it("shows the macOS shortcut symbol on Apple platforms", async () => {
+  it("shows the command glyph instead of Ctrl on Apple platforms", async () => {
     Object.defineProperty(window.navigator, "platform", {
       configurable: true,
       value: "MacIntel",
@@ -140,7 +141,10 @@ describe("HeaderQuickNav", () => {
 
     renderQuickNav();
 
-    expect(await screen.findByText("⌘ K")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByText("Ctrl")).not.toBeInTheDocument();
+    });
+    expect(screen.getByText("k")).toBeInTheDocument();
   });
 
   it("focuses the search input when the shortcut is pressed", () => {
diff --git a/src/components/layout/HeaderQuickNav.tsx b/src/components/layout/HeaderQuickNav.tsx
index d31d66e..4f39c11 100644
--- a/src/components/layout/HeaderQuickNav.tsx
+++ b/src/components/layout/HeaderQuickNav.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
-import { Search } from "lucide-react";
+import { Command, Search } from "lucide-react";
 import { useIntl } from "react-intl";
 import { searchEntities } from "@/api/search";
 import type { GlobalSearchGroup, GlobalSearchItem, SearchEntityType } from "@/api/search";
@@ -74,12 +74,12 @@ type ShortcutNavigator = Pick<Navigator, "platform" | "userAgent"> & {
   };
 };
 
-export function getQuickNavShortcutLabel(nav: ShortcutNavigator = navigator) {
+export function isAppleShortcutPlatform(nav: ShortcutNavigator = navigator) {
   const detectedPlatform = [nav.userAgentData?.platform, nav.platform, nav.userAgent]
     .filter(Boolean)
     .join(" ");
 
-  return /mac|iphone|ipad|ipod/i.test(detectedPlatform) ? "⌘ K" : "Ctrl K";
+  return /mac|iphone|ipad|ipod/i.test(detectedPlatform);
 }
 
 function getString(value: unknown): string {
@@ -133,7 +133,7 @@ export function HeaderQuickNav() {
   const { navigate } = useRouter();
   const { selectedTeamId, user } = useAuthContext();
   const [query, setQuery] = useState("");
-  const [shortcutLabel, setShortcutLabel] = useState("Ctrl K");
+  const [isApplePlatform, setIsApplePlatform] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [status, setStatus] = useState<SearchStatus>("idle");
@@ -191,7 +191,7 @@ export function HeaderQuickNav() {
   }, []);
 
   useEffect(() => {
-    setShortcutLabel(getQuickNavShortcutLabel());
+    setIsApplePlatform(isAppleShortcutPlatform());
   }, []);
 
   useEffect(() => {
@@ -394,12 +394,12 @@ export function HeaderQuickNav() {
   };
 
   return (
-    <div className="hidden md:block">
+    <div className="mr-3 hidden md:block">
       <Popover
         open={isPopoverOpen && (isExpanded || query.length > 0)}
         onOpenChange={setIsPopoverOpen}
       >
-        <form onSubmit={handleSubmit} className="relative flex items-center gap-2">
+        <form onSubmit={handleSubmit} className="flex items-center">
           <PopoverTrigger asChild>
             <Button
               type="button"
@@ -439,21 +439,26 @@ export function HeaderQuickNav() {
                 isExpanded || query.length > 0 ? intl.formatMessage({ id: "common.search" }) : ""
               }
               className={cn(
-                "h-8 rounded-lg border-border bg-muted/50 pr-2 text-sm shadow-none transition-[width,padding,color,background-color,border-color] duration-200 ease-out placeholder:text-muted-foreground/80 focus-visible:bg-background",
+                "h-8 rounded-lg border-border bg-muted/50 text-sm shadow-none transition-[width,margin,padding,color,background-color,border-color] duration-200 ease-out placeholder:text-muted-foreground/80 focus-visible:bg-background",
                 isExpanded || query.length > 0
-                  ? "w-44 px-3 text-foreground md:w-48 lg:w-56"
-                  : "w-[3.9rem] px-2 text-transparent caret-foreground",
+                  ? "ml-1.5 w-44 px-3 text-foreground md:w-48 lg:w-56"
+                  : "ml-0 w-0 overflow-hidden border-0 bg-transparent px-0 text-transparent caret-foreground",
               )}
             />
           </PopoverAnchor>
-          <span
-            className={cn(
-              "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 text-[10px] font-medium tracking-wide text-muted-foreground transition-opacity duration-150",
-              isExpanded || query.length > 0 ? "opacity-0" : "opacity-100",
-            )}
-          >
-            {shortcutLabel}
-          </span>
+          {isExpanded || query.length > 0 ? null : (
+            <span
+              aria-hidden="true"
+              // -ml-0.5 trims the icon button's padding down to the 6px gap the design specifies.
+              className={cn(
+                "pointer-events-none -ml-0.5 flex h-5 items-center justify-center gap-1 rounded bg-muted text-[13px] leading-4 text-muted-foreground/80",
+                isApplePlatform ? "w-[30px]" : "px-1.5",
+              )}
+            >
+              {isApplePlatform ? <Command className="size-3" /> : <span>Ctrl</span>}
+              <span>k</span>
+            </span>
+          )}
         </form>
         <PopoverContent
           align="start"

From 3460bfd50be68847e94d5b68cf245658ee69f552 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Wed, 12 Aug 2026 20:00:40 -0700
Subject: [PATCH 2/3] header search small adjustments to searching state and
 accessibility

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/components/layout/Header.tsx              |   4 +-
 src/components/layout/HeaderQuickNav.test.tsx |  92 ++++++++++++-
 src/components/layout/HeaderQuickNav.tsx      | 124 ++++++++++++------
 src/i18n/locales/en-US/common.json            |   2 +
 src/i18n/locales/es-ES/common.json            |   2 +
 src/i18n/locales/pt-BR/common.json            |   2 +
 6 files changed, 177 insertions(+), 49 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 4182b55..aaa9a4b 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -32,7 +32,7 @@ export function Header() {
           href={GITHUB_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          className="hidden size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:inline-flex"
           aria-label="GitHub"
         >
           <GitHubIcon className="size-4" aria-hidden="true" />
@@ -41,7 +41,7 @@ export function Header() {
           href={DOCS_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          className="hidden size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:inline-flex"
           aria-label="Documentation"
         >
           <BookOpen className="size-4" aria-hidden="true" />
diff --git a/src/components/layout/HeaderQuickNav.test.tsx b/src/components/layout/HeaderQuickNav.test.tsx
index d730bd0..7f20cb5 100644
--- a/src/components/layout/HeaderQuickNav.test.tsx
+++ b/src/components/layout/HeaderQuickNav.test.tsx
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { I18nProvider } from "@/i18n";
 import { searchEntities } from "@/api/search";
 import { useAuthContext } from "@/auth/AuthContext";
@@ -22,6 +22,11 @@ vi.mock("@/router", () => ({
 const originalPlatform = window.navigator.platform;
 const mockNavigate = vi.fn();
 
+/** Scopes queries to the dropdown so they ignore the mirrored screen-reader announcement. */
+function dropdown() {
+  return within(screen.getByRole("listbox"));
+}
+
 function renderQuickNav() {
   return render(
     <I18nProvider>
@@ -108,6 +113,75 @@ describe("HeaderQuickNav", () => {
     expect(input).toHaveValue("servers");
   });
 
+  it("clears the query and returns focus when the clear button is clicked", async () => {
+    const user = userEvent.setup();
+
+    renderQuickNav();
+
+    const input = screen.getByRole("searchbox", { name: "Search" });
+    expect(screen.queryByRole("button", { name: "Clear search" })).not.toBeInTheDocument();
+
+    fireEvent.change(input, { target: { value: "servers" } });
+    await user.click(screen.getByRole("button", { name: "Clear search" }));
+
+    expect(input).toHaveValue("");
+    expect(screen.queryByRole("button", { name: "Clear search" })).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(input).toHaveFocus();
+    });
+  });
+
+  it("announces the result count through a live region that stays mounted", async () => {
+    vi.mocked(searchEntities).mockResolvedValue({
+      query: "server",
+      entity_types: ["gateways"],
+      limit_per_type: 8,
+      results: {},
+      groups: [
+        {
+          entity_type: "gateways",
+          count: 2,
+          items: [
+            { id: "gw-1", name: "Payments MCP", description: "Handles payment tools" },
+            { id: "gw-2", name: "Billing MCP", description: "Handles billing tools" },
+          ],
+        },
+      ],
+      items: [],
+      count: 2,
+    });
+
+    renderQuickNav();
+
+    const liveRegion = screen.getByRole("status");
+    expect(liveRegion).toBeEmptyDOMElement();
+
+    const input = screen.getByRole("searchbox", { name: "Search" });
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "server" } });
+
+    await waitFor(() => {
+      expect(liveRegion).toHaveTextContent("2 results");
+    });
+  });
+
+  it("does not open the dropdown while the input is expanding on focus", async () => {
+    const user = userEvent.setup();
+
+    renderQuickNav();
+
+    await user.click(screen.getByRole("button", { name: "Search" }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("searchbox", { name: "Search" })).toHaveFocus();
+    });
+    expect(screen.queryByText("Type at least 2 characters to search.")).not.toBeInTheDocument();
+    expect(screen.getByRole("searchbox", { name: "Search" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
   it("keeps focus in the input when the popover opens on the first character", async () => {
     const user = userEvent.setup();
 
@@ -118,7 +192,7 @@ describe("HeaderQuickNav", () => {
     await user.keyboard("s");
 
     expect(input).toHaveFocus();
-    expect(screen.getByText("Type at least 2 characters to search.")).toBeInTheDocument();
+    expect(dropdown().getByText("Type at least 2 characters to search.")).toBeInTheDocument();
   });
 
   it("focuses the search input when the icon button is clicked", async () => {
@@ -204,7 +278,7 @@ describe("HeaderQuickNav", () => {
     vi.advanceTimersByTime(300);
 
     expect(searchEntities).not.toHaveBeenCalled();
-    expect(screen.getByText("Type at least 2 characters to search.")).toBeInTheDocument();
+    expect(dropdown().getByText("Type at least 2 characters to search.")).toBeInTheDocument();
   });
 
   it("searches /v1/search and renders grouped results", async () => {
@@ -261,7 +335,9 @@ describe("HeaderQuickNav", () => {
     fireEvent.focus(input);
     fireEvent.change(input, { target: { value: "server" } });
 
-    expect(await screen.findByText("Search failed. Please try again.")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(dropdown().getByText("Search failed. Please try again.")).toBeInTheDocument();
+    });
   });
 
   it("includes users for platform admins and selected team scope", async () => {
@@ -435,7 +511,9 @@ describe("HeaderQuickNav", () => {
     fireEvent.focus(input);
     fireEvent.change(input, { target: { value: "missing" } });
 
-    expect(await screen.findByText("No matching results.")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(dropdown().getByText("No matching results.")).toBeInTheDocument();
+    });
   });
 
   type SearchResult = Awaited<ReturnType<typeof searchEntities>>;
@@ -483,7 +561,9 @@ describe("HeaderQuickNav", () => {
     fireEvent.focus(input);
     fireEvent.change(input, { target: { value: "query" } });
 
-    expect(await screen.findByText("Searching...")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(dropdown().getByText("Searching...")).toBeInTheDocument();
+    });
   });
 
   it("ignores abort errors without showing an error state", async () => {
diff --git a/src/components/layout/HeaderQuickNav.tsx b/src/components/layout/HeaderQuickNav.tsx
index 4f39c11..eea3f26 100644
--- a/src/components/layout/HeaderQuickNav.tsx
+++ b/src/components/layout/HeaderQuickNav.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
-import { Command, Search } from "lucide-react";
+import { Command, Search, X } from "lucide-react";
 import { useIntl } from "react-intl";
 import { searchEntities } from "@/api/search";
 import type { GlobalSearchGroup, GlobalSearchItem, SearchEntityType } from "@/api/search";
@@ -10,7 +10,6 @@ import { cn } from "@/lib/utils";
 import { useRouter } from "@/router";
 import { Input } from "../ui/input";
 import { Button } from "@/components/ui/button";
-import { Loading } from "@/components/ui/loading";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 
@@ -178,6 +177,25 @@ export function HeaderQuickNav() {
     focusedResultIndex >= 0 && focusedResultIndex < visibleResults.length
       ? `quick-nav-result-${focusedResultIndex}`
       : undefined;
+  // Requiring a query keeps the dropdown from opening over the input's expand animation,
+  // which starts on the same focus event.
+  const isResultsOpen = isPopoverOpen && query.length > 0;
+  // Mirrors the dropdown's visible state into one region that stays mounted, since screen
+  // readers announce text changes far more reliably than a live region that mounts with content.
+  const announcedStatus = useMemo(() => {
+    if (query.length === 0) return "";
+    if (trimmedQuery.length < MIN_QUERY_LENGTH) {
+      return intl.formatMessage({ id: "common.search.startTyping" }, { count: MIN_QUERY_LENGTH });
+    }
+    if (status === "loading") return intl.formatMessage({ id: "common.search.searching" });
+    if (status === "error") return intl.formatMessage({ id: "common.search.error" });
+    if (status === "success") {
+      return hasResults
+        ? intl.formatMessage({ id: "common.search.resultCount" }, { count: visibleResults.length })
+        : intl.formatMessage({ id: "common.search.noResults" });
+    }
+    return "";
+  }, [query.length, trimmedQuery.length, status, hasResults, visibleResults.length, intl]);
 
   const focusSearchInput = useCallback((select = false) => {
     setIsExpanded(true);
@@ -313,6 +331,11 @@ export function HeaderQuickNav() {
     }
   };
 
+  const handleClear = () => {
+    setQuery("");
+    focusSearchInput();
+  };
+
   const renderSearchContent = () => {
     if (trimmedQuery.length < MIN_QUERY_LENGTH) {
       return (
@@ -324,10 +347,9 @@ export function HeaderQuickNav() {
 
     if (status === "loading") {
       return (
-        <div className="flex items-center gap-2 px-3 py-3 text-sm text-muted-foreground">
-          <Loading variant="inline" />
-          <span>{intl.formatMessage({ id: "common.search.searching" })}</span>
-        </div>
+        <p className="px-3 py-3 text-sm text-muted-foreground">
+          {intl.formatMessage({ id: "common.search.searching" })}
+        </p>
       );
     }
 
@@ -394,11 +416,11 @@ export function HeaderQuickNav() {
   };
 
   return (
-    <div className="mr-3 hidden md:block">
-      <Popover
-        open={isPopoverOpen && (isExpanded || query.length > 0)}
-        onOpenChange={setIsPopoverOpen}
-      >
+    <div className="mr-3">
+      <p role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+        {announcedStatus}
+      </p>
+      <Popover open={isResultsOpen} onOpenChange={setIsPopoverOpen}>
         <form onSubmit={handleSubmit} className="flex items-center">
           <PopoverTrigger asChild>
             <Button
@@ -415,43 +437,63 @@ export function HeaderQuickNav() {
             </Button>
           </PopoverTrigger>
           <PopoverAnchor asChild>
-            <Input
-              ref={inputRef}
-              type="search"
-              value={query}
-              onChange={(event) => {
-                setQuery(event.target.value);
-                setIsPopoverOpen(true);
-              }}
-              onKeyDown={handleSearchKeyDown}
-              onFocus={() => {
-                setIsExpanded(true);
-                setIsPopoverOpen(true);
-              }}
-              onBlur={() => setIsExpanded(query.length > 0)}
-              aria-label={intl.formatMessage({ id: "common.search" })}
-              aria-controls="quick-nav-results"
-              aria-activedescendant={activeResultId}
-              aria-expanded={isPopoverOpen && (isExpanded || query.length > 0)}
-              data-expanded={isExpanded}
-              autoComplete="off"
-              placeholder={
-                isExpanded || query.length > 0 ? intl.formatMessage({ id: "common.search" }) : ""
-              }
+            <div
               className={cn(
-                "h-8 rounded-lg border-border bg-muted/50 text-sm shadow-none transition-[width,margin,padding,color,background-color,border-color] duration-200 ease-out placeholder:text-muted-foreground/80 focus-visible:bg-background",
-                isExpanded || query.length > 0
-                  ? "ml-1.5 w-44 px-3 text-foreground md:w-48 lg:w-56"
-                  : "ml-0 w-0 overflow-hidden border-0 bg-transparent px-0 text-transparent caret-foreground",
+                "relative flex items-center transition-[margin] duration-200 ease-out",
+                isExpanded || query.length > 0 ? "ml-1.5" : "ml-0",
+              )}
+            >
+              <Input
+                ref={inputRef}
+                type="search"
+                value={query}
+                onChange={(event) => {
+                  setQuery(event.target.value);
+                  setIsPopoverOpen(true);
+                }}
+                onKeyDown={handleSearchKeyDown}
+                onFocus={() => {
+                  setIsExpanded(true);
+                  setIsPopoverOpen(true);
+                }}
+                onBlur={() => setIsExpanded(query.length > 0)}
+                aria-label={intl.formatMessage({ id: "common.search" })}
+                aria-controls="quick-nav-results"
+                aria-activedescendant={activeResultId}
+                aria-expanded={isResultsOpen}
+                data-expanded={isExpanded}
+                autoComplete="off"
+                placeholder={
+                  isExpanded || query.length > 0 ? intl.formatMessage({ id: "common.search" }) : ""
+                }
+                className={cn(
+                  "h-8 rounded-lg border-border bg-muted/50 text-sm shadow-none transition-[width,padding,color,background-color,border-color] duration-200 ease-out [&::-webkit-search-cancel-button]:appearance-none placeholder:text-muted-foreground/80 focus-visible:bg-background",
+                  isExpanded || query.length > 0
+                    ? "w-44 max-w-[50vw] pl-3 pr-8 text-foreground md:w-75 md:max-w-none lg:w-100"
+                    : "w-0 overflow-hidden border-0 bg-transparent px-0 text-transparent caret-foreground",
+                )}
+              />
+              {query.length > 0 && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xs"
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={handleClear}
+                  aria-label={intl.formatMessage({ id: "common.search.clear" })}
+                  className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <X className="size-3.5" />
+                </Button>
               )}
-            />
+            </div>
           </PopoverAnchor>
           {isExpanded || query.length > 0 ? null : (
             <span
               aria-hidden="true"
               // -ml-0.5 trims the icon button's padding down to the 6px gap the design specifies.
               className={cn(
-                "pointer-events-none -ml-0.5 flex h-5 items-center justify-center gap-1 rounded bg-muted text-[13px] leading-4 text-muted-foreground/80",
+                "pointer-events-none -ml-0.5 hidden h-5 items-center justify-center gap-1 rounded bg-muted text-[13px] leading-4 text-muted-foreground/80 md:flex",
                 isApplePlatform ? "w-[30px]" : "px-1.5",
               )}
             >
@@ -462,7 +504,7 @@ export function HeaderQuickNav() {
         </form>
         <PopoverContent
           align="start"
-          className="w-80 max-w-[calc(100vw-2rem)] p-0"
+          className="w-75 max-w-[calc(100vw-2rem)] p-0 lg:w-100"
           onOpenAutoFocus={(event) => event.preventDefault()}
         >
           <div
diff --git a/src/i18n/locales/en-US/common.json b/src/i18n/locales/en-US/common.json
index 2ef2627..e2d5dab 100644
--- a/src/i18n/locales/en-US/common.json
+++ b/src/i18n/locales/en-US/common.json
@@ -24,8 +24,10 @@
   "common.visibility.info.team": "Scoped to a team you belong to.",
   "common.visibility.info.internal": "Visible to everyone signed into this platform. Not on the public internet.",
   "common.search": "Search",
+  "common.search.clear": "Clear search",
   "common.search.error": "Search failed. Please try again.",
   "common.search.noResults": "No matching results.",
+  "common.search.resultCount": "{count, plural, =0 {No results} one {# result} other {# results}}",
   "common.search.results": "Search results",
   "common.search.searching": "Searching...",
   "common.search.startTyping": "Type at least {count} characters to search.",
diff --git a/src/i18n/locales/es-ES/common.json b/src/i18n/locales/es-ES/common.json
index dfbe4ec..cbbff44 100644
--- a/src/i18n/locales/es-ES/common.json
+++ b/src/i18n/locales/es-ES/common.json
@@ -24,8 +24,10 @@
   "common.visibility.info.team": "Limitado a un equipo al que perteneces.",
   "common.visibility.info.internal": "Visible para todos los que han iniciado sesión en esta plataforma. No en la Internet pública.",
   "common.search": "Buscar",
+  "common.search.clear": "Borrar búsqueda",
   "common.search.error": "La búsqueda falló. Inténtalo de nuevo.",
   "common.search.noResults": "No hay resultados coincidentes.",
+  "common.search.resultCount": "{count, plural, =0 {Sin resultados} one {# resultado} other {# resultados}}",
   "common.search.results": "Resultados de búsqueda",
   "common.search.searching": "Buscando...",
   "common.search.startTyping": "Escribe al menos {count} caracteres para buscar.",
diff --git a/src/i18n/locales/pt-BR/common.json b/src/i18n/locales/pt-BR/common.json
index c451a25..017a5b6 100644
--- a/src/i18n/locales/pt-BR/common.json
+++ b/src/i18n/locales/pt-BR/common.json
@@ -24,8 +24,10 @@
   "common.visibility.info.team": "Restrito a uma equipe à qual você pertence.",
   "common.visibility.info.internal": "Visível para todos que estão conectados a esta plataforma. Não na Internet pública.",
   "common.search": "Buscar",
+  "common.search.clear": "Limpar busca",
   "common.search.error": "A busca falhou. Tente novamente.",
   "common.search.noResults": "Nenhum resultado correspondente.",
+  "common.search.resultCount": "{count, plural, =0 {Nenhum resultado} one {# resultado} other {# resultados}}",
   "common.search.results": "Resultados da busca",
   "common.search.searching": "Buscando...",
   "common.search.startTyping": "Digite pelo menos {count} caracteres para buscar.",

From b5b6f7394b21a738f742abc078cd75a2c1705b0c Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Wed, 12 Aug 2026 22:07:47 -0700
Subject: [PATCH 3/3] test: add locale message consistency checks

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 src/i18n/locales.test.ts | 44 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/i18n/locales.test.ts

diff --git a/src/i18n/locales.test.ts b/src/i18n/locales.test.ts
new file mode 100644
index 0000000..9c9eb33
--- /dev/null
+++ b/src/i18n/locales.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+
+import enUS from "./locales/en-US";
+import esES from "./locales/es-ES";
+import ptBR from "./locales/pt-BR";
+import { SUPPORTED_LOCALES } from "./types";
+import type { LocaleMessages, SupportedLocale } from "./types";
+
+const BASE_LOCALE: SupportedLocale = "en-US";
+
+const messages: Record<SupportedLocale, LocaleMessages> = {
+  "en-US": enUS,
+  "es-ES": esES,
+  "pt-BR": ptBR,
+};
+
+const baseKeys = Object.keys(messages[BASE_LOCALE]);
+const translatedLocales = SUPPORTED_LOCALES.filter((locale) => locale !== BASE_LOCALE);
+
+describe("locale messages", () => {
+  it("provides a bundle for every supported locale", () => {
+    expect(Object.keys(messages).sort()).toEqual([...SUPPORTED_LOCALES].sort());
+  });
+
+  it.each(translatedLocales)("%s translates every message id defined by en-US", (locale) => {
+    const translated = new Set(Object.keys(messages[locale]));
+
+    expect(baseKeys.filter((key) => !translated.has(key))).toEqual([]);
+  });
+
+  it.each(translatedLocales)("%s defines no message ids missing from en-US", (locale) => {
+    const base = new Set(baseKeys);
+
+    expect(Object.keys(messages[locale]).filter((key) => !base.has(key))).toEqual([]);
+  });
+
+  it.each([...SUPPORTED_LOCALES])("%s has no blank messages", (locale) => {
+    const blank = Object.entries(messages[locale])
+      .filter(([, message]) => typeof message !== "string" || message.trim() === "")
+      .map(([key]) => key);
+
+    expect(blank).toEqual([]);
+  });
+});