feat: keyboard navigation completed

ubiquity · Dec 6, 2023 · 38785c5 · 38785c5
1 parent 3f5bbed
commit 38785c5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/home/rendering/render-github-issues.ts b/src/home/rendering/render-github-issues.ts
@@ -161,6 +161,11 @@ function setupKeyboardNavigation(container: HTMLDivElement) {
       if (newIndex !== indexToUse) {
         issues[indexToUse]?.classList.remove("selected");
         issues[newIndex]?.classList.add("selected");
+        issues[newIndex].scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+
         container.classList.add("keyboard-selection");
 
         const previewId = issues[newIndex].children[0].getAttribute("data-preview-id");
@@ -187,10 +192,14 @@ function setupKeyboardNavigation(container: HTMLDivElement) {
           }
         }
       }
+    } else if (event.key === "Escape") {
+      disableKeyboardNavigation(event)
     }
   });
 
-  container.addEventListener("mouseover", (event) => {
+  container.addEventListener("mouseover", disableKeyboardNavigation);
+
+  function disableKeyboardNavigation(event) {
     const target = event.target as HTMLElement;
     container.classList.remove("keyboard-selection");
     if (target && target.matches("#issues-container > div")) {
@@ -199,5 +208,5 @@ function setupKeyboardNavigation(container: HTMLDivElement) {
         selectedIssue.classList.remove("selected");
       }
     }
-  });
+  }
 }
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -92,7 +92,7 @@
     opacity: 1;
   }
   #issues-container.keyboard-selection > div.active {
-    opacity: 0.5;
+    opacity: 0.25;
   }
   #issues-container.keyboard-selection > div.active.selected {
     opacity: 1;

diff --git a/static/style/style.css b/static/style/style.css
@@ -92,7 +92,7 @@
     opacity: 1;
   }
   #issues-container.keyboard-selection > div.active {
-    opacity: 0.5;
+    opacity: 0.25;
   }
   #issues-container.keyboard-selection > div.active.selected {
     opacity: 1;