Make Plugins Page Keyboard Navigable

atticuscornett · Mar 19, 2024 · 28bbd07 · 28bbd07
1 parent e092974
commit 28bbd07
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 32 deletions.
diff --git a/src/Components/PluginTile.svelte b/src/Components/PluginTile.svelte
@@ -173,6 +173,10 @@
         background-color: white;
     }
 
+    button:focus-visible {
+        border: orange dashed 2px;
+    }
+
     label {
         font-size: 25px;
         margin-right: 10px;
@@ -220,42 +224,42 @@
         visibility: visible;
     }
 
-        .enabled {
-            border: 0;
-            background-color: darkred;
-            color: white;
-        }
+    .enabled {
+        border: 0;
+        background-color: darkred;
+        color: white;
+    }
 
-        .disabled {
-            border: 0;
-            background-color: darkgreen;
-            color: white;
-        }
+    .disabled {
+        border: 0;
+        background-color: darkgreen;
+        color: white;
+    }
 
-        .close {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            border: none;
-            background: none;
-        }
+    .close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        border: none;
+        background: none;
+    }
 
-        .closeImg {
-            width: 30px;
-        }
+    .closeImg {
+        width: 30px;
+    }
 
-        .errorIcon {
-            position: absolute;
-            right: 33px;
-            top: 3px;
-            width: 25px;
-        }
+    .errorIcon {
+        position: absolute;
+        right: 33px;
+        top: 3px;
+        width: 25px;
+    }
 
-        @media (prefers-color-scheme: dark) {
-            button {
-                color: white;
-                background-color: black;
-                border: white 2px solid;
-            }
+    @media (prefers-color-scheme: dark) {
+        button {
+            color: white;
+            background-color: black;
+            border: white 2px solid;
         }
+    }
 </style>
diff --git a/src/Plugins.svelte b/src/Plugins.svelte
@@ -110,6 +110,10 @@
         user-select: none;
     }
 
+    button:focus-visible {
+        outline: 2px white solid;
+    }
+
     .inline {
         display: inline-block;
     }