From b9b409853d97550a04f222c118c048a21c1d64e8 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Thu, 10 Jun 2021 14:30:56 +0200
Subject: [PATCH] Fix accessibility of radio input

---
 static/styles.css | 51 +++++++++++++++++++++++++++++++++++------------
 views/index.pug   |  6 +++---
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index fbc84cf..f59378d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -33,6 +33,11 @@
 input:focus, textarea:focus {
   background: azure;
 }
+input[type="radio"]:focus + label {
+  box-shadow: 0 0 0 3px lightskyblue;
+  background: azure !important;
+  color: var(--grey-900) !important;
+}
 body {
   display: flex;
   flex-direction: column;
@@ -398,32 +403,49 @@ form textarea {
   font-size: 0.9rem;
   border: 1px solid #444;
 }
-.button-wrapper, .radio-wrapper {
+.button-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-}
-form .button-wrapper, form .radio-wrapper {
   margin: 8px 0;
 }
-form input[type="radio"] {
-  display: none;
+.radio-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 8px 0;
 }
-form input[type="radio"] + label {
+.radio-wrapper input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+}
+.radio-wrapper input[type="radio"] + label {
+  margin: 0;
   padding: 2px 8px;
   background-color: #fff;
-  border-radius: 3px;
-  border: solid 2px var(--purple-400);
+  border: solid var(--purple-400);
+  border-width: 2px 1px;
   cursor: pointer;
 }
-form input[type="radio"] + label:hover {
-  background-color: var(--purple-100);
-  border: solid 2px var(--purple-500);
+.radio-wrapper input[type="radio"]:first-of-type + label {
+  border-radius: 4px 0 0 4px;
+  border-left-width: 2px;
 }
-form input[type="radio"]:checked + label {
+.radio-wrapper input[type="radio"]:last-of-type + label {
+  border-radius: 0 4px 4px 0;
+  border-right-width: 2px;
+}
+.radio-wrapper input[type="radio"]:focus + label {
+  z-index: 1;
+}
+.radio-wrapper input[type="radio"] + label:hover {
+  background-color: var(--purple-100);
+  border-color: var(--purple-500);
+}
+.radio-wrapper input[type="radio"]:checked + label {
   color: #fff;
   background-color: var(--purple-600);
-  border: solid 2px var(--purple-600);
+  border-color: var(--purple-600);
 }
 
 input[type="button"], input[type="submit"], button, a.button {
@@ -441,6 +463,9 @@ input[type="button"], input[type="submit"], button, a.button {
   border-radius: 4px;
   cursor: pointer;
 }
+input[type="button"]:focus, input[type="submit"]:focus, button:focus, a.button:focus {
+  background-color: azure;
+}
 input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:hover {
   background-color: var(--purple-500);
   border-color: var(--purple-500);
diff --git a/views/index.pug b/views/index.pug
index f097c41..1ea41c7 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -42,11 +42,11 @@ block content
         fieldset(role="radiogroup").radio-wrapper
           legend Protocol
           input#protocol-hkp(type="radio" name="protocol" value="hkp" checked="true")
-          label(for="protocol-hkp" tabindex="0") HKP
+          label(for="protocol-hkp") HKP
           input#protocol-wkd(type="radio" name="protocol" value="wkd")
-          label(for="protocol-wkd" tabindex="0") WKD
+          label(for="protocol-wkd") WKD
           input#protocol-sig(type="radio" name="protocol" value="sig")
-          label(for="protocol-sig" tabindex="0") Signature
+          label(for="protocol-sig") Signature
         input(type="submit" value="Generate profile")
 
   if highlights.length > 0