Make Device Page Keyboard Navigable

atticuscornett · Mar 15, 2024 · e092974 · e092974
1 parent ccc726d
commit e092974
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/src/Components/DeviceTile.svelte b/src/Components/DeviceTile.svelte
@@ -6,6 +6,7 @@
     export let hoverOptions = true;
     export let action;
     export let index;
+    export let totalDevices;
 
     export let viewDevice;
 
@@ -34,16 +35,32 @@
     });
 
     function handleKeypress(event){
-        console.log(event.key)
         if (event.key === "Tab"){
-            console.log("test");
             event.preventDefault();
             document.getElementById("device-hover-options-"+index).focus();
         }
         if (event.key === "Enter"){
             viewDevice({"i": index});
         }
     }
+
+    function handleHoverKeypress(event){
+        if (event.key === "Tab"){
+            event.preventDefault();
+            event.stopPropagation();
+            document.getElementById("device-hover-options-rename-"+index).focus();
+        }
+    }
+
+    function handleHoverButtonKeypress(event){
+        console.log(action)
+        if (event.target.id === "device-hover-options-remove-"+index && (index === totalDevices-1) && (action === "" ||
+            action === false)){
+            document.getElementById("nav-Devices").focus();
+            event.preventDefault();
+        }
+        event.stopPropagation();
+    }
 </script>
 
 <div class="DevTileWrap" on:keydown={handleKeypress}>
@@ -56,7 +73,7 @@
             <h5 style="{(status == "outdated") ? "color: yellow;" : ""}">{mimacroVersion}{(status == "outdated") ? " (outdated)":""}</h5>
         </div>
         {#if hoverOptions}
-            <div class="HoverOpt" id="device-hover-options-{index}" tabindex="1">
+            <div class="HoverOpt" id="device-hover-options-{index}" tabindex="1" on:keydown={handleHoverKeypress}>
                 <svg xmlns="http://www.w3.org/2000/svg" class="HoverOptIcon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                     <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
@@ -65,13 +82,13 @@
                     <path d="M16 12l0 .01"></path>
                 </svg>
                 <div>
-                    <button id="device-hover-options-rename-{index}" on:click={renameDevice}>Rename</button>
+                    <button id="device-hover-options-rename-{index}" on:click={renameDevice} on:keydown={handleHoverButtonKeypress}>Rename</button>
                     <br>
                     {#if status !== "disconnected" && status !== "updating"}
-                        <button id="device-hover-options-flash-{index}" on:click={flashDevice}>{(status === "connected") ? "Reflash":""}{(status === "outdated") ? "Flash Update":""}</button>
+                        <button id="device-hover-options-flash-{index}" on:click={flashDevice} on:keydown={handleHoverButtonKeypress}>{(status === "connected") ? "Reflash":""}{(status === "outdated") ? "Flash Update":""}</button>
                         <br>
                     {/if}
-                    <button id="device-hover-options-remove-{index}" on:click={removeDevice}>Remove</button>
+                    <button id="device-hover-options-remove-{index}" on:click={removeDevice} on:keydown={handleHoverButtonKeypress}>Remove</button>
                 </div>
             </div>
         {/if}
@@ -116,17 +133,25 @@
         opacity: 1;
     }
 
+    .HoverOpt:focus-within {
+        opacity: 1;
+    }
+
     .HoverOpt > div {
         display: none;
         font-size: 10px;
     }
 
+    .HoverOpt:focus-within {
+        display: block;
+    }
+
     .HoverOpt:hover > div {
         display: block;
         margin-top: 30px;
     }
 
-    .HoverOpt:focus > div {
+    .HoverOpt:focus-within > div {
         display: block;
         margin-top: 30px;
     }
@@ -183,4 +208,8 @@
         border: none;
         border-radius: 3px;
     }
+
+    button:focus {
+        outline: white solid 2px;
+    }
 </style>
diff --git a/src/Components/NavButton.svelte b/src/Components/NavButton.svelte
@@ -28,7 +28,7 @@
 
 <div>
     <input type="radio" value={id} checked={checked} name="NavBarButton">
-    <label for={id} on:click={setPage} tabindex="0" on:keydown={handleKeydown}><div>{name}</div></label>
+    <label for={id} on:click={setPage} tabindex="0" on:keydown={handleKeydown} id="nav-{id}"><div>{name}</div></label>
 </div>
 
 <style>

diff --git a/src/Devices.svelte b/src/Devices.svelte
@@ -59,7 +59,9 @@
                 <h2>You haven't added any devices yet.</h2>
             {/if}
             {#each deviceList as {nickname, mimacroVersion, mimacroType, status}, i}
-                <DeviceTile mimacroType={mimacroType} nickname={nickname} mimacroVersion={mimacroVersion} status={status} bind:action={action} index={i} viewDevice={viewDevice} on:click={() => {viewDevice({i})}}></DeviceTile>
+                <DeviceTile mimacroType={mimacroType} nickname={nickname} mimacroVersion={mimacroVersion} status={status}
+                            bind:action={action} index={i} viewDevice={viewDevice} totalDevices={deviceList.length}
+                            on:click={() => {viewDevice({i})}}></DeviceTile>
             {/each}
         </div>
 
@@ -147,6 +149,10 @@
         border: 2px var(--primary-blue) solid;
     }
 
+    .saveRename:focus-visible {
+        outline: white 2px solid;
+    }
+
     .rounded {
         border-radius: 7px;
     }