From 528c4476cbdab2fbccc5c1efa62376af59c9666b Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Wed, 4 Nov 2026 22:06:20 +0100
Subject: [PATCH] swarm-ui: keyboard focus keeps a visible ring on interactive
 cards and notification boxes

---
 .../swarm-ui/src/pages/notifications/NotificationsPage.css  | 4 +++-
 frontend/packages/swarm-ui/src/ui/card/Card.css             | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
index a2561504..55991cc7 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
+++ b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
@@ -181,7 +181,9 @@
   stroke: var(--green);
 }
 
-.notify-box:focus {
+/* A click leaves no ring; keyboard focus keeps the browser's own, so a
+   focused box does not look like a selected one. */
+.notify-box:focus:not(:focus-visible) {
   outline: none;
 }
 
diff --git a/frontend/packages/swarm-ui/src/ui/card/Card.css b/frontend/packages/swarm-ui/src/ui/card/Card.css
index 72abb806..d6d55aad 100644
--- a/frontend/packages/swarm-ui/src/ui/card/Card.css
+++ b/frontend/packages/swarm-ui/src/ui/card/Card.css
@@ -15,7 +15,11 @@
 [role="button"].ui-card:hover,
 [role="button"].ui-card:focus-visible {
   border-color: var(--purple);
-  outline: none;
+}
+/* Keyboard focus needs more than the hover tint, so it keeps a real ring. */
+[role="button"].ui-card:focus-visible {
+  outline: 2px solid var(--purple);
+  outline-offset: 2px;
 }
 /* A solid border (not just the hover tint above, which needs to keep
    meaning "hovering", not double as "selected") plus a faint fill so a