From df117585e5abaea7ad7d34aed9bf3d93a1880f98 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Thu, 22 Apr 2021 18:26:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Improve=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/components/Button.module.css        | 4 ++++
 code/frontend/src/components/ButtonSidebar.module.css | 4 ++++
 code/frontend/src/components/Input.module.css         | 2 +-
 code/frontend/src/index.css                           | 4 ++++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/code/frontend/src/components/Button.module.css b/code/frontend/src/components/Button.module.css
index 3b8902b..15bb8e5 100644
--- a/code/frontend/src/components/Button.module.css
+++ b/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);
diff --git a/code/frontend/src/components/ButtonSidebar.module.css b/code/frontend/src/components/ButtonSidebar.module.css
index 0d8a1b3..f7534dd 100644
--- a/code/frontend/src/components/ButtonSidebar.module.css
+++ b/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;
 
diff --git a/code/frontend/src/components/Input.module.css b/code/frontend/src/components/Input.module.css
index 861e63f..3c3a12d 100644
--- a/code/frontend/src/components/Input.module.css
+++ b/code/frontend/src/components/Input.module.css
@@ -19,4 +19,4 @@
 
     color: var(--fg-field-on);
     background-color: var(--bg-field-on);
-}
\ No newline at end of file
+}
diff --git a/code/frontend/src/index.css b/code/frontend/src/index.css
index 943ac93..9d0bb46 100644
--- a/code/frontend/src/index.css
+++ b/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;
 }