From 83a36cb80b4c4f5e53929ebde5a9fc00d7d9a0eb Mon Sep 17 00:00:00 2001
From: "Jeferson S. Brito" <30840709+jeferson-sb@users.noreply.github.com>
Date: Tue, 27 Jul 2021 10:14:45 -0300
Subject: [PATCH] Add aria-live announcement to notify users of the route
 change (#14284)

* Add aria-live to search results

* Add aria-live inside page-content-inner

* Update title variable and aria-live attribute

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
---
 app/assets/javascripts/base.js.erb     | 1 +
 app/views/layouts/application.html.erb | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/assets/javascripts/base.js.erb b/app/assets/javascripts/base.js.erb
index 4c1261695..8688a5814 100644
--- a/app/assets/javascripts/base.js.erb
+++ b/app/assets/javascripts/base.js.erb
@@ -132,6 +132,7 @@ var instantClick
           skipLink.focus();
         }
       }
+      document.getElementById('page-route-change').textContent = title;
       history.pushState(null, null, newUrl.replace("?samepage=true","").replace("&samepage=true",""))
 
       var hashIndex = newUrl.indexOf('#'),
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index cb5776004..60e233163 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -92,6 +92,7 @@
     </div>
   <% end %>
   <div id="page-content-inner">
+    <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div>
     <% if @hero_html %>
       <div id="hero-html-wrapper" class="overflow-x-hidden" data-name="<%= @hero_area.name %>">
         <script>