fix(core/ui): add aria-label to close button and arrow key menu navigation

Closes #884
Closes #1064

Author: marcoscaceres

src/core/ui.js

@@ -49,6 +49,7 @@ const menu = html`<ul
 ></ul>`;
 const closeButton = html`<button
   class="close-button"
+  aria-label="Close"
   onclick=${() => ui.closeModal()}
   title="Close"
 >
@@ -77,12 +78,13 @@ respecPill.addEventListener(
     e.stopPropagation();
     respecPill.setAttribute("aria-expanded", String(menu.hidden));
     toggleMenu();
-    menu.querySelector("li:first-child button").focus();
+    menu.querySelector("li:first-child button")?.focus();
   }
 );
 
 document.documentElement.addEventListener("click", () => {
   if (!menu.hidden) {
+    respecPill.setAttribute("aria-expanded", "false");
     toggleMenu();
   }
 });
@@ -95,6 +97,35 @@ menu.addEventListener(
       respecPill.setAttribute("aria-expanded", String(menu.hidden));
       toggleMenu();
       respecPill.focus();
+      return;
+    }
+    const items = /** @type {HTMLElement[]} */ ([
+      ...menu.querySelectorAll("button:not([disabled])"),
+    ]);
+    const currentIndex = items.indexOf(
+      /** @type {HTMLElement} */ (document.activeElement)
+    );
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = items[(currentIndex + 1) % items.length];
+        next?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = items[(currentIndex - 1 + items.length) % items.length];
+        prev?.focus();
+        break;
+      }
+      case "Home":
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+      case "End":
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
     }
   }
 );