From 205162cd359bbe0b47dd110e5e7a877786162b57 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Tue, 8 Jun 2021 10:15:45 +0200
Subject: [PATCH] Improve accessibility

---
 views/index.pug   | 15 +++++++++------
 views/profile.pug | 16 ++++++++++++----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/views/index.pug b/views/index.pug
index 5082a72..6c37a0d 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -36,14 +36,17 @@ block content
     #search.form-wrapper.card
       h2 Generate a profile
       form(action="post")
-        input(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks")
-        div.radio-wrapper
+        label(for="query") Query for fingerprint or email identifier
+        input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks")
+
+        fieldset(aria-role="radiogroup").radio-wrapper
+          legend Protocol
           input#protocol-hkp(type="radio" name="protocol" value="hkp" checked="true")
-          label(for="protocol-hkp") HKP
+          label(for="protocol-hkp" tabindex="0") HKP
           input#protocol-wkd(type="radio" name="protocol" value="wkd")
-          label(for="protocol-wkd") WKD
+          label(for="protocol-wkd" tabindex="0") WKD
           input#protocol-sig(type="radio" name="protocol" value="sig")
-          label(for="protocol-sig") Signature
+          label(for="protocol-sig" tabindex="0") Signature
         input(type="submit" value="Generate profile")
 
   if highlights.length > 0
@@ -51,7 +54,7 @@ block content
     .hcards.hcards--highlights
       each hl in highlights
         .card.card--small-profile
-          p.name= hl.name
+          h3.name= hl.name
           p
             span.fingerprint= hl.fingerprint
             br
diff --git a/views/profile.pug b/views/profile.pug
index 103a549..3762f6e 100644
--- a/views/profile.pug
+++ b/views/profile.pug
@@ -59,18 +59,26 @@ block content
     dialog#dialog--encryptMessage
       div
         form(method='post')
-          textarea.input(name='message' placeholder='Message')
+          label(for="encryptionInput") Message to encrypt 
+          textarea#encryptionInput.input(name='message')
           input.no-margin(type='submit' name='submit' value='ENCRYPT MESSAGE')
-          textarea.output(name='message' placeholder='Waiting for input' readonly)
+          br
+          br
+          label(for="encryptionOutput") Encryption result 
+          textarea#encryptionOutput.output(name='message' placeholder='Waiting for input' readonly)
         form(method="dialog")
           input(type="submit" value="Close")
 
     dialog#dialog--verifySignature
       div
         form(method='post')
-          textarea.input(name='signature' placeholder='Signature')
+          label(for="sigVerInput") Signature 
+          textarea#sigVerInput.input(name='signature')
           input.no-margin(type='submit' name='submit' value='VERIFY SIGNATURE')
-          textarea.output(name='message' placeholder='Waiting for input' readonly)
+          br
+          br
+          label(for="sigVerOutput") Verification result 
+          textarea#sigVerOutput.output(name='message' placeholder='Waiting for input' readonly)
         form(method="dialog")
           input(type="submit" value="Close")