From 955534022095adb7a610c5fd274ce59ffd59d0ae Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 31 Jul 2026 12:35:14 +0000
Subject: [PATCH] feat(ux): add visible focus indicators

Improve keyboard accessibility by adding high-contrast focus indicators.
They are added to all interactive controls (buttons, links, inputs).

Co-authored-by: d-oit <6849456+d-oit@users.noreply.github.com>
---
 web/app/components/History.tsx         | 10 +++++-----
 web/app/components/MainHeader.tsx      |  6 +++---
 web/app/components/MetadataBar.tsx     |  6 +++---
 web/app/components/ProfileCombobox.tsx |  2 +-
 web/app/components/ResultCard.tsx      |  8 ++++----
 web/app/components/SearchSection.tsx   |  8 ++++----
 web/app/components/Sidebar.tsx         | 20 ++++++++++----------
 7 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/web/app/components/History.tsx b/web/app/components/History.tsx
index 265d283c..ca4b7a3d 100644
--- a/web/app/components/History.tsx
+++ b/web/app/components/History.tsx
@@ -106,7 +106,7 @@ export default function History({ onLoad }: HistoryProps) {
     <div className="border-t-2 border-border-muted">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full p-4 flex items-center justify-between hover:bg-[#141414] transition-colors text-[11px] text-text-muted min-h-[44px]"
+        className="w-full p-4 flex items-center justify-between hover:bg-[#141414] transition-colors text-[11px] text-text-muted min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         aria-expanded={isOpen}
         aria-controls="history-panel"
       >
@@ -124,7 +124,7 @@ export default function History({ onLoad }: HistoryProps) {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder="Search history..."
-              className="w-full bg-[#141414] border-2 border-border-muted px-2 py-2 text-[11px] text-foreground placeholder:text-text-dim focus:border-accent focus:outline-none min-h-[44px] pr-10"
+              className="w-full bg-[#141414] border-2 border-border-muted px-2 py-2 text-[11px] text-foreground placeholder:text-text-dim focus:border-accent focus:outline-none focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 min-h-[44px] pr-10"
             />
             {search && (
               <button
@@ -132,7 +132,7 @@ export default function History({ onLoad }: HistoryProps) {
                   setSearch("");
                   searchInputRef.current?.focus();
                 }}
-                className="absolute right-0 top-0 h-full px-3 text-text-dim hover:text-foreground transition-colors"
+                className="absolute right-0 top-0 h-full px-3 text-text-dim hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                 aria-label="Clear search"
               >
                 ×
@@ -152,13 +152,13 @@ export default function History({ onLoad }: HistoryProps) {
                   <div className="flex items-start justify-between gap-2">
                     <button
                       onClick={() => handleLoad(entry)}
-                      className="text-left text-[11px] text-foreground hover:text-accent flex-1"
+                      className="text-left text-[11px] text-foreground hover:text-accent flex-1 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                     >
                       {entry.query}
                     </button>
                     <button
                       onClick={() => handleDelete(entry.id)}
-                      className={`text-[10px] min-h-[32px] min-w-[32px] flex items-center justify-center transition-all ${
+                      className={`text-[10px] min-h-[32px] min-w-[32px] flex items-center justify-center transition-all focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${
                         confirmDeleteId === entry.id
                           ? "text-[#ff4444] font-bold"
                           : "text-text-muted hover:text-[#ff4444] opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
diff --git a/web/app/components/MainHeader.tsx b/web/app/components/MainHeader.tsx
index e2b8cb18..0a0255b2 100644
--- a/web/app/components/MainHeader.tsx
+++ b/web/app/components/MainHeader.tsx
@@ -19,7 +19,7 @@ export function MainHeader(props: MainHeaderProps) {
         {/* Hamburger menu - mobile only */}
         <button
           onClick={handleMenuOpen}
-          className="lg:hidden p-2 text-text-muted hover:text-foreground min-h-[44px] min-w-[44px] flex items-center justify-center"
+          className="lg:hidden p-2 text-text-muted hover:text-foreground min-h-[44px] min-w-[44px] flex items-center justify-center focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           aria-label="Open menu"
           aria-expanded={props.mobileMenuOpen}
           aria-controls="sidebar-navigation"
@@ -33,12 +33,12 @@ export function MainHeader(props: MainHeaderProps) {
       <div className="flex items-center gap-2">
         <button
           onClick={props.onShowShortcuts}
-          className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus:outline-none focus:text-accent"
+          className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus:outline-none focus:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           aria-label="Show keyboard shortcuts"
         >
           Shortcuts
         </button>
-        <Link href="/help" className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus:outline-none focus:text-accent">
+        <Link href="/help" className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus:outline-none focus:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
           Help
         </Link>
       </div>
diff --git a/web/app/components/MetadataBar.tsx b/web/app/components/MetadataBar.tsx
index c218f90b..cfa493b3 100644
--- a/web/app/components/MetadataBar.tsx
+++ b/web/app/components/MetadataBar.tsx
@@ -53,7 +53,7 @@ export function MetadataBar({
       <div className="flex items-center gap-2">
         <button
           onClick={handleCardsClick}
-          className={`px-3 py-1 border border-border-muted ${!viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
+          className={`px-3 py-1 border border-border-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${!viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
           aria-pressed={!viewRaw}
           title="View results as individual structured cards"
         >
@@ -61,7 +61,7 @@ export function MetadataBar({
         </button>
         <button
           onClick={handleRawClick}
-          className={`px-3 py-1 border border-border-muted ${viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
+          className={`px-3 py-1 border border-border-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
           aria-pressed={viewRaw}
           title="View results as raw markdown text"
         >
@@ -71,7 +71,7 @@ export function MetadataBar({
           onClick={handleCopyResult}
           aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
           aria-live="polite"
-          className="hover:text-foreground transition-colors min-h-[36px] px-2"
+          className="hover:text-foreground transition-colors min-h-[36px] px-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         >
           {copied ? "Copied" : "Copy"}
         </button>
diff --git a/web/app/components/ProfileCombobox.tsx b/web/app/components/ProfileCombobox.tsx
index fa0e4ee9..2f2c92cf 100644
--- a/web/app/components/ProfileCombobox.tsx
+++ b/web/app/components/ProfileCombobox.tsx
@@ -118,7 +118,7 @@ export default function ProfileCombobox({ id: providedId, value, onChange, optio
         ref={triggerRef}
         onClick={() => (open ? handleClose() : handleOpen())}
         onKeyDown={handleKeyDown}
-        className="w-full bg-[#141414] border-2 border-border-muted px-3 py-2 text-left flex items-center justify-between text-[12px] min-h-[44px] hover:border-border-strong focus:border-accent"
+        className="w-full bg-[#141414] border-2 border-border-muted px-3 py-2 text-left flex items-center justify-between text-[12px] min-h-[44px] hover:border-border-strong focus:border-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         aria-haspopup="listbox"
         aria-expanded={open}
         aria-controls={open ? listboxId : undefined}
diff --git a/web/app/components/ResultCard.tsx b/web/app/components/ResultCard.tsx
index a32403f3..8820cceb 100644
--- a/web/app/components/ResultCard.tsx
+++ b/web/app/components/ResultCard.tsx
@@ -20,7 +20,7 @@ const ResultHeader = ({ id, title, url, normalizedUrl }: { id: string; title: st
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="text-accent text-[15px] hover:underline"
+        className="text-accent text-[15px] hover:underline focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
       >
         {title}
       </a>
@@ -76,7 +76,7 @@ export default function ResultCard({ result, onCopy, onHelpfulToggle, helpful }:
       <footer className="flex flex-wrap gap-2 text-[11px]">
         <button
           onClick={handleCopy}
-          className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted"
+          className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           aria-live="polite"
         >
           {copying ? "Copied" : "Copy markdown"}
@@ -86,7 +86,7 @@ export default function ResultCard({ result, onCopy, onHelpfulToggle, helpful }:
             href={result.url}
             target="_blank"
             rel="noreferrer"
-            className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted"
+            className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           >
             Open
           </a>
@@ -94,7 +94,7 @@ export default function ResultCard({ result, onCopy, onHelpfulToggle, helpful }:
         {onHelpfulToggle && (
           <button
             onClick={() => onHelpfulToggle(result.id)}
-            className={`px-3 py-2 border-2 ${
+            className={`px-3 py-2 border-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${
               helpful ? "border-accent text-accent" : "border-border-muted text-text-dim"
             }`}
             aria-pressed={helpful}
diff --git a/web/app/components/SearchSection.tsx b/web/app/components/SearchSection.tsx
index c5553cf4..52e3bacd 100644
--- a/web/app/components/SearchSection.tsx
+++ b/web/app/components/SearchSection.tsx
@@ -38,7 +38,7 @@ const SearchActions = ({
           disabled={loading}
           aria-label={loading ? "Fetching results..." : "Fetch results"}
           title="Fetch results"
-          className="bg-accent text-background px-4 py-2 text-[13px] font-bold hover:bg-[#00cc33] disabled:opacity-50 min-w-[60px] min-h-[44px]"
+          className="bg-accent text-background px-4 py-2 text-[13px] font-bold hover:bg-[#00cc33] disabled:opacity-50 min-w-[60px] min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         >
           {loading ? "..." : "Fetch"}
         </button>
@@ -46,7 +46,7 @@ const SearchActions = ({
       <button
         onClick={onClear}
         aria-label="Clear input and results"
-        className="bg-transparent text-text-dim px-4 py-2 text-[13px] border-2 border-border-muted hover:border-accent hover:text-accent min-h-[44px]"
+        className="bg-transparent text-text-dim px-4 py-2 text-[13px] border-2 border-border-muted hover:border-accent hover:text-accent min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
       >
         Clear
       </button>
@@ -122,13 +122,13 @@ export function SearchSection({
             aria-invalid={Boolean(error)}
             aria-errormessage={error ? "search-error" : undefined}
             enterKeyHint="search"
-            className="w-full bg-transparent text-[20px] sm:text-[24px] text-foreground placeholder:text-text-dim tracking-tight pr-10"
+            className="w-full bg-transparent text-[20px] sm:text-[24px] text-foreground placeholder:text-text-dim tracking-tight pr-10 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           />
           {query && (
             <button
               type="button"
               onClick={handleClearQuery}
-              className="absolute right-0 top-1/2 -translate-y-1/2 p-2 text-text-dim hover:text-accent transition-colors"
+              className="absolute right-0 top-1/2 -translate-y-1/2 p-2 text-text-dim hover:text-accent transition-colors focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
               aria-label="Clear query"
             >
               ×
diff --git a/web/app/components/Sidebar.tsx b/web/app/components/Sidebar.tsx
index 47731989..d1dc5731 100644
--- a/web/app/components/Sidebar.tsx
+++ b/web/app/components/Sidebar.tsx
@@ -74,7 +74,7 @@ export default function Sidebar({
       <button
         data-testid="sidebar-toggle"
         onClick={() => setSidebarOpen(!sidebarOpen)}
-        className="hidden lg:flex w-full p-4 items-center justify-between hover:bg-[#141414] transition-colors min-h-[44px]"
+        className="hidden lg:flex w-full p-4 items-center justify-between hover:bg-[#141414] transition-colors min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         aria-label={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
         aria-expanded={sidebarOpen}
         aria-controls="sidebar-navigation"
@@ -85,7 +85,7 @@ export default function Sidebar({
               Configuration
             </span>
             <div className="flex items-center gap-2">
-              <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent">
+              <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
                 Keys
               </Link>
               <span className="text-[10px] text-text-dim">Hide</span>
@@ -102,12 +102,12 @@ export default function Sidebar({
           Configuration
         </span>
         <div className="flex items-center gap-3">
-          <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent">
+          <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
             Keys
           </Link>
           <button
             onClick={() => { setMobileMenuOpen(false); }}
-            className="text-[11.5px] text-text-muted hover:text-[#ff4444] focus:text-[#ff4444] font-bold min-h-[30px] px-2 flex items-center focus:outline-none"
+            className="text-[11.5px] text-text-muted hover:text-[#ff4444] focus:text-[#ff4444] font-bold min-h-[30px] px-2 flex items-center focus:outline-none focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
             aria-label="Close configuration"
           >
             Close
@@ -149,7 +149,7 @@ export default function Sidebar({
                 step="1000"
                 value={maxChars}
                 onChange={(e) => setMaxChars(parseInt(e.target.value))}
-                className="w-full h-1 bg-border-muted accent-accent appearance-none cursor-pointer"
+                className="w-full h-1 bg-border-muted accent-accent appearance-none cursor-pointer focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
               />
             </div>
           </div>
@@ -167,7 +167,7 @@ export default function Sidebar({
                 const tooltipId = `provider-hint-${provider.id}`;
                 const showHint = needsKey || (provider.id === "duckduckgo" && mistralActive);
 
-                let buttonClasses = "px-2 py-1 text-[10px] border-2 transition-colors min-h-[36px] ";
+                let buttonClasses = "px-2 py-1 text-[10px] border-2 transition-colors min-h-[36px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ";
                 if (isActive) {
                   if (isManual) {
                     buttonClasses += "bg-accent text-background border-accent font-bold";
@@ -227,7 +227,7 @@ export default function Sidebar({
               onClick={() => setApiKeysOpen(!apiKeysOpen)}
               aria-expanded={apiKeysOpen}
               aria-controls="api-keys-panel"
-              className="text-[11px] text-text-muted hover:text-foreground text-left min-h-[44px] py-2"
+              className="text-[11px] text-text-muted hover:text-foreground text-left min-h-[44px] py-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
             >
               <span aria-hidden="true">{apiKeysOpen ? "▼" : "▶"}</span> API Keys
             </button>
@@ -239,7 +239,7 @@ export default function Sidebar({
                     type="checkbox"
                     checked={skipCache}
                     onChange={(e) => setSkipCache(e.target.checked)}
-                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent"
+                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                   />
                   Skip cache
                 </label>
@@ -249,7 +249,7 @@ export default function Sidebar({
                     type="checkbox"
                     checked={deepResearch}
                     onChange={(e) => setDeepResearch(e.target.checked)}
-                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent"
+                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                   />
                   Deep research
                 </label>
@@ -267,7 +267,7 @@ export default function Sidebar({
                         value={value}
                         onChange={(e) => handleKeyChange(key, e.target.value)}
                         placeholder={hasServer && !value ? "Using server key" : "sk-..."}
-                        className="bg-[#141414] border-2 border-border-muted px-2 py-2 text-[12px] text-foreground placeholder:text-text-dim focus:border-accent min-h-[44px]"
+                        className="bg-[#141414] border-2 border-border-muted px-2 py-2 text-[12px] text-foreground placeholder:text-text-dim focus:border-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 min-h-[44px]"
                       />
                     </div>
                   );