From d53e5e61d25405db63cc2e2817186d19dbff8189 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Tue, 20 Aug 2024 11:07:37 +0300
Subject: A11y improvements

---
 static/styles.css                 | 19 ++++++++++++-------
 templates/index.html.j2           |  2 +-
 templates/manage.html.j2          | 16 ++++++++++++----
 templates/poll_info_table.html.j2 | 10 +++++-----
 templates/poll_vote_list.html.j2  |  8 ++++++--
 templates/poll_vote_table.html.j2 |  8 ++++++--
 6 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 8b6c67e..21f742e 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -7,6 +7,11 @@ body {
   padding: 10px;
   max-width: 1000px;
   margin: 0 auto;
+  line-height: 24px;
+}
+
+a:not(:visited) {
+  color: rgb(30, 99, 248);
 }
 
 h1 {
@@ -37,7 +42,7 @@ input[type="submit"] {
   box-shadow: none;
   padding: 5px 8px;
   border: 0;
-  background-color: rgb(63, 122, 248);
+  background-color: rgb(30, 99, 248);
   color: white;
 }
 
@@ -46,9 +51,9 @@ input[type="submit"].red {
   background-color: #d42f2f;
 }
 
-button.green,
-input[type="submit"].green {
-  background-color: #4caf50;
+button.blue,
+input[type="submit"].blue {
+  background-color: rgb(30, 99, 248);;
 }
 
 button.yellow,
@@ -68,7 +73,7 @@ input[type*="date"]:disabled {
 }
 
 .contrast {
-  color: #fa8e35;
+  color: rgb(30, 99, 248);
 }
 
 th, td {
@@ -191,8 +196,8 @@ button#share-link-copy {
   padding: 0;
   background: none;
   color: black;
-  font-size: 25px;
-  line-height: 16px;
+  font-size: 24px;
+  line-height: 24px;
 }
 
 input[type="submit"].delete-voter-btn {
diff --git a/templates/index.html.j2 b/templates/index.html.j2
index fed619b..0512039 100644
--- a/templates/index.html.j2
+++ b/templates/index.html.j2
@@ -6,7 +6,7 @@
   {% include "poll_info_table.html.j2" %}
 
   <p>You can add time options as well as modify all settings after submitting.</p>
-  <input class="green" type="submit" value="Create">
+  <input class="blue" type="submit" value="Create">
 </form>
 
 {% if created_polls | length != 0 %}
diff --git a/templates/manage.html.j2 b/templates/manage.html.j2
index 270e837..8cd2027 100644
--- a/templates/manage.html.j2
+++ b/templates/manage.html.j2
@@ -40,6 +40,7 @@
       <tr>
         <td>
           <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
+                 aria-label="{% if poll.is_whole_day %}Start date{% else %}Start datetime{% endif %}"
                  name="start_datetime_{{ choice.id }}"
                  value="{% if poll.is_whole_day %}{{ choice.start_date_notz() }}{% else %}{{ choice.start_datetime_notz() }}{% endif %}"
                  disabled
@@ -47,6 +48,7 @@
         </td>
         <td>
           <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
+                 aria-label="{% if poll.is_whole_day %}End date{% else %}End datetime{% endif %}"
                  name="end_datetime_{{ choice.id }}"
                  value="{% if poll.is_whole_day %}{{ choice.end_date_notz() }}{% else %}{{ choice.end_datetime_notz() }}{% endif %}"
                  disabled
@@ -61,13 +63,19 @@
     <form action="/manage/{{ poll.manage_code }}/add_choice" method="post">
       <tr>
         <td>
-          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="start_datetime" required>
+          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
+                 aria-label="{% if poll.is_whole_day %}Start date{% else %}Start datetime{% endif %}"
+                 name="start_datetime"
+                 required>
         </td>
         <td>
-          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="end_datetime" required>
+          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
+                 aria-label="{% if poll.is_whole_day %}End date{% else %}End datetime{% endif %}"
+                 name="end_datetime"
+                 required>
         </td>
         <td>
-          <input class="green" type="submit" value="Add">
+          <input class="blue" type="submit" value="Add">
         </td>
       </tr>
     </form>
@@ -133,7 +141,7 @@ if (focusNext !== null) {
 
 let shareLinkCopy = document.getElementById("share-link-copy");
 if (shareLinkCopy !== null) {
-  shareLinkCopy.outerHTML = "<button id='share-link-copy' onclick='copyShareLink()'>📋</button>";
+  shareLinkCopy.outerHTML = "<button id='share-link-copy' aria-label='Copy share link' onclick='copyShareLink()'>📋</button>";
   shareLinkCopy = document.getElementById("share-link-copy"); // refresh the reference
 }
 
diff --git a/templates/poll_info_table.html.j2 b/templates/poll_info_table.html.j2
index 7955ca8..3eca73f 100644
--- a/templates/poll_info_table.html.j2
+++ b/templates/poll_info_table.html.j2
@@ -2,23 +2,23 @@
   <tbody>
     <tr>
       <td><label for="title">Title</label></td>
-      <td><input type="text" name="title" value="{% if poll %}{{ poll.title }}{% endif %}" required></td>
+      <td><input type="text" name="title" id="title" value="{% if poll %}{{ poll.title }}{% endif %}" required></td>
     </tr>
     <tr>
       <td><label for="description">Description (optional)</label></td>
-      <td><textarea name="description">{% if poll %}{{ poll.description }}{% endif %}</textarea></td>
+      <td><textarea name="description" id="description">{% if poll %}{{ poll.description }}{% endif %}</textarea></td>
     </tr>
     <tr>
       <td><label for="author_name">Your name</label></td>
-      <td><input type="text" name="author_name" value="{% if poll %}{{ poll.author_name }}{% endif %}" required></td>
+      <td><input type="text" name="author_name" id="author_name" value="{% if poll %}{{ poll.author_name }}{% endif %}" required></td>
     </tr>
     <tr>
       <td><label for="author_email">Your email (optional)</label></td>
-      <td><input type="text" name="author_email" value="{% if poll %}{{ poll.author_email }}{% endif %}"></td>
+      <td><input type="text" name="author_email" id="author_email" value="{% if poll %}{{ poll.author_email }}{% endif %}"></td>
     </tr>
     <tr>
       <td><label for="is_whole_day">Whole day event?</label></td>
-      <td class="checkbox-field"><input type="checkbox" name="is_whole_day" {% if poll and poll.is_whole_day %}checked{% endif %}></td>
+      <td class="checkbox-field"><input type="checkbox" name="is_whole_day" id="is_whole_day" {% if poll and poll.is_whole_day %}checked{% endif %}></td>
     </tr>
   </tbody>
 </table>
diff --git a/templates/poll_vote_list.html.j2 b/templates/poll_vote_list.html.j2
index c62c102..54e7d9f 100644
--- a/templates/poll_vote_list.html.j2
+++ b/templates/poll_vote_list.html.j2
@@ -26,9 +26,13 @@
 
   <div>
     <label for="voter_name" hidden>Your name</label>
-    <input type="text" name="voter_name" placeholder="Your name" required
+    <input type="text"
+           name="voter_name"
+           id="voter_name"
+           placeholder="Your name"
+           required
            {% if prefill_voter_name %}value="{{ prefill_voter_name }}"{% endif %}>
-    <input class="green" type="submit" value="Submit">
+    <input class="blue" type="submit" value="Submit">
   </div>
 </form>
 
diff --git a/templates/poll_vote_table.html.j2 b/templates/poll_vote_table.html.j2
index 1fe6019..7083cb2 100644
--- a/templates/poll_vote_table.html.j2
+++ b/templates/poll_vote_table.html.j2
@@ -51,9 +51,13 @@
       <form action="/poll/{{ poll.id }}/vote" method="post">
       <td>
         <label for="voter_name" hidden>Your name</label>
-        <input type="text" name="voter_name" placeholder="Your name" required
+        <input type="text"
+               name="voter_name"
+               id="voter_name"
+               placeholder="Your name"
+               required
                {% if prefill_voter_name %}value="{{ prefill_voter_name }}"{% endif %}>
-        <input class="green" type="submit" value="Submit">
+        <input class="blue" type="submit" value="Submit">
       </td>
       {% for choice in choices %}
       <td>
-- 
cgit v1.3