Fix A11y issue with screen readers

GSA · Nov 7, 2024 · eb8bdaf · eb8bdaf
1 parent 9fc949c
commit eb8bdaf
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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."
           )
         ]