Made Macros Page Keyboard Navigable

src/Components/PageHandler.svelte

@@ -133,4 +133,8 @@
         background: none;
         border: none;
     }
+
+    button:focus-visible {
+        outline: dashed orange 2px;
+    }
 </style>

src/Macros/Action/Action.svelte

@@ -190,7 +190,15 @@
         opacity: 1;
     }
 
+    .buttons:focus-within {
+        opacity: 1;
+    }
+
     .action:hover {
         background: var(--background-gray);
     }
+
+    button:focus-visible {
+        outline: dashed orange 2px;
+    }
 </style>

src/Macros/Action/Actions.svelte

@@ -198,4 +198,8 @@
     .header > button > img {
         width: 100%;
     }
+
+    button:focus-visible {
+        outline: dashed orange 2px;
+    }
 </style>

src/Macros/Components/Macro.svelte

@@ -64,4 +64,8 @@
         background: none;
         border: none;
     }
+
+    button:focus-visible {
+        border: dashed orange 2px;
+    }
 </style>

src/Macros/MacroConfigPage.svelte

@@ -327,4 +327,8 @@
     button {
         border: none;
     }
+
+    button:focus-visible {
+        border: dashed orange 2px;
+    }
 </style>

src/Macros/MacroViewingPage.svelte

@@ -73,6 +73,10 @@
         border: none;
     }
 
+    button:focus-visible {
+        outline: orange dashed 2px;
+    }
+
     @media (prefers-color-scheme: light) {
         .macro-button {
             background-color: var(--primary-blue);