From eb8bdaf4e373e337f11578d421b9202e1818d39f Mon Sep 17 00:00:00 2001
From: Jay X Anaya <jairo.anaya@gmail.com>
Date: Thu, 7 Nov 2024 14:28:27 -0500
Subject: [PATCH] Fix A11y issue with screen readers

---
 lib/web/templates/layout/util_nav/_admin.html.eex | 10 ++++++----
 .../layout/util_nav/_challenge_manager.html.eex   | 15 ++++++++++-----
 .../templates/layout/util_nav/_solver.html.eex    | 12 ++++++++----
 lib/web/views/dashboard_view.ex                   |  4 ++--
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/lib/web/templates/layout/util_nav/_admin.html.eex b/lib/web/templates/layout/util_nav/_admin.html.eex
index 859ffc944..457396d7c 100644
--- a/lib/web/templates/layout/util_nav/_admin.html.eex
+++ b/lib/web/templates/layout/util_nav/_admin.html.eex
@@ -1,26 +1,28 @@
 <div class="bg-primary-darker w-full display-flex flex-justify-center desktop:flex-justify-end padding-1 font-body-3xs desktop:font-body-2xs text-white">
-
+<div>
   <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#grid_view"></use>
       </svg><span class="display-none desktop:display-block ">Dashboard</span><span class="desktop:display-none" style="font-size: 0.7rem">Dashboard</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: Routes.user_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#people"></use>
       </svg><span class="display-none desktop:display-block">Users</span><span class="desktop:display-none" style="font-size: 0.7rem">Users</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center", id: "challenge-link-1")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#emoji_events"></use>
       </svg><span class="display-none desktop:display-block">Challenges</span><span class="desktop:display-none" style="font-size: 0.7rem">Challenges</span>
   <% end %>
-
+</div>
   <div class="display-none desktop:display-flex flex-align-center margin-x-1 margin-top-1"> |
     <img class="usa-icon--size-3 icon-white margin-x-2" alt="Help"src=" <%= Routes.static_path(Web.Endpoint, "/images/account_circle.svg") %>" >
     <ul class="navbar-nav">
diff --git a/lib/web/templates/layout/util_nav/_challenge_manager.html.eex b/lib/web/templates/layout/util_nav/_challenge_manager.html.eex
index 123b1452f..d45e4e6b8 100644
--- a/lib/web/templates/layout/util_nav/_challenge_manager.html.eex
+++ b/lib/web/templates/layout/util_nav/_challenge_manager.html.eex
@@ -1,39 +1,44 @@
 <div class="bg-primary-darker w-full display-flex flex-justify-center desktop:flex-justify-end padding-1 font-body-3xs desktop:font-body-2xs text-white">
-
+<div>
   <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#grid_view"></use>
       </svg><span class="display-none desktop:display-block ">Dashboard</span><span class="desktop:display-none" style="font-size: 0.7rem">Dashboard</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: Routes.challenge_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center", id: "challenge-link-1")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#emoji_events"></use>
       </svg><span class="display-none desktop:display-block">Challenges</span><span class="desktop:display-none" style="font-size: 0.7rem">Challenges</span>
   <% end %>
-
+</div>
+<div>
    <%= link(to: "https://challenge-dev.app.cloud.gov/manage_submissions", class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#star_half"></use>
       </svg><span class="display-none desktop:display-block">Submissions & Evaluations</span><span class="desktop:display-none" style="font-size: 0.7rem">Submissions & Evaluations</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: "https://challenge-dev.app.cloud.gov/evaluation_forms", class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#check_circle_outline"></use>
       </svg><span class="display-none desktop:display-block">Evaluation Forms</span><span class="desktop:display-none" style="font-size: 0.7rem">Evaluation Forms</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: Routes.help_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#support"></use>
       </svg><span class="display-none desktop:display-block">Resources</span><span class="desktop:display-none" style="font-size: 0.7rem">Resources</span>
   <% end %>
+</div>
 
   <div class="display-none desktop:display-flex flex-align-center margin-x-1 margin-top-1">
   |
diff --git a/lib/web/templates/layout/util_nav/_solver.html.eex b/lib/web/templates/layout/util_nav/_solver.html.eex
index 423867ac0..02e98e033 100644
--- a/lib/web/templates/layout/util_nav/_solver.html.eex
+++ b/lib/web/templates/layout/util_nav/_solver.html.eex
@@ -1,32 +1,36 @@
 <div class="bg-primary-darker w-full display-flex flex-justify-center desktop:flex-justify-end padding-1 font-body-3xs desktop:font-body-2xs text-white">
-
+<div>
   <%= link(to: Routes.dashboard_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#grid_view"></use>
       </svg><span class="display-none desktop:display-block ">Dashboard</span><span class="desktop:display-none" style="font-size: 0.7rem">Dashboard</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: Routes.submission_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#file_present"></use>
       </svg><span class="display-none desktop:display-block">Submissions</span><span class="desktop:display-none" style="font-size: 0.7rem">Submissions</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: Routes.saved_challenge_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#emoji_events"></use>
       </svg><span class="display-none desktop:display-block">Saved Challenges</span><span class="desktop:display-none" style="font-size: 0.7rem">Saved Challenges</span>
   <% end %>
-
+</div>
+<div>
   <%= link(to: Routes.help_path(@conn, :index), class: "display-flex flex-align-center flex-column desktop:flex-row margin-x-1 desktop:margin-x-3 text-white
                     width-9 tablet:width-auto tablet:text-no-wrap text-center")  do %>
       <svg class="usa-icon--size-4 desktop:usa-icon--size-3 icon-white desktop:margin-right-1" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="/assets/img/sprite.svg#support"></use>
       </svg><span class="display-none desktop:display-block">Resources</span><span class="desktop:display-none" style="font-size: 0.7rem">Resources</span>
   <% end %>
+</div>
 
   <div class="display-none desktop:display-flex flex-align-center margin-x-1 margin-top-1">
     |
diff --git a/lib/web/views/dashboard_view.ex b/lib/web/views/dashboard_view.ex
index d733cbc13..685b53e11 100644
--- a/lib/web/views/dashboard_view.ex
+++ b/lib/web/views/dashboard_view.ex
@@ -237,7 +237,7 @@ defmodule Web.DashboardView do
             to: Routes.message_context_path(Endpoint, :index),
             target: "",
             icon: my_icon("mail"),
-            title: "Message center",
+            title: "Message Center",
             description: "View and send messages to Challenge.Gov users."
           )
         ]
@@ -266,7 +266,7 @@ defmodule Web.DashboardView do
             to: Routes.static_path(Endpoint, "/pdfs/prize_and_challenge_toolkit.pdf"),
             target: "_blank",
             icon: my_icon("construction"),
-            title: "Agency toolkit",
+            title: "Agency Toolkit",
             description: "View the Prizes and Challenges Toolkit to learn more."
           )
         ]