From b04dd9354b77b492fad32c6c41af02c00649f37f Mon Sep 17 00:00:00 2001
From: Matthew Landauer <mlandauer@gmail.com>
Date: Mon, 30 Oct 2023 00:40:20 +0000
Subject: [PATCH] Improve accessibility of application detail page

---
 .../_tailwind/applications/show.html.erb      |  6 ++---
 spec/features/comment_to_authority_spec.rb    | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/views/_tailwind/applications/show.html.erb b/app/views/_tailwind/applications/show.html.erb
index 138aba0dd..217693c6b 100644
--- a/app/views/_tailwind/applications/show.html.erb
+++ b/app/views/_tailwind/applications/show.html.erb
@@ -54,7 +54,7 @@
 <dl class="text-2xl text-navy grid md:grid-cols-[18rem_1fr] border-light-grey2 border-y py-4 mt-14">
   <dt class="font-bold md:py-1">
     <div class="flex gap-4">
-      <%= image_tag "tailwind/calendar.svg", width: 23 %>
+      <%= image_tag "tailwind/calendar.svg", width: 23, alt: "" %>
       <div>Date sourced</div>
     </div>
   </dt>
@@ -64,7 +64,7 @@
   <%# TODO: Do we show the notified line if nobody has been notified? %>
   <dt class="font-bold md:py-1">
     <div class="flex gap-4">
-      <%= image_tag "tailwind/letter.svg", width: 23 %>
+      <%= image_tag "tailwind/letter.svg", width: 23, alt: "" %>
       <div>Notified</div>
     </div>
   </dt>
@@ -76,7 +76,7 @@
   <%# TODO: What to do if there are 0 comments? %>
   <dt class="font-bold md:py-1">
     <div class="flex gap-4">
-      <%= image_tag "tailwind/comments.svg", width: 23 %>
+      <%= image_tag "tailwind/comments.svg", width: 23, alt: "" %>
       <div>Comments</div>
     </div>
   </dt>
diff --git a/spec/features/comment_to_authority_spec.rb b/spec/features/comment_to_authority_spec.rb
index 68c1e20fc..657c8eeb8 100644
--- a/spec/features/comment_to_authority_spec.rb
+++ b/spec/features/comment_to_authority_spec.rb
@@ -41,6 +41,28 @@
       create(:geocoded_application, id: "1", authority:)
     end
 
+    describe "accessibility tests in new design", js: true do
+      before do
+        sign_in create(:confirmed_user, tailwind_theme: true)
+        visit(application_path(application))
+      end
+
+      it "main content passes" do
+        # Limiting check to main content to ignore (for the time being) colour contrast issues with the header and footer
+        expect(page).to be_axe_clean.within("main").excluding("[data-lat]")
+      end
+
+      it "google maps content passes" do
+        pending "We have to figure out how to get the aria-labels inside the map and streetview to be different"
+        expect(page).to be_axe_clean.within("[data-lat]")
+      end
+
+      it "page passes most" do
+        # Also doing check across whole page so we catch issues like h1 not being used
+        expect(page).to be_axe_clean.skipping("color-contrast").excluding("[data-lat]")
+      end
+    end
+
     it "Adding a comment" do
       sign_in create(:confirmed_user)
       visit(application_path(application))