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

1904 polite a11y page titles
GSA · Jan 22, 2025 · 6c5cbb7 · 6c5cbb7
2 parents 59623bb + 03556fa
commit 6c5cbb7
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 11 deletions.
diff --git a/benefit-finder/index.html b/benefit-finder/index.html
@@ -24,6 +24,9 @@
     </script>
   </head>
   <body>
+    <div id="live-region" aria-live="polite" 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/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 } from '@utils'
+import { dataLayerUtils, politeTitles } from '@utils'
 import { useResetElement } from '@hooks'
 import PropTypes from 'prop-types'
 import {
@@ -52,6 +52,7 @@ const Intro = ({ content, ui, hasQueryParams }) => {
         event: intro.event,
         bfData: { pageView: intro.bfData.pageView, viewTitle: title },
       })
+    politeTitles(title)
   }, [hasQueryParams])
 
   return (

diff --git a/benefit-finder/src/Routes/LifeEventSection/index.jsx b/benefit-finder/src/Routes/LifeEventSection/index.jsx
@@ -9,6 +9,7 @@ import {
   dataLayerUtils,
   errorHandling,
   handleSurvey,
+  politeTitles,
 } from '@utils'
 import { useHandleUnload, useResetElement } from '@hooks'
 import * as apiCalls from '@api/apiCalls'
@@ -51,6 +52,7 @@ const LifeEventSection = ({ data, handleData, ui }) => {
   const resetElement = useResetElement()
   const ROUTES = useContext(RouteContext)
   const navigate = useNavigate()
+  const locale = apiCalls.GET.Language()
 
   let location = useLocation() // ignore prefer-const
 
@@ -262,6 +264,7 @@ const LifeEventSection = ({ data, handleData, ui }) => {
         viewTitle: data[index]?.section.heading,
       },
     })
+    politeTitles(location.pathname, locale)
     resetElement.current?.focus()
     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 } from '@hooks'
 import * as apiCalls from '@api/apiCalls'
 import PropTypes from 'prop-types'
 import { Results } from './components/index'
-import { dataLayerUtils, handleSurvey, domReady } from '@utils'
+import { dataLayerUtils, handleSurvey, domReady, politeTitles } from '@utils'
 
 // Results View is a single view with three states, eligible, not eligible, and zero benefits
 
@@ -32,6 +32,7 @@ const ResultsView = ({
   const navigate = useNavigate()
   const location = useLocation()
   const ROUTES = useContext(RouteContext)
+  const locale = apiCalls.GET.Language()
 
   /**
    * a hook that handles our open state of the accordions in our group
@@ -105,6 +106,7 @@ const ResultsView = ({
           ...eligibilityCount,
         },
       })
+    politeTitles(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 } from '@utils'
+import { parseDate, dataLayerUtils, handleSurvey, politeTitles } from '@utils'
 import { useResetElement } from '@hooks'
 import * as apiCalls from '@api/apiCalls'
 import { Heading, Button } from '@components'
@@ -19,7 +19,7 @@ import './_index.scss'
 const VerifySelectionsView = ({ ui, data }) => {
   const { verifySelectionsView, buttonGroup } = ui
   const { verifySelections } = dataLayerUtils.dataLayerStructure
-  const local = apiCalls.GET.Language()
+  const locale = apiCalls.GET.Language()
   const dateFormatOptions = {
     year: 'numeric',
     month: 'long',
@@ -63,7 +63,7 @@ const VerifySelectionsView = ({ ui, data }) => {
         <div className="bf-verify-criteria-legend">{legend}</div>
         {typeof selected?.value === 'object'
           ? `${parseDate(selected.value).toLocaleDateString(
-              local,
+              locale,
               dateFormatOptions
             )}`
           : selected?.value}
@@ -118,6 +118,7 @@ const VerifySelectionsView = ({ ui, data }) => {
         viewTitle: verifySelectionsView?.heading,
       },
     })
+    politeTitles(location.pathname, locale)
   }, [])
 
   useEffect(() => {

diff --git a/benefit-finder/src/shared/utils/index.js b/benefit-finder/src/shared/utils/index.js
@@ -7,6 +7,7 @@ import dataLayerUtils from './dataLayerUtils'
 import dateInputValidation from './dateInputValidation'
 import handleSurvey from './handleSurvey'
 import parseDate from './parseDate'
+import politeTitles from './politeTitles'
 import scrollLock from './scrollLock'
 import windowSize from './windowSize'
 
@@ -20,6 +21,7 @@ export {
   dateInputValidation,
   handleSurvey,
   parseDate,
+  politeTitles,
   scrollLock,
   windowSize,
 }
diff --git a/benefit-finder/src/shared/utils/parseDate/__tests__/index.spec.jsx b/benefit-finder/src/shared/utils/parseDate/__tests__/index.spec.jsx
@@ -1,6 +1,6 @@
 import parseDate from '../index'
 
-let mockLocal
+let mockLocale
 const dateFormatOptions = {
   year: 'numeric',
   month: 'long',
@@ -18,17 +18,17 @@ const expectedEnValue = 'January 22, 2022'
 const expectedEsValue = '22 de enero de 2022'
 
 describe('test parseDate utility', () => {
-  it('returns a localized string from a date value based on local', () => {
-    mockLocal = 'en'
+  it('returns a localized string from a date value based on locale', () => {
+    mockLocale = 'en'
 
     expect(
-      parseDate(selectedValue).toLocaleDateString(mockLocal, dateFormatOptions)
+      parseDate(selectedValue).toLocaleDateString(mockLocale, dateFormatOptions)
     ).toBe(expectedEnValue)
 
-    mockLocal = 'es'
+    mockLocale = 'es'
 
     expect(
-      parseDate(selectedValue).toLocaleDateString(mockLocal, dateFormatOptions)
+      parseDate(selectedValue).toLocaleDateString(mockLocale, dateFormatOptions)
     ).toBe(expectedEsValue)
   })
 })
diff --git a/benefit-finder/src/shared/utils/politeTitles/index.js b/benefit-finder/src/shared/utils/politeTitles/index.js
@@ -0,0 +1,32 @@
+const politeTitles = (location, locale) => {
+  // create a hidden liveRegion to announce titles to screen-readers
+  const liveRegion = document.getElementById('live-region')
+
+  // get the last part of the location Path
+  // remove the hyphen
+  const pathValue = location.split('/').pop()
+  const title = pathValue.replace('-', ' ')
+
+  // create language specific titles
+  const enTitle = `Entering Benefit Finder: ${title.toLowerCase()} | USAGov`
+  const esTitle = `Buscador de beneficios: ${title.toLowerCase()} | USAGov`
+  const defaultTitle = `${title} | USAGov`
+
+  // assign title based on locale
+  const politeTitle = !locale
+    ? defaultTitle
+    : locale === 'es'
+      ? esTitle
+      : enTitle
+
+  // update the live region
+  if (liveRegion) {
+    liveRegion.textContent = politeTitle
+  }
+  // update the page title
+  document.title = politeTitle
+
+  return
+}
+
+export default politeTitles
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,6 +79,7 @@
 {% 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">