Show notification dismiss button on keyboard focus

samejr · samejr · commit 883e471b811a · 2026-05-11T18:11:37.000+01:00
diff --git a/apps/webapp/app/components/navigation/NotificationCard.tsx b/apps/webapp/app/components/navigation/NotificationCard.tsx
@@ -87,7 +87,7 @@ export function NotificationCard({
         <button
           type="button"
           onClick={handleDismiss}
-          className="relative z-20 -mr-1 shrink-0 rounded p-0.5 text-text-dimmed opacity-0 transition group-hover/card:opacity-100 hover:bg-charcoal-700 hover:text-text-bright"
+          className="relative z-20 -mr-1 shrink-0 rounded p-0.5 text-text-dimmed opacity-0 transition group-hover/card:opacity-100 hover:bg-charcoal-700 hover:text-text-bright focus-visible:opacity-100"
         >
           <XMarkIcon className="size-3.5" />
         </button>

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@ export function NotificationCard({`
`87`	`87`	`<button`
`88`	`88`	`type="button"`
`89`	`89`	`onClick={handleDismiss}`
`90`		`- className="relative z-20 -mr-1 shrink-0 rounded p-0.5 text-text-dimmed opacity-0 transition group-hover/card:opacity-100 hover:bg-charcoal-700 hover:text-text-bright"`
	`90`	`+ className="relative z-20 -mr-1 shrink-0 rounded p-0.5 text-text-dimmed opacity-0 transition group-hover/card:opacity-100 hover:bg-charcoal-700 hover:text-text-bright focus-visible:opacity-100"`
`91`	`91`	`>`
`92`	`92`	`<XMarkIcon className="size-3.5" />`
`93`	`93`	`</button>`