Merge pull request #2077 from GSA/1904-polite-a11y-page-titles

1904 polite a11y page titles
GSA · Jan 23, 2025 · 0e4c869 · 0e4c869
2 parents 97e5c72 + d7be5f6
commit 0e4c869
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 17 deletions.
diff --git a/benefit-finder/index.html b/benefit-finder/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <title>REACT APP | Benefit finder: death of a loved one | USAGov</title>
+    <title>REACT APP | Benefit finder | USAGov</title>
     <style>
       @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@200;400;600;700;800&family=Tilt+Warp&display=swap');
     </style>
@@ -24,14 +24,6 @@
     </script>
   </head>
   <body>
-    <div
-      id="live-region"
-      aria-live="assertive"
-      class="usa-sr-only"
-      tabindex="-1"
-    >
-      Benefit finder: death of a loved one | USAGov
-    </div>
     <script type="module" src="./src/index.jsx"></script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <main>

diff --git a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap
@@ -15,6 +15,12 @@ exports[`loads intro 1`] = `
       data-version="0.9.0.beta.1"
       id="death"
     >
+      <div
+        aria-live="assertive"
+        class="usa-sr-only"
+        id="a11y-titles"
+        tabindex="-1"
+      />
       <div
         class="bf-intro"
       >

diff --git a/benefit-finder/src/App/index.jsx b/benefit-finder/src/App/index.jsx
@@ -114,6 +114,12 @@ function App({ testAppContent, testQuery }) {
             data-testid="app"
             data-version={version}
           >
+            <div
+              id="a11y-titles"
+              aria-live="assertive"
+              className="usa-sr-only"
+              tabIndex="-1"
+            ></div>
             <BrowserRouter basename={`/${ROUTES.basePath}`}>
               <Routes>
                 <Route

diff --git a/benefit-finder/src/Routes/ResultsView/index.jsx b/benefit-finder/src/Routes/ResultsView/index.jsx
@@ -7,7 +7,6 @@ import PropTypes from 'prop-types'
 import { Results } from './components/index'
 import { dataLayerUtils, handleSurvey, domReady, a11yTitles } from '@utils'
 import { Banner } from '@components'
-
 // Results View is a single view with three states, eligible, not eligible, and zero benefits
 
 /**

diff --git a/benefit-finder/src/shared/utils/a11yTitles/index.js b/benefit-finder/src/shared/utils/a11yTitles/index.js
@@ -1,6 +1,6 @@
 const a11yTitles = (location, locale) => {
   // create a hidden liveRegion to announce titles to screen-readers
-  const liveRegion = document.getElementById('live-region')
+  const liveRegion = document.getElementById('a11y-titles')
 
   // get the last part of the location Path
   // remove the hyphen
@@ -13,18 +13,22 @@ const a11yTitles = (location, locale) => {
   const defaultTitle = `${title} | USAGov`
 
   // assign title based on locale
-  const politeTitle = !locale
+  const assertiveTitle = !locale
     ? defaultTitle
     : locale === 'es'
       ? esTitle
       : enTitle
 
   // update the live region
-  if (liveRegion) {
-    liveRegion.textContent = politeTitle
-  }
+  // delay the update to a11y-dom sees the change
+  setTimeout(function () {
+    if (liveRegion) {
+      liveRegion.textContent = assertiveTitle
+    }
+  }, 200)
+
   // update the page title
-  document.title = politeTitle
+  document.title = assertiveTitle
 
   return
 }

diff --git a/...finder_app/usagov_benefit_finder_page/templates/page--benefit-finder-life-event.html.twig b/...finder_app/usagov_benefit_finder_page/templates/page--benefit-finder-life-event.html.twig
@@ -79,7 +79,6 @@
 {% endif %}
 
 <div class="usa-overlay"></div>
-<div id="live-region" aria-live="assertive" class="usa-sr-only" tabindex="-1">{{ node.label }}</div>
 
 <header class="{{ header_classes }}" id="header">