vfs: make the path and list tab-able

Pressing tab key should iterate through crumb in the path and in the
item in the list.

1 files changed, 61 insertions, 9 deletions

diff --git a/vfs/vfs.ts b/vfs/vfs.ts
index d092a3e..ed126eb 100644
--- a/vfs/vfs.ts
+++ b/vfs/vfs.ts
@@ -130,6 +130,7 @@ class WuiVfsList {
       const el = document.createElement("div");
       el.style.padding = "1em";
       el.style.cursor = "pointer";
+      el.setAttribute("tabindex", "0");
       el.innerText = c.name;
 
       if (c.is_dir) {
@@ -140,20 +141,45 @@ class WuiVfsList {
       el.onclick = () => {
         this.onClick(c);
       };
-      el.onmouseout = () => {
-        if (c.is_dir) {
-          el.style.backgroundColor = "cornsilk";
-        } else {
-          el.style.backgroundColor = "white";
+      el.onkeydown = (ev: KeyboardEvent) => {
+        if (ev.key !== "Enter") {
+          return true;
         }
+
+        this.onClick(c);
+        this.el.focus();
+        return false;
+      };
+
+      el.onblur = () => {
+        this.onBlur(c, el);
+      };
+      el.onmouseout = () => {
+        this.onBlur(c, el);
+      };
+
+      el.onfocus = () => {
+        this.onFocus(el);
       };
       el.onmouseover = () => {
-        el.style.backgroundColor = "aliceblue";
+        this.onFocus(el);
       };
 
       this.el.appendChild(el);
     }
   }
+
+  private onBlur(c: WuiVfsNodeInterface, el: HTMLElement) {
+    if (c.is_dir) {
+      el.style.backgroundColor = "cornsilk";
+    } else {
+      el.style.backgroundColor = "white";
+    }
+  }
+
+  private onFocus(el: HTMLElement) {
+    el.style.backgroundColor = "aliceblue";
+  }
 }
 
 class WuiVfsPath {
@@ -167,6 +193,8 @@ class WuiVfsPath {
     this.el.style.borderWidth = "1px";
     this.el.style.borderStyle = "solid";
     this.el.style.borderColor = "silver";
+    this.el.style.overflow = "auto";
+    this.el.style.padding = "10px 10px 20px 0px";
     this.onClick = onClick;
   }
 
@@ -193,22 +221,46 @@ class WuiVfsPath {
       }
 
       const crumb = document.createElement("span");
-      crumb.style.display = "inline-block";
       crumb.style.padding = "1em";
       crumb.style.cursor = "pointer";
+      crumb.setAttribute("tabindex", "0");
       crumb.innerHTML = p;
 
       crumb.onclick = () => {
         this.onClick(fullPath);
       };
+      crumb.onkeydown = (ev: KeyboardEvent) => {
+        if (ev.key !== "Enter") {
+          return true;
+        }
+
+        this.onClick(fullPath);
+        this.el.focus();
+        return false;
+      };
+
       crumb.onmouseout = () => {
-        crumb.style.backgroundColor = "white";
+        this.onBlur(crumb);
       };
+      crumb.onblur = () => {
+        this.onBlur(crumb);
+      };
+
       crumb.onmouseover = () => {
-        crumb.style.backgroundColor = "aliceblue";
+        this.onFocus(crumb);
+      };
+      crumb.onfocus = () => {
+        this.onFocus(crumb);
       };
 
       this.el.appendChild(crumb);
     });
   }
+
+  private onBlur(crumb: HTMLElement) {
+    crumb.style.backgroundColor = "white";
+  }
+  private onFocus(crumb: HTMLElement) {
+    crumb.style.backgroundColor = "aliceblue";
+  }
 }