From 7038cc1d59e037e4340e4a2878c2d640124dd5f1 Mon Sep 17 00:00:00 2001
From: Zefir Kirilov <contact@zefir.pro>
Date: Sun, 15 Mar 2026 17:18:31 +0200
Subject: [PATCH] Added focus-visible outline to notices in the day overview

---
 src/components/ServiceDayTooltip.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ServiceDayTooltip.ts b/src/components/ServiceDayTooltip.ts
index 5b0484a..d206a9d 100644
--- a/src/components/ServiceDayTooltip.ts
+++ b/src/components/ServiceDayTooltip.ts
@@ -107,7 +107,9 @@ export class ServiceDayTooltip extends Component {
                 const style = ServiceRow.STATUS_STYLES[n.impact];
                 const duration = ServiceDayTooltip.duration(n.duration());
                 return html`
-                  <li class="relative flex items-center gap-2 py-2">
+                  <li
+                    class="relative flex items-center gap-2 py-2 rounded-lg has-focus-visible:outline-2 outline-offset-2 outline-blue-400"
+                  >
                     <div class="group/indicator relative z-10">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -121,8 +123,11 @@ export class ServiceDayTooltip extends Component {
                         class="absolute top-full left-0 z-50 mt-1 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-sm leading-normal font-medium text-white shadow-md ring-1 ring-white/10 ring-inset group-[:not(:hover)]/indicator:sr-only lg:-top-1 lg:-left-1 lg:mt-0 lg:-translate-x-full"
                       >${style.label}</span>
                     </div>
-                    <a href="/notices/${n
-                      .id}" class="font-medium text-white">${n
+                    <a
+                      href="/notices/${n
+                        .id}"
+                      class="font-medium text-white focus-visible:outline-none"
+                    >${n
                       .name}<span
                       class="absolute inset-0"
                     ></span></a>