Improved accessibility (#22)

Author: zefir-git

src/components/AppRoot.ts

@@ -66,11 +66,23 @@ export class AppRoot extends Component {
   }
 
   private setupRouter() {
+    let initial = true;
     this.router
       .on("/", () => {
         this.home = true;
         this.page = new HomePage(this.api, this.services);
       })
+      .on("*", () => {
+        this.router.navigate("/");
+      })
+      .hooks({
+        after: () => {
+          if (!initial) {
+            this.page.focus();
+          }
+          initial = false;
+        },
+      })
       .resolve();
   }
 

src/components/ServiceDayTooltip.ts

@@ -76,7 +76,7 @@ export class ServiceDayTooltip extends Component {
         <div
           class="grid grid-cols-3 items-center border-b border-white/10 px-3 py-2 leading-none"
         >
-          <span class="text-xs text-neutral-500">
+          <span class="text-xs text-neutral-500" aria-hidden="true">
             <time datetime="${days(30)}" class="sm:hidden">30 days ago</time>
             <time datetime="${days(
               60,
@@ -95,9 +95,10 @@ export class ServiceDayTooltip extends Component {
             day: "numeric",
             year: "numeric",
           })}</time>
-          <time datetime="${days(
-            0,
-          )}" class="text-right text-xs text-neutral-500"
+          <time
+            datetime="${days(0)}"
+            aria-hidden="true"
+            class="text-right text-xs text-neutral-500"
           >Today</time>
         </div>
         ${this.notices.length > 0
@@ -124,21 +125,22 @@ export class ServiceDayTooltip extends Component {
                       >${style.label}</span>
                     </div>
                     <a
-                      href="/notices/${n
-                        .id}"
+                      href="/notices/${n.id}"
                       class="font-medium text-white focus-visible:outline-none"
-                    >${n
-                      .name}<span
-                      class="absolute inset-0"
-                    ></span></a>
+                    >
+                      ${n.name}
+                      <span class="absolute inset-0"></span>
+                    </a>
 
                     <div class="mx-2 flex-1 border-t border-white/10"></div>
                     <p class="text-sm text-neutral-400">${n.ended === null ||
-                        n.started.getTime() > now.getTime()
+                        n.started.getTime() > now.getTime() ||
+                        n.ended.getTime() > now.getTime()
                       ? ServiceDayTooltip.STATUS_NAMES[n.status]
                       : html`
-                        Resolved after <time datetime="${duration
-                          .iso}">${duration.human}</time>
+                        Resolved after <time datetime="${duration.iso}">
+                          ${duration.human}
+                        </time>
                       `}</p>
                   </li>
                 `;

src/components/ServiceRow.ts

@@ -210,19 +210,20 @@ export class ServiceRow extends Component {
           </div>
           ${this.service.description === null ? nothing : html`
             <div class="group/description relative">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="size-4 fill-neutral-400"
-                viewBox="0 0 256 256"
-                aria-hidden="true"
-              >
-                <path
-                  d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"
+              <button aria-hidden="true" class="focus:outline-none">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4 fill-neutral-400"
+                  viewBox="0 0 256 256"
                 >
-                </path>
-              </svg>
+                  <path
+                    d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"
+                  >
+                  </path>
+                </svg>
+              </button>
               <div
-                class="prose prose-neutral prose-invert prose-sm top-full left-0 absolute z-50 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-white font-medium shadow-md ring-1 ring-white/10 ring-inset not-group-hover/description:sr-only lg:-top-2 lg:left-full lg:mt-0 lg:translate-x-1 max-w-sm"
+                class="prose prose-neutral prose-invert prose-sm top-full left-0 absolute z-50 block w-max rounded-lg bg-neutral-800 px-2 py-1 text-white font-medium shadow-md ring-1 ring-white/10 ring-inset not-group-hover/description:not-group-focus-within/description:sr-only lg:-top-2 lg:left-full lg:mt-0 lg:translate-x-1 max-w-sm"
               >
                 ${unsafeHTML(
                   ServiceRow.MD.render(this.service.description),

src/components/StatusOverview.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { Component } from "./Component";
 import { MainStatus } from "../models/MainStatus";
@@ -169,9 +169,13 @@ export class StatusOverview extends Component {
     const status = StatusOverview.parseMainStatus(this.mainStatus);
     const style = StatusOverview.STYLES[status];
     const message = typeof style.message === "function"
-      ? (this.resolvedService ? style.message(this.resolvedService) : "")
+      ? (this.resolvedService ? style.message(this.resolvedService) : null)
       : style.message;
 
+    if (message === null) {
+      return nothing;
+    }
+
     return html`
       <div class="flex items-center justify-center gap-2 p-6 md:px-8 md:py-10">
         <div class="p-2 ${style.bg} rounded-full ring-1 ring-inset">

src/components/pages/Page.ts

@@ -1,4 +1,15 @@
 import { Component } from "../Component";
 
 export abstract class Page extends Component {
+  public override connectedCallback() {
+    super.connectedCallback();
+    this.tabIndex = -1;
+    this.classList.add("focus:outline-none");
+  }
+
+  public focus() {
+    this.updateComplete.then(() => {
+      super.focus();
+    });
+  }
 }