Added focus-visible outline to notices in the day overview (#19)

Author: zefir-git

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>