PXBF-1904-polite-a11y-page-titles: update to a11y titles, as we are u…

…sing assertive region
GSA · Jan 22, 2025 · de0d014 · de0d014
1 parent 5279f7f
commit de0d014
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 14 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</title>
+    <title>REACT APP | Benefit finder: death of a loved one | 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,7 +24,12 @@
     </script>
   </head>
   <body>
-    <div id="live-region" aria-live="polite" class="usa-sr-only" tabindex="-1">
+    <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>

diff --git a/benefit-finder/src/Routes/Intro/index.jsx b/benefit-finder/src/Routes/Intro/index.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useContext } from 'react'
 import { useNavigate, useLocation } from 'react-router'
 import { RouteContext } from '@/App'
-import { dataLayerUtils, politeTitles } from '@utils'
+import { dataLayerUtils, a11yTitles } from '@utils'
 import { useScrollToAnchor } from '@hooks'
 import PropTypes from 'prop-types'
 import {
@@ -51,7 +51,7 @@ const Intro = ({ content, ui, hasQueryParams }) => {
         event: intro.event,
         bfData: { pageView: intro.bfData.pageView, viewTitle: title },
       })
-    politeTitles(title)
+    a11yTitles(title)
   }, [hasQueryParams])
 
   return (

diff --git a/benefit-finder/src/Routes/LifeEventSection/index.jsx b/benefit-finder/src/Routes/LifeEventSection/index.jsx
@@ -9,7 +9,7 @@ import {
   dataLayerUtils,
   errorHandling,
   handleSurvey,
-  politeTitles,
+  a11yTitles,
 } from '@utils'
 import { useHandleUnload, useResetElement, useScrollToAnchor } from '@hooks'
 import * as apiCalls from '@api/apiCalls'
@@ -266,7 +266,7 @@ const LifeEventSection = ({ data, handleData, ui }) => {
         viewTitle: data[index]?.section.heading,
       },
     })
-    politeTitles(location.pathname, locale)
+    a11yTitles(location.pathname, locale)
     !location.hash && resetElement.current?.focus()
     !location.hash && window.scrollTo(0, 0)
   }, [location])

diff --git a/benefit-finder/src/Routes/ResultsView/index.jsx b/benefit-finder/src/Routes/ResultsView/index.jsx
@@ -5,7 +5,7 @@ import { useResetElement, useScrollToAnchor } from '@hooks'
 import * as apiCalls from '@api/apiCalls'
 import PropTypes from 'prop-types'
 import { Results } from './components/index'
-import { dataLayerUtils, handleSurvey, domReady, politeTitles } from '@utils'
+import { dataLayerUtils, handleSurvey, domReady, a11yTitles } from '@utils'
 
 // Results View is a single view with three states, eligible, not eligible, and zero benefits
 
@@ -67,6 +67,7 @@ const ResultsView = ({
   useEffect(() => {
     !location.hash && resetElement.current?.focus()
     !location.hash && window.scrollTo(0, 0)
+    a11yTitles(location.pathname, locale)
     setExpandAll(false)
   }, [location])
 
@@ -103,7 +104,7 @@ const ResultsView = ({
           ...eligibilityCount,
         },
       })
-    politeTitles(location.pathname, locale)
+    a11yTitles(location.pathname, locale)
   }, [notEligibleView, eligibilityCount])
 
   useEffect(() => {

diff --git a/benefit-finder/src/Routes/VerifySelectionsView/index.jsx b/benefit-finder/src/Routes/VerifySelectionsView/index.jsx
@@ -2,7 +2,7 @@ import { useEffect, useContext } from 'react'
 import { useNavigate, useLocation } from 'react-router'
 import PropTypes from 'prop-types'
 import { RouteContext } from '@/App'
-import { parseDate, dataLayerUtils, handleSurvey, politeTitles } from '@utils'
+import { parseDate, dataLayerUtils, handleSurvey, a11yTitles } from '@utils'
 import { useResetElement, useScrollToAnchor } from '@hooks'
 import * as apiCalls from '@api/apiCalls'
 import { Heading, Button } from '@components'
@@ -108,6 +108,7 @@ const VerifySelectionsView = ({ ui, data }) => {
   useEffect(() => {
     !location.hash && resetElement.current?.focus()
     !location.hash && window.scrollTo(0, 0)
+    a11yTitles(location.pathname, locale)
   }, [location])
 
   // handle dataLayer
@@ -119,7 +120,7 @@ const VerifySelectionsView = ({ ui, data }) => {
         viewTitle: verifySelectionsView?.heading,
       },
     })
-    politeTitles(location.pathname, locale)
+    a11yTitles(location.pathname, locale)
   }, [])
 
   useEffect(() => {

diff --git a/...er/src/shared/utils/politeTitles/index.js → ...nder/src/shared/utils/a11yTitles/index.js b/...er/src/shared/utils/politeTitles/index.js → ...nder/src/shared/utils/a11yTitles/index.js
@@ -1,4 +1,4 @@
-const politeTitles = (location, locale) => {
+const a11yTitles = (location, locale) => {
   // create a hidden liveRegion to announce titles to screen-readers
   const liveRegion = document.getElementById('live-region')
 
@@ -29,4 +29,4 @@ const politeTitles = (location, locale) => {
   return
 }
 
-export default politeTitles
+export default a11yTitles
diff --git a/benefit-finder/src/shared/utils/index.js b/benefit-finder/src/shared/utils/index.js
@@ -7,7 +7,7 @@ import dataLayerUtils from './dataLayerUtils'
 import dateInputValidation from './dateInputValidation'
 import handleSurvey from './handleSurvey'
 import parseDate from './parseDate'
-import politeTitles from './politeTitles'
+import a11yTitles from './a11yTitles'
 import scrollLock from './scrollLock'
 import windowSize from './windowSize'
 
@@ -21,7 +21,7 @@ export {
   dateInputValidation,
   handleSurvey,
   parseDate,
-  politeTitles,
+  a11yTitles,
   scrollLock,
   windowSize,
 }