Style and a11y improvements

4 files changed, 34 insertions, 12 deletions

diff --git a/static/styles.css b/static/styles.css
index 21f742e..eb71d75 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -10,7 +10,7 @@ body {
   line-height: 24px;
 }
 
-a:not(:visited) {
+a {
   color: rgb(30, 99, 248);
 }
 
@@ -53,7 +53,7 @@ input[type="submit"].red {
 
 button.blue,
 input[type="submit"].blue {
-  background-color: rgb(30, 99, 248);;
+  background-color: rgb(30, 99, 248);
 }
 
 button.yellow,
@@ -166,7 +166,10 @@ th, td {
 }
 
 .display-mode-section input[type="submit"] {
-  margin-left: 10px;
+  text-decoration: underline;
+  color: rgb(30, 99, 248);
+  background: none;
+  padding: 5px 0;
 }
 
 .vote-list label,
@@ -200,10 +203,21 @@ button#share-link-copy {
   line-height: 24px;
 }
 
+.delete-voter-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.delete-voter-container span {
+  margin-bottom: 4px;
+}
+
 input[type="submit"].delete-voter-btn {
   margin-left: 5px;
   background: none;
-  padding: 0;
+  padding: 2px 4px;
 }
 
 /* This is to fix a CSS specificity issue with the .most-voted class */
diff --git a/templates/poll.html.j2 b/templates/poll.html.j2
index 1661b79..b3975cf 100644
--- a/templates/poll.html.j2
+++ b/templates/poll.html.j2
@@ -15,8 +15,8 @@
   <form action="/options/toggle_display_mode" method="post">
     <input type="hidden" name="poll_id" value="{{ poll.id }}">
     <label>
-      Display mode: <strong>{{ display_mode }}</strong>
-      <input type="submit" value="Toggle">
+      Display mode:
+      <input type="submit" value="{{ display_mode }}">
     </label>
   </form>
 </div>
diff --git a/templates/poll_vote_list.html.j2 b/templates/poll_vote_list.html.j2
index 54e7d9f..3b6d223 100644
--- a/templates/poll_vote_list.html.j2
+++ b/templates/poll_vote_list.html.j2
@@ -43,10 +43,13 @@
 {% endif %}
 <div>
   {% for voter_name in managed_voter_names %}
-  <form action="/poll/{{ poll.id }}/delete_voter" method="post">
+  <form class="delete-voter-container" action="/poll/{{ poll.id }}/delete_voter" method="post">
     <input type="hidden" name="voter_code" value="{{ managed_voter_names[voter_name] }}">
-    {{ voter_name }}
-    <input class="delete-voter-btn" type="submit" value="❌">
+    <span>{{ voter_name }}</span>
+    <input aria-label="Delete voter {{ voter_name }}"
+           class="delete-voter-btn"
+           type="submit"
+           value="❌">
   </form>
   {% endfor %}
 </div>
\ No newline at end of file
diff --git a/templates/poll_vote_table.html.j2 b/templates/poll_vote_table.html.j2
index 7083cb2..70d5b8d 100644
--- a/templates/poll_vote_table.html.j2
+++ b/templates/poll_vote_table.html.j2
@@ -19,10 +19,15 @@
     <tr>
       <td>
         {% if voter_name in managed_voter_names %}
-        <form action="/poll/{{ poll.id }}/delete_voter" method="post">
+        <form class="delete-voter-container"
+              action="/poll/{{ poll.id }}/delete_voter"
+              method="post">
           <input type="hidden" name="voter_code" value="{{ managed_voter_names[voter_name] }}">
-          {{ voter_name }}
-          <input class="delete-voter-btn" type="submit" value="❌">
+          <span>{{ voter_name }}</span>
+          <input aria-label="Delete voter {{ voter_name }}"
+                 class="delete-voter-btn"
+                 type="submit"
+                 value="❌">
         </form>
         {% else %}
         {{ voter_name }}