From 9310e5aaec108c76c541372ac8e9a10c9066db30 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 10 Feb 2019 22:24:20 +0100
Subject: [PATCH 1/3] make inputs more accesible by enabling proper tab-key
 support

---
 templates/standalone/inputs.lucius | 50 +++++++++++++-----------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index 3b0d11372..8205ea06a 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -64,14 +64,8 @@
 }
 
 /* TEXT INPUTS */
-input[type="text"],
-input[type="search"],
-input[type="password"],
-input[type="url"],
-input[type="number"],
-input[type="email"],
-input[type*="date"],
-input[type*="time"] {
+input,
+select {
   /* from bulma.css */
   color: #363636;
   border-color: #dbdbdb;
@@ -88,25 +82,6 @@ input[type*="time"] {
   font-family: var(--font-base);
   line-height: 1.5;
   padding: 4px 13px;
-
-  &:focus {
-    border-color: #3273dc;
-    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
-    outline: 0;
-  }
-
-  &[disabled] {
-    background-color: #f5f5f5;
-    color: #7a7a7a;
-    box-shadow: none;
-    border-color: #dbdbdb;
-  }
-
-  &[readonly] {
-    background-color: #f5f5f5;
-    box-shadow: none;
-    border-color: #dbdbdb;
-  }
 }
 
 input[type="number"] {
@@ -139,7 +114,13 @@ textarea {
   border-radius: 2px;
   box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
   vertical-align: top;
+}
 
+/* SHARED STATE RELATED STYLES */
+
+input,
+select,
+textarea {
   &:focus {
     border-color: #3273dc;
     box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
@@ -155,7 +136,6 @@ textarea {
 
   &[readonly] {
     background-color: #f5f5f5;
-    box-shadow: none;
     border-color: #dbdbdb;
   }
 }
@@ -226,7 +206,12 @@ input[type="checkbox"]:checked::after {
 
   [type="checkbox"],
   [type="radio"] {
-    display: none;
+    position: fixed;
+    top: -1px;
+    left: -1px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
   }
 
   label {
@@ -256,6 +241,13 @@ input[type="checkbox"]:checked::after {
     background-color: var(--color-primary);
   }
 
+  [type="checkbox"]:focus + label,
+  [type="radio"]:focus + label {
+    border-color: #3273dc;
+    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
+    outline: 0;
+  }
+
   :checked + label::before,
   :checked + label::after {
     content: '';

From 919104fbea7f3d765dc2fa21d52b229068f91bf9 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 10 Feb 2019 22:30:32 +0100
Subject: [PATCH 2/3] make focused state of buttons more recognizable

---
 templates/default-layout.lucius | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index faf42548f..fd001a810 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -262,6 +262,12 @@ button,
   a:hover {
     color: white;
   }
+
+  &:focus {
+    border-color: #3273dc;
+    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
+    outline: 0;
+  }
 }
 
 input[type="submit"][disabled],

From 5ee61cd46cda19d7af6de5f94b65c6cea6697786 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 10 Feb 2019 22:34:39 +0100
Subject: [PATCH 3/3] more carefully select inputs for styling

---
 templates/default-layout.lucius    | 2 +-
 templates/standalone/inputs.lucius | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index fd001a810..b5c65ab13 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -265,7 +265,7 @@ button,
 
   &:focus {
     border-color: #3273dc;
-    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
+    box-shadow: 0 0 0 0.25rem rgba(50,115,220,.25);
     outline: 0;
   }
 }
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
index 8205ea06a..b67b5ee65 100644
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@@ -64,7 +64,14 @@
 }
 
 /* TEXT INPUTS */
-input,
+input[type="text"],
+input[type="search"],
+input[type="password"],
+input[type="url"],
+input[type="number"],
+input[type="email"],
+input[type*="date"],
+input[type*="time"],
 select {
   /* from bulma.css */
   color: #363636;