From ed40249bb3bb226615d712b34c751f9c27ef14e4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 22 Nov 2020 17:47:47 +0100
Subject: [PATCH] Add proper focus styles

---
 src/styles/components/tasks.scss | 14 ++++++++++++++
 src/styles/theme/theme.scss      | 12 ++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 445aa90e..e531f4c2 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -279,3 +279,17 @@
   width: 100%;
   max-width: $desktop;
 }
+
+.tasktext {
+  :focus {
+    box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
+  }
+
+  :focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  :focus-visible, :-moz-focusring {
+    box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
+  }
+}
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 4146e912..ce6bb7bb 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -8,6 +8,18 @@
   outline: none;
 }
 
+:focus {
+  box-shadow: 0 0 0 2px rgba($primary, 0.5);
+}
+
+:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+:focus-visible, :-moz-focusring {
+  box-shadow: 0 0 0 2px rgba($primary, 0.5);
+}
+
 body {
   background: url('../../public/images/llama.svg') no-repeat bottom left fixed $light-background;
   min-height: 100vh;