edm-510 accessibility and content update (#33868)

department-of-veterans-affairs · Jan 3, 2025 · df48e62 · df48e62
1 parent 08529d8
commit df48e62
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 38 deletions.
diff --git a/src/applications/gi/components/profile/InstitutionProfile.jsx b/src/applications/gi/components/profile/InstitutionProfile.jsx
@@ -206,16 +206,15 @@ export default function InstitutionProfile({
             id="yellow-ribbon-program-information"
           >
             <p>
-              The Yellow Ribbon program can be paid towards net tuition and fee
-              costs not covered by the Post-9/11 GI Bill at participating
-              institutions of higher learning (IHL). Schools that choose to
-              participate in the Yellow Ribbon program will contribute up to a
-              certain dollar amount toward the extra tuition. VA will match the
-              participating school’s contribution
+              The Yellow Ribbon program pays towards net tuition and fee costs
+              not covered by the Post-9/11 GI Bill at participating institutions
+              of higher learning (IHL). Schools that choose to participate in
+              the Yellow Ribbon program will contribute up to a certain dollar
+              amount toward the extra tuition. VA will match the participating
+              school’s contribution{' '}
               {type === 'FOREIGN' && `${` `}in United States Dollars (USD)`}, up
-              to the total cost of the tuition and fees. Please contact the
-              individual school to validate the number of students remaining to
-              receive funding.
+              to the total cost of the tuition and fees. To confirm the number
+              of students eligible for funding, contact the individual school.
             </p>
             <va-link
               href="/education/about-gi-bill-benefits/post-9-11/yellow-ribbon-program/"
@@ -232,22 +231,22 @@ export default function InstitutionProfile({
 
               <ul className="getting-started-with-benefits-li">
                 <li>
-                  Degree level: Type of degree such as Undergraduate, Graduate,
-                  Masters, or Doctorate.
+                  <strong>Degree level:</strong> type of degree such as
+                  Undergraduate, Graduate, Masters, or Doctorate.
                 </li>
                 <li>
-                  College or professional school: A school within a college or
-                  university that has a specialized professional or academic
-                  focus.
+                  <strong>College or professional school:</strong> a school
+                  within a college or university that has a specialized
+                  professional or academic focus.
                 </li>
                 <li>
-                  Funding available: Total number of students eligible to
-                  receive funding.
+                  <strong>Funding available:</strong> total number of students
+                  eligible to receive funding.
                 </li>
                 <li>
-                  School contribution: Maximum amount the IHL will contribute
-                  per student each academic year toward unmet tuition and fee
-                  costs.
+                  <strong> School contribution: </strong> maximum amount the IHL
+                  will contribute per student each academic year toward unmet
+                  tuition and fee costs.
                 </li>
               </ul>
             </div>

diff --git a/src/applications/gi/components/profile/YellowRibbonSelector.jsx b/src/applications/gi/components/profile/YellowRibbonSelector.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   VaSelect,
@@ -62,7 +62,7 @@ const YellowRibbonSelector = ({ programs }) => {
   }));
 
   console.table(mappedPrograms); // eslint-disable-line no-console
-
+  const resultsSummaryRef = useRef(null);
   const [selectedOption, setSelectedOption] = useState('');
   const [activeOption, setActiveOption] = useState('');
   const [filteredPrograms, setFilteredPrograms] = useState([]);
@@ -118,10 +118,20 @@ const YellowRibbonSelector = ({ programs }) => {
   const handleDisplayResults = () => {
     setActiveOption(selectedOption);
     filterPrograms(selectedOption);
+    setTimeout(() => {
+      if (resultsSummaryRef.current) {
+        resultsSummaryRef.current.focus();
+      }
+    }, 0);
   };
 
   const handlePageChange = page => {
     setCurrentPage(page);
+    setTimeout(() => {
+      if (resultsSummaryRef.current) {
+        resultsSummaryRef.current.focus();
+      }
+    }, 0);
   };
 
   const totalPages = Math.ceil(filteredPrograms.length / itemsPerPage);
@@ -152,10 +162,11 @@ const YellowRibbonSelector = ({ programs }) => {
     } else {
       activeOptionLabel = `"${activeOption}" degree level`;
     }
-
     return (
       <p
         id="results-summary"
+        ref={resultsSummaryRef}
+        tabIndex="-1"
         className="vads-u-margin-top--3 vads-u-margin-bottom--3"
       >
         {`Showing ${startIndex}-${endIndex} of ${
@@ -174,7 +185,7 @@ const YellowRibbonSelector = ({ programs }) => {
           </p>
           <div className="selector-wrapper vads-u-display--flex vads-u-align-items--flex-end ">
             <VaSelect
-              className="degree-selector "
+              className="degree-selector"
               id="degree"
               name="degree"
               label="Degree level"
@@ -188,7 +199,6 @@ const YellowRibbonSelector = ({ programs }) => {
                 </option>
               ))}
             </VaSelect>
-
             <VaButton
               onClick={handleDisplayResults}
               secondary
@@ -201,14 +211,20 @@ const YellowRibbonSelector = ({ programs }) => {
 
       <div className="vads-u-margin-bottom--0">
         {filteredPrograms.length > 0 && activeOption && renderResultsSummary()}
-        <div className="degree-level-results vads-u-margin-bottom--1 vads-u-display--flex vads-u-flex-direction--column vads-u-align-items--stretch mobile-lg:vads-u-flex-direction--row">
+        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+        <ul
+          role="list"
+          className="degree-level-results vads-u-margin-bottom--1"
+        >
           {currentPrograms.map((program, index) => (
-            <ProgramCard
+            <li
+              className="degree-item"
               key={`${program.divisionProfessionalSchool}-${index}`}
-              program={program}
-            />
+            >
+              <ProgramCard program={program} />
+            </li>
           ))}
-        </div>
+        </ul>
         {currentPrograms.length > 0 && (
           <VaPagination
             page={currentPage}

diff --git a/src/applications/gi/sass/gi.scss b/src/applications/gi/sass/gi.scss
@@ -395,21 +395,27 @@
   }
   .degree-level-results {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: row;
     gap: 20px;
-    .degree-level-card {
-      flex: 1 1 calc(33.33% - 30px);
-      max-width: calc(33.33% - 10px);
-      box-sizing: border-box;
+    list-style: none;
+    padding: 0;
+    .degree-item {
       margin: 0;
+      height: auto;
+      display: flex;
+      width: 100%;
+      .degree-level-card {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        margin: 0;
+      }
     }
   }
   @media screen and (max-width: $medium-screen) {
     .degree-level-results {
-      .degree-level-card {
-        flex: 1 1 100%;
-        max-width: 100%;
-      }
+      flex-direction: column;
     }
   }
 }