From df48e62dbc484d26775eef9d64e13e6ffb412d59 Mon Sep 17 00:00:00 2001 From: Taras Kurilo Date: Fri, 3 Jan 2025 11:36:45 -0500 Subject: [PATCH] edm-510 accessibility and content update (#33868) --- .../components/profile/InstitutionProfile.jsx | 37 +++++++++---------- .../profile/YellowRibbonSelector.jsx | 36 +++++++++++++----- src/applications/gi/sass/gi.scss | 24 +++++++----- 3 files changed, 59 insertions(+), 38 deletions(-) diff --git a/src/applications/gi/components/profile/InstitutionProfile.jsx b/src/applications/gi/components/profile/InstitutionProfile.jsx index 2db71cbb4666..41ea6a993af2 100644 --- 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" >

- 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.

  • - Degree level: Type of degree such as Undergraduate, Graduate, - Masters, or Doctorate. + Degree level: type of degree such as + Undergraduate, Graduate, Masters, or Doctorate.
  • - College or professional school: A school within a college or - university that has a specialized professional or academic - focus. + College or professional school: a school + within a college or university that has a specialized + professional or academic focus.
  • - Funding available: Total number of students eligible to - receive funding. + Funding available: total number of students + eligible to receive funding.
  • - School contribution: Maximum amount the IHL will contribute - per student each academic year toward unmet tuition and fee - costs. + School contribution: maximum amount the IHL + will contribute per student each academic year toward unmet + tuition and fee costs.
    • diff --git a/src/applications/gi/components/profile/YellowRibbonSelector.jsx b/src/applications/gi/components/profile/YellowRibbonSelector.jsx index e342e3d16e08..083a85e8bac6 100644 --- 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 (

    {`Showing ${startIndex}-${endIndex} of ${ @@ -174,7 +185,7 @@ const YellowRibbonSelector = ({ programs }) => {

    { ))} - {
    {filteredPrograms.length > 0 && activeOption && renderResultsSummary()} -
    + {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */} +
      {currentPrograms.map((program, index) => ( - + > + + ))} -
    + {currentPrograms.length > 0 && (