From 6c2bc206dcb7018c7657c3bfd8abe084931410e2 Mon Sep 17 00:00:00 2001
From: code-qtzl <azepeda90@outlook.com>
Date: Sat, 18 Apr 2026 23:13:49 -0500
Subject: [PATCH] fix(site/src/pages/WorkspacePage/WorkspaceNotifications):
 make notification pills keyboard accessible

---
 .../WorkspaceNotifications/Notifications.tsx  | 71 +++++++++----------
 .../WorkspaceNotifications.tsx                |  4 +-
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index e2d1757f26e0d..56ecd901212c5 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -4,11 +4,10 @@ import type { AlertProps } from "#/components/Alert/Alert";
 import { Button, type ButtonProps } from "#/components/Button/Button";
 import { Pill } from "#/components/Pill/Pill";
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "#/components/Tooltip/Tooltip";
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "#/components/Popover/Popover";
 import type { ThemeRole } from "#/theme/roles";
 
 export type NotificationItem = {
@@ -33,55 +32,53 @@ export const Notifications: FC<NotificationsProps> = ({
 	const theme = useTheme();
 
 	return (
-		<TooltipProvider>
-			<Tooltip open={isOpen} onOpenChange={setIsOpen} delayDuration={0}>
-				<TooltipTrigger asChild>
-					<div
-						// Adds some spacing from the Tooltip content
-						className="py-2"
-						data-testid={`${severity}-notifications`}
-					>
-						<NotificationPill
-							items={items}
-							severity={severity}
-							icon={icon}
-							isTooltipOpen={isOpen}
-						/>
-					</div>
-				</TooltipTrigger>
-				<TooltipContent
-					align="end"
-					collisionPadding={16}
-					className="max-w-[400px] p-0 bg-surface-secondary border-surface-quaternary text-sm text-content-primary"
-					style={{
-						borderColor: theme.roles[severity].outline,
-					}}
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<PopoverTrigger asChild>
+				<button
+					type="button"
+					className="py-2 bg-transparent border-none cursor-pointer"
+					data-testid={`${severity}-notifications`}
 				>
-					{items.map((n) => (
-						<NotificationItem notification={n} key={n.title} />
-					))}
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
+					<NotificationPill
+						items={items}
+						severity={severity}
+						icon={icon}
+						isOpen={isOpen}
+					/>
+				</button>
+			</PopoverTrigger>
+			<PopoverContent
+				align="end"
+				collisionPadding={16}
+				className="max-w-[400px] p-0 w-auto bg-surface-secondary border-surface-quaternary text-sm text-content-primary"
+				style={{
+					borderColor: theme.roles[severity].outline,
+				}}
+			>
+				{items.map((n) => (
+					<NotificationItem notification={n} key={n.title} />
+				))}
+			</PopoverContent>
+		</Popover>
 	);
 };
 
 type NotificationPillProps = NotificationsProps & {
-	isTooltipOpen: boolean;
+	isOpen: boolean;
 };
 
 const NotificationPill: FC<NotificationPillProps> = ({
 	items,
 	severity,
 	icon,
-	isTooltipOpen,
+	isOpen,
 }) => {
 	return (
 		<Pill
 			icon={icon}
 			css={(theme) => ({
 				"& svg": { color: theme.roles[severity].outline },
-				borderColor: isTooltipOpen ? theme.roles[severity].outline : undefined,
+				borderColor: isOpen ? theme.roles[severity].outline : undefined,
 			})}
 		>
 			{items.length}
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
index 6147185813ff1..90465b219aa28 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
@@ -270,7 +270,9 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 				<Notifications
 					items={warningNotifications}
 					severity="warning"
-					icon={<TriangleAlertIcon className="size-icon-sm" />}
+					icon={
+						<TriangleAlertIcon aria-hidden="true" className="size-icon-sm" />
+					}
 				/>
 			)}
 		</div>