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

---
 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 ++++++--
 5 files changed, 30 insertions(+), 14 deletions(-)

(limited to 'templates')

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