From 8bfc5e08686a605ab854ce3c1bd674420440568b Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 25 Mar 2026 13:31:50 +0000
Subject: [PATCH] fix(site): use focus-visible instead of focus for
 keyboard-only outlines (#23581)

---
 .../components/MultiSelectCombobox/MultiSelectCombobox.tsx    | 4 ++--
 site/src/components/Select/Select.tsx                         | 4 ++--
 site/src/components/Table/Table.tsx                           | 2 +-
 site/src/components/Timeline/TimelineEntry.tsx                | 2 +-
 site/src/hooks/useClickableTableRow.ts                        | 2 +-
 site/src/modules/dashboard/DashboardLayout.tsx                | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
index 19dba23f38..ca3f6c0653 100644
--- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
@@ -512,7 +512,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 										data-testid="clear-option-button"
 										className={cn(
 											`ml-1 pr-0 rounded-sm bg-transparent border-none outline-none
-												focus:ring-2 focus:ring-content-link focus:ml-2.5 focus:pl-0 cursor-pointer`,
+												focus-visible:ring-2 focus-visible:ring-content-link focus-visible:ml-2.5 focus-visible:pl-0 cursor-pointer`,
 											(disabled || option.fixed) && "hidden",
 										)}
 										onKeyDown={(e) => {
@@ -585,7 +585,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 							className={cn(
 								"bg-transparent mt-1 border-none rounded-sm",
 								"cursor-pointer text-content-secondary hover:text-content-primary",
-								"outline-none focus:ring-2 focus:ring-content-link [&>svg]:p-0.5",
+								"outline-none focus-visible:ring-2 focus-visible:ring-content-link [&>svg]:p-0.5",
 								(hideClearAllButton ||
 									disabled ||
 									selected.length < 1 ||
diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx
index 712fa590e6..c1d554c0e7 100644
--- a/site/src/components/Select/Select.tsx
+++ b/site/src/components/Select/Select.tsx
@@ -30,8 +30,8 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
 		className={cn(
 			`flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md
 			border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm
-			ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none,
-			focus:ring-2 focus:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
+			ring-offset-background text-content-secondary placeholder:text-content-secondary
+			disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
 			focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link group`,
 			className,
 		)}
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
index 897e0f249b..a1f38b0a4c 100644
--- a/site/src/components/Table/Table.tsx
+++ b/site/src/components/Table/Table.tsx
@@ -72,7 +72,7 @@ const tableRowVariants = cva(
 			hover: {
 				false: null,
 				true: cn(
-					"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
+					"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-hover",
 					"first:rounded-t-md last:rounded-b-md",
 				),
 			},
diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx
index 507a06cedd..27affd0bd6 100644
--- a/site/src/components/Timeline/TimelineEntry.tsx
+++ b/site/src/components/Timeline/TimelineEntry.tsx
@@ -15,7 +15,7 @@ export const TimelineEntry: React.FC<TimelineEntryProps> = ({
 	return (
 		<TableRow
 			className={cn(
-				"focus:outline focus:-outline-offset-1 focus:outline-2 focus:outline-content-primary ",
+				"focus-visible:outline focus-visible:-outline-offset-1 focus-visible:outline-2 focus-visible:outline-content-primary ",
 				"[&_td]:relative [&_td]:overflow-hidden",
 				"[&_td:before]:absolute [&_td:before]:block [&_td:before]:h-full [&_td:before]:content-[''] [&_td:before]:bg-border [&_td:before]:w-0.5 [&_td:before]:left-[calc((32px+(var(--avatar-default)/2))-1px)]",
 				clickable && "cursor-pointer hover:bg-surface-secondary",
diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
index 5f10c637b8..c67f75bbc3 100644
--- a/site/src/hooks/useClickableTableRow.ts
+++ b/site/src/hooks/useClickableTableRow.ts
@@ -58,7 +58,7 @@ export const useClickableTableRow = <
 	return {
 		...clickableProps,
 		className: cn([
-			"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
+			"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-hover",
 			"first:rounded-t-md last:rounded-b-md",
 		]),
 		hover: true,
diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
index df08c4ace3..4cc4445ee0 100644
--- a/site/src/modules/dashboard/DashboardLayout.tsx
+++ b/site/src/modules/dashboard/DashboardLayout.tsx
@@ -33,7 +33,7 @@ export const DashboardLayout: FC = () => {
 						const main = document.getElementById("main-content");
 						main?.focus();
 					}}
-					className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-surface-primary focus:text-content-primary"
+					className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:z-50 focus-visible:p-4 focus-visible:bg-surface-primary focus-visible:text-content-primary"
 				>
 					Skip to main content
 				</a>