Merge pull request #2075 from GSA/2065-fix-skip-to-h1-tab-order

2065 fix skip to h1 tab order
GSA · Jan 22, 2025 · c0833dc · c0833dc
2 parents 5279f7f + 822307f
commit c0833dc
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 58 deletions.
diff --git a/benefit-finder/cspell-dictionary/dev.txt b/benefit-finder/cspell-dictionary/dev.txt
@@ -38,3 +38,4 @@ buildpacks
 webfonts
 hkshshslhshjksh
 kjgljjlhkhgljgjh
+GTMIs
diff --git a/benefit-finder/cypress/support/utils.js b/benefit-finder/cypress/support/utils.js
@@ -1,5 +1,4 @@
 import { pageObjects } from './pageObjects'
-import * as EN_LOCALE_DATA from '../../../benefit-finder/src/shared/locales/en/en.json'
 
 export function filterDataLayerByEvent(eventName) {
   return cy.window().then(window => {

diff --git a/...der/src/Routes/ResultsView/components/Results/__tests__/__snapshots__/index.spec.jsx.snap b/...der/src/Routes/ResultsView/components/Results/__tests__/__snapshots__/index.spec.jsx.snap
@@ -2,31 +2,6 @@
 
 exports[`Results > renders a match to the previous snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="bf-banner"
-  >
-    <div
-      class="bf-grid-container grid-container"
-    >
-      <h1
-        aria-level="1"
-        class="bf-banner-heading "
-        id="skip-to-h1"
-        role="heading"
-      >
-        Benefits you did not qualify for
-      </h1>
-      <div
-        class="bf-banner-description"
-      >
-        <div>
-          <p>
-            According to your answers you are not eligible for these benefits.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
   <div
     class="bf-grid-container grid-container"
     data-testid="bf-results-view"

diff --git a/benefit-finder/src/Routes/ResultsView/components/Results/index.jsx b/benefit-finder/src/Routes/ResultsView/components/Results/index.jsx
@@ -7,7 +7,6 @@ import {
   Button,
   EmailTrigger,
   Heading,
-  Banner,
   ShareTrigger,
   RelativeBenefitList,
 } from '@components'
@@ -35,30 +34,6 @@ const Results = ({
   const ROUTES = useContext(RouteContext)
   const navigate = useNavigate()
   // Results view components
-  const ResultsBannerBlock = ({ notEligibleView, zeroBenefitsResult, ui }) => {
-    const { eligible, notEligible, zeroBenefits } = ui
-    return (
-      <Banner
-        heading={
-          notEligibleView === false
-            ? (zeroBenefitsResult && zeroBenefits?.eligible.banner.heading) ||
-              eligible?.banner.heading
-            : (zeroBenefitsResult &&
-                zeroBenefits?.notEligible.banner.heading) ||
-              notEligible?.banner.heading
-        }
-        description={
-          notEligibleView === false
-            ? (zeroBenefitsResult &&
-                zeroBenefits?.eligible.banner.description) ||
-              eligible?.banner.description
-            : (zeroBenefitsResult &&
-                zeroBenefits?.notEligible.banner.description) ||
-              notEligible?.banner.description
-        }
-      />
-    )
-  }
 
   const ResultsHeadingBlock = ({ zeroBenefitsResult, notEligibleView, ui }) => {
     const { notEligible, eligible, summaryBox, zeroBenefits } = ui
@@ -187,11 +162,6 @@ const Results = ({
 
   return (
     <>
-      <ResultsBannerBlock
-        notEligibleView={notEligibleView}
-        zeroBenefitsResult={zeroBenefitsResult}
-        ui={ui}
-      />
       <div
         className="bf-grid-container grid-container"
         data-testid="bf-results-view"

diff --git a/benefit-finder/src/Routes/ResultsView/index.jsx b/benefit-finder/src/Routes/ResultsView/index.jsx
@@ -5,6 +5,8 @@ import { useResetElement, useScrollToAnchor } from '@hooks'
 import * as apiCalls from '@api/apiCalls'
 import PropTypes from 'prop-types'
 import { Results } from './components/index'
+import { Banner } from '@components'
+
 import { dataLayerUtils, handleSurvey, domReady, politeTitles } from '@utils'
 
 // Results View is a single view with three states, eligible, not eligible, and zero benefits
@@ -29,11 +31,11 @@ const ResultsView = ({
   const [eligibilityCount, setEligibilityCount] = useState(null)
   const [zeroBenefitsResult, setZeroBenefitsResult] = useState(null)
   const { resultsView } = dataLayerUtils.dataLayerStructure
+  const { eligible, notEligible, zeroBenefits } = ui
   const navigate = useNavigate()
   const location = useLocation()
   const ROUTES = useContext(RouteContext)
   const locale = apiCalls.GET.Language()
-  useScrollToAnchor(location)
 
   /**
    * a hook that handles our open state of the accordions in our group
@@ -43,6 +45,7 @@ const ResultsView = ({
   const [isExpandAll, setExpandAll] = useState(false)
 
   const resetElement = useResetElement()
+  useScrollToAnchor(location)
 
   // some data-test values
   // how many questions were values provided for
@@ -63,6 +66,10 @@ const ResultsView = ({
       : navigate(`/${ROUTES.indexPath}/${ROUTES.resultsPaths.notEligiblePath}`)
   }
 
+  useEffect(() => {
+    resetElement.current?.focus()
+  }, [resetElement])
+
   // handle location change
   useEffect(() => {
     !location.hash && resetElement.current?.focus()
@@ -132,6 +139,25 @@ const ResultsView = ({
       data-testid="bf-result-view"
       {...testAttributes}
     >
+      <Banner
+        heading={
+          notEligibleView === false
+            ? (zeroBenefitsResult && zeroBenefits?.eligible.banner.heading) ||
+              eligible?.banner.heading
+            : (zeroBenefitsResult &&
+                zeroBenefits?.notEligible.banner.heading) ||
+              notEligible?.banner.heading
+        }
+        description={
+          notEligibleView === false
+            ? (zeroBenefitsResult &&
+                zeroBenefits?.eligible.banner.description) ||
+              eligible?.banner.description
+            : (zeroBenefitsResult &&
+                zeroBenefits?.notEligible.banner.description) ||
+              notEligible?.banner.description
+        }
+      />
       <Results
         notEligibleView={notEligibleView}
         zeroBenefitsResult={zeroBenefitsResult}
@@ -140,7 +166,6 @@ const ResultsView = ({
         isExpandAll={isExpandAll}
         setExpandAll={setExpandAll}
         relevantBenefits={relevantBenefits}
-        resetElement={resetElement}
         data={data}
         ui={ui}
       />