Make signature count graph accessible by using a progress element

alphagov · Jan 31, 2025 · be6a8f9 · be6a8f9
1 parent bd97f66
commit be6a8f9
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 51 deletions.
diff --git a/app/assets/stylesheets/site/petitions/views/_petition-show.scss b/app/assets/stylesheets/site/petitions/views/_petition-show.scss
@@ -36,20 +36,38 @@
     @extend %contain-floats;
   }
 
-  .signature-count-graph {
-    clear: both;
-    width: 100%;
-    height: 10px;
-    overflow: hidden;
-    background-color: $border-colour;
+  .signature-count-progress {
+    display: block;
+    margin: 0;
     padding: 0;
 
-    .signature-count-current {
+    progress[value] {
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      appearance: none;
       display: block;
+
       height: 10px;
-      background-color: $petitions-brand;
-      @extend %animated;
-      @extend %fadeInLeft;
+      width: 100%;
+
+      border: none;
+
+      &::-moz-progress-bar {
+        background-color: $petitions-brand;
+      }
+
+      &::-webkit-progress-bar {
+        background-color: $border-colour;
+      }
+
+      &::-webkit-progress-value {
+        background-color: $petitions-brand;
+      }
+
+      &::-webkit-progress-inner-element {
+        background-color: $border-colour;
+        border: none;
+      }
     }
   }
 }

diff --git a/app/views/application/_signature_count.html.erb b/app/views/application/_signature_count.html.erb
@@ -0,0 +1,35 @@
+<div class="signature-count">
+  <p class="signature-count-number" role="status" aria-atomic="true">
+    <%= signature_count(:default, petition.signature_count) %>
+  </p>
+
+  <label class="signature-count-progress">
+    <span class="visuallyhidden">Progress of the petition towards its next target:</span>
+    <% if petition.response_threshold_reached_at? || petition.government_response_at? %>
+      <%= tag.progress(value: petition.signature_count, max: Site.threshold_for_debate) do %>
+        <%= number_with_delimiter(petition.signature_count) %> of <%= Site.formatted_threshold_for_debate %> signatures required to be considered for a debate in Parliament
+      <% end %>
+    <% else %>
+      <%= tag.progress(value: petition.signature_count, max: Site.threshold_for_response) do %>
+        <%= number_with_delimiter(petition.signature_count) %> of <%= Site.formatted_threshold_for_response %> signatures required to get a government response
+      <% end %>
+    <% end %>
+  </label>
+
+  <p class="signatures-on-a-map">
+    <a href="https://petitionmap.unboxedconsulting.com/?petition=<%= petition.id %>">
+      Show on a map
+      <span class="visuallyhidden">the geographical breakdown of signatures by constituency</span>
+    </a>
+  </p>
+
+  <p class="signature-count-goal">
+    <%= number_with_delimiter(current_threshold(petition)) %>
+
+    <% if petition.response_threshold_reached_at? || petition.government_response_at? %>
+      <span class="visuallyhidden"> signatures required to be considered for a debate in Parliament</span>
+    <% else %>
+      <span class="visuallyhidden"> signatures required to get a government response</span>
+    <% end %>
+  </p>
+</div>
diff --git a/app/views/archived/petitions/show.html.erb b/app/views/archived/petitions/show.html.erb
@@ -68,20 +68,7 @@
     </p>
   <% end %>
 
-  <div class="signature-count">
-    <p class="signature-count-number"><%= signature_count(:default, @petition.signature_count) %></p>
-    <div class="signature-count-graph" aria-hidden="true">
-      <span class="signature-count-current" style="width: <%= archived_threshold_percentage(@petition) %>"></span>
-    </div>
-    <% if @petition.show_on_a_map? %>
-      <p class="signatures-on-a-map">
-        <a href="https://petitionmap.unboxedconsulting.com/?petition=<%= @petition.id %>">Show on a map</a>
-      </p>
-    <% end %>
-    <p class="signature-count-goal">
-      <%= number_with_delimiter(archived_threshold(@petition)) %>
-    </p>
-  </div>
+  <%= render "signature_count", petition: @petition %>
 
   <div class="about-petitions">
     <% if debate_outcome = @petition.debate_outcome %>

diff --git a/app/views/petitions/_closed_petition_show.html.erb b/app/views/petitions/_closed_petition_show.html.erb
@@ -33,18 +33,7 @@
   </p>
 <% end %>
 
-<div class="signature-count">
-  <p class="signature-count-number"><%= signature_count(:default, petition.signature_count) %></p>
-  <div class="signature-count-graph" aria-hidden="true">
-    <span class="signature-count-current" style="width: <%= signatures_threshold_percentage(petition) %>"></span>
-  </div>
-  <p class="signatures-on-a-map">
-    <a href="https://petitionmap.unboxedconsulting.com/?petition=<%= petition.id %>">Show on a map</a>
-  </p>
-  <p class="signature-count-goal">
-    <%= number_with_delimiter(current_threshold(petition)) %>
-  </p>
-</div>
+<%= render "signature_count", petition: petition %>
 <%= render 'threshold_details', petition: petition %>
 <%= render 'related_activity_details', petition: petition %>
 <ul class="petition-meta">

diff --git a/app/views/petitions/_open_petition_show.html.erb b/app/views/petitions/_open_petition_show.html.erb
@@ -30,21 +30,7 @@
   <%= link_to "Sign this petition", new_petition_signature_path(petition), :class => 'button button-sign-petition' %>
 <% end %>
 
-<div class="signature-count">
-  <p class="signature-count-number" role="status" aria-atomic="true">
-    <%= signature_count(:default, petition.signature_count) %>
-  </p>
-  <div class="signature-count-graph" aria-hidden="true">
-    <span class="signature-count-current" style="width: <%= signatures_threshold_percentage(petition) %>"></span>
-  </div>
-  <p class="signatures-on-a-map">
-    <a href="https://petitionmap.unboxedconsulting.com/?petition=<%= petition.id %>">Show on a map</a>
-  </p>
-  <p class="signature-count-goal">
-    <%= number_with_delimiter(current_threshold(petition)) %>
-  </p>
-</div>
-
+<%= render "signature_count", petition: petition %>
 <%= render 'threshold_details', petition: petition %>
 <%= render 'related_activity_details', petition: petition %>
 <%= render 'share_petition', petition: petition %>