🔧 Improve accessibility

code/frontend/src/components/Button.module.css

@@ -11,6 +11,10 @@
     cursor: pointer;
 }
 
+.Button:focus-visible {
+    outline: 2px solid var(--outline);
+}
+
 .ButtonGreen {
     color: var(--fg-green);
     background-color: var(--bg-green);

code/frontend/src/components/ButtonSidebar.module.css

@@ -34,6 +34,10 @@
     color: var(--fg-button-on);
 }
 
+.ButtonLink:focus-visible .ButtonSidebar {
+    outline: 2px solid var(--outline);
+}
+
 .ButtonIcon {
     font-size: x-large;
 

code/frontend/src/components/Input.module.css

@@ -19,4 +19,4 @@
 
     color: var(--fg-field-on);
     background-color: var(--bg-field-on);
-}
+}

code/frontend/src/index.css

@@ -43,6 +43,8 @@ body {
 
     --bg-red: #863821;
     --fg-red: #FFFFFF;
+
+    --outline: white;
 }
 
 .ThemeLight {
@@ -68,4 +70,6 @@ body {
 
     --bg-red: #FF8866;
     --fg-red: #863821;
+
+    --outline: black;
 }