First round of accessibility fixes (#168)

* first round of accessibility fixes * fixup tests * add cypress a11y tests to all pages --------- Co-authored-by: Dan Miller <[email protected]>
coforma · Mar 19, 2024 · e522a25 · e522a25
1 parent 81dd036
commit e522a25
Show file tree

Hide file tree

Showing 15 changed files with 100 additions and 79 deletions.
diff --git a/src/app/[id]/apply/confirmation/page.tsx b/src/app/[id]/apply/confirmation/page.tsx
@@ -31,10 +31,10 @@ export default function ConfirmationPage({ params }: Props) {
   ) : (
     <>
       <div className="application_header">
+        <h1 className="application_header-title">{selectedCollege.name}</h1>
         <p className="application_header-subtitle">
           NEW APPLICATION (2024-2025)
         </p>
-        <h1 className="application_header-title">{selectedCollege.name}</h1>
       </div>
       <div className="application_confirmation">
         <div className="application_confirmation-container">

diff --git a/src/app/components/cards/BannerCard.tsx b/src/app/components/cards/BannerCard.tsx
@@ -66,6 +66,7 @@ export const BannerCard = ({ college }: Props) => {
               className="usa-button card_banner-apply-button"
               href={`${college.id}/apply`}
               onClick={() => mixpanel.track("click_launch-application")}
+              aria-label={`Apply to ${college.name}`}
             >
               Apply
             </Link>

diff --git a/src/app/components/cards/CollegeCard.tsx b/src/app/components/cards/CollegeCard.tsx
@@ -32,7 +32,7 @@ export const CollegeCard = ({ college }: Props) => {
         />
       </CardMedia>
       <CardHeader className="card_header">
-        <h2 className="card_header-title">{college.name}</h2>
+        <p className="card_header-title">{college.name}</p>
         <p className="card_header-subtitle">{`${college.city}, ${college.state}`}</p>
       </CardHeader>
       <CardBody className="card_body">
@@ -65,13 +65,15 @@ export const CollegeCard = ({ college }: Props) => {
           className="usa-button card_footer-apply-button"
           href={`/${college.id}/apply`}
           onClick={() => mixpanel.track("click_launch-application")}
+          aria-label={`Apply to ${college.name}`}
         >
           Apply
         </Link>
         <Link
           className="usa-button usa-button--outline card_footer-view-more-button"
           href={`/${college.id}`}
           onClick={() => mixpanel.track("click_view-details")}
+          aria-label={`View more info about ${college.name}`}
         >
           View more
         </Link>

diff --git a/src/app/components/cards/DetailsCards.tsx b/src/app/components/cards/DetailsCards.tsx
@@ -24,10 +24,10 @@ export const DetailsCards = ({ college }: Props) => {
 const OutcomesCard = ({ college }: Props) => {
   return (
     <Card layout="standardDefault" headerFirst={true} className="card_details">
-      <p className="card_details_header-title">Outcomes</p>
+      <h2 className="card_details_header-title">Outcomes</h2>
       <CardBody>
         <div>
-          <p className="card_details_section-header">Graduation rate</p>
+          <h3 className="card_details_section-header">Graduation rate</h3>
           <p className="card_details_section-text">
             The percent of students who finished their degree at this school
             within [4 or 8, conditionally] years. This is calculated for full
@@ -39,7 +39,7 @@ const OutcomesCard = ({ college }: Props) => {
           </p>
         </div>
         <div className="card_details_section">
-          <p className="card_details_section-header">Retention rate</p>
+          <h3 className="card_details_section-header">Retention rate</h3>
           <p className="card_details_section-text">
             Retention is the percent of first-time students who return to the
             same school the following year. This is calculated for full-time
@@ -51,7 +51,7 @@ const OutcomesCard = ({ college }: Props) => {
           </p>
         </div>
         <div className="card_details_section">
-          <p className="card_details_section-header">Earning potential</p>
+          <h3 className="card_details_section-header">Earning potential</h3>
           <div className="card_details_section-data">
             <div>
               <p className="card_details_section-data-title">
@@ -79,10 +79,10 @@ const OutcomesCard = ({ college }: Props) => {
 const AdmissionsCard = ({ college }: Props) => {
   return (
     <Card layout="standardDefault" headerFirst={true} className="card_details">
-      <p className="card_details_header-title">Admissions</p>
+      <h2 className="card_details_header-title">Admissions</h2>
       <CardBody>
         <div>
-          <p className="card_details_section-header">Admissions rate</p>
+          <h3 className="card_details_section-header">Admissions rate</h3>
           <p className="card_details_section-text">
             The percentage of applicants who are accepted for admission.
           </p>
@@ -92,7 +92,7 @@ const AdmissionsCard = ({ college }: Props) => {
           </p>
         </div>
         <div className="card_details_section">
-          <p className="card_details_section-header">SAT scores</p>
+          <h3 className="card_details_section-header">SAT scores</h3>
           <p className="card_details_section-data-title">
             Average combined score
           </p>
@@ -108,19 +108,19 @@ const AdmissionsCard = ({ college }: Props) => {
 const StudentBodyCard = ({ college }: Props) => {
   return (
     <Card layout="standardDefault" headerFirst={true} className="card_details">
-      <p className="card_details_header-title">Student body</p>
+      <h2 className="card_details_header-title">Student body</h2>
       <CardBody>
         <div className="card_details_section">
-          <p className="card_details_section-header">Population</p>
+          <h3 className="card_details_section-header">Population</h3>
           <p className="card_details_section-data-title">Enrolled students</p>
           <p className="card_details_section-data-highlight">
             {maskThousands(college.population)}
           </p>
         </div>
         <div className="card_details_section">
-          <p className="card_details_section-header">
+          <h3 className="card_details_section-header">
             Racial and ethnic diversity
-          </p>
+          </h3>
           <div className="card_details_section-data">
             <div>
               <p className="card_details_section-data-title">
@@ -224,10 +224,10 @@ const parseSpecialties = (specialties: Specialties) => {
 const AcademicsCard = ({ college }: Props) => {
   return (
     <Card layout="standardDefault" headerFirst={true} className="card_details">
-      <p className="card_details_header-title">Academics</p>
+      <h2 className="card_details_header-title">Academics</h2>
       <CardBody>
         <div>
-          <p className="card_details_section-header">Degrees</p>
+          <h3 className="card_details_section-header">Degrees</h3>
           <div className="card_details_section-data">
             <div>
               <p className="card_details_section-data-title">
@@ -248,15 +248,15 @@ const AcademicsCard = ({ college }: Props) => {
           </div>
         </div>
         <div className="card_details_section">
-          <p className="card_details_section-header">Student/Faculty ratio</p>
+          <h3 className="card_details_section-header">Student/Faculty ratio</h3>
           <p className="card_details_section-data-title">Ratio</p>
           <p className="card_details_section-data-highlight">
             {college?.studentFacultyRatio}
           </p>
         </div>
         {college?.specialties && (
           <div className="card_details_section">
-            <p className="card_details_section-header">Majors</p>
+            <h3 className="card_details_section-header">Majors</h3>
             <div>{parseSpecialties(college?.specialties)}</div>
           </div>
         )}
@@ -288,10 +288,10 @@ const CostsCard = ({ college }: Props) => {
   const over110 = maskCurrency(netPriceForType?.averagePriceUnder110kPlus);
   return (
     <Card layout="standardDefault" headerFirst={true} className="card_details">
-      <p className="card_details_header-title">Costs</p>
+      <h2 className="card_details_header-title">Costs</h2>
       <CardBody>
         <div>
-          <p className="card_details_section-header">Net price</p>
+          <h3 className="card_details_section-header">Net price</h3>
           <p className="card_details_section-text">
             The net price is a school’s tuition and fees minus grants and
             scholarships. The net price you pay for a particular college is
@@ -308,9 +308,9 @@ const CostsCard = ({ college }: Props) => {
         </div>
         {netPriceForType && (
           <div className="card_details_section">
-            <p className="card_details_section-header">
+            <h3 className="card_details_section-header">
               Average net price by household income
-            </p>
+            </h3>
             <p className="card_details_section-text">
               Families are eligible for different amounts of financial aid from
               federal and state governments based on their income levels. After
@@ -364,7 +364,7 @@ const CostsCard = ({ college }: Props) => {
         )}
 
         <div className="card_details_section">
-          <p className="card_details_section-header">Tuition and fees</p>
+          <h3 className="card_details_section-header">Tuition and fees</h3>
           <p className="card_details_section-text">
             Tuition is the price you pay for classes, and is listed here for
             full-time students. You would likely need to pay some fees to attend
@@ -387,7 +387,7 @@ const CostsCard = ({ college }: Props) => {
           </div>
         </div>
         <div className="card_details_section">
-          <p className="card_details_section-header">Loans</p>
+          <h3 className="card_details_section-header">Loans</h3>
           <p className="card_details_section-text">
             A federal loan is a type of financial aid provided by the government
             to help students and their families pay for higher education
@@ -403,7 +403,7 @@ const CostsCard = ({ college }: Props) => {
           </p>
         </div>
         <div className="card_details_section">
-          <p className="card_details_section-header">Net price calculator</p>
+          <h3 className="card_details_section-header">Net price calculator</h3>
           <p className="card_details_section-text">
             Every college has a different formula for financial aid. Net price
             calculators are free to use, and can help you get a sense of what

diff --git a/src/app/components/form/ApplicationForm.tsx b/src/app/components/form/ApplicationForm.tsx
@@ -60,15 +60,15 @@ export const ApplicationForm = ({ institutionId }: Props) => {
   const ApplicationView = !application ? (
     <NotFound />
   ) : (
-    <main className="application">
+    <div className="application">
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="application_header">
-          <p className="application_header-subtitle">
-            NEW APPLICATION (2024-2025)
-          </p>
           <h1 className="application_header-title">
             {application?.institutionName}
           </h1>
+          <p className="application_header-subtitle">
+            NEW APPLICATION (2024-2025)
+          </p>
         </div>
         <GridContainer className="application_questions">
           <ul className="usa-card-group">
@@ -81,28 +81,28 @@ export const ApplicationForm = ({ institutionId }: Props) => {
                   <div className="application_questions-grid">
                     <TextField
                       id={"given-name"}
-                      label={"First name"}
+                      label={"First name (required)"}
                       name={"first-name"}
                       required
                       registerField={register}
                     />
                     <TextField
                       id={"family-name"}
-                      label={"Last name"}
+                      label={"Last name (required)"}
                       name={"last-name"}
                       required
                       registerField={register}
                     />
                     <TextField
                       id={"email-address"}
-                      label={"Email"}
+                      label={"Email (required)"}
                       name={"email"}
                       required
                       registerField={register}
                     />
                     <TextField
                       id={"phone-number"}
-                      label={"Phone number"}
+                      label={"Phone number (required)"}
                       name={"phone"}
                       required
                       registerField={register}
@@ -121,23 +121,23 @@ export const ApplicationForm = ({ institutionId }: Props) => {
                   <div className="application_questions-grid">
                     <TextField
                       id={"math-sat"}
-                      label={"Math"}
+                      label={"Math (required)"}
                       name={"math-score"}
                       required={hasSATQ}
                       registerField={register}
                     />
 
                     <TextField
                       id={"crit-reading-sat"}
-                      label={"Critical reading"}
+                      label={"Critical reading (required)"}
                       name={"reading-score"}
                       required={hasSATQ}
                       registerField={register}
                     />
 
                     <TextField
                       id={"writing-sat"}
-                      label={"Writing"}
+                      label={"Writing (required)"}
                       name={"writing-score"}
                       required={hasSATQ}
                       registerField={register}
@@ -150,15 +150,22 @@ export const ApplicationForm = ({ institutionId }: Props) => {
             <Card className="application_card">
               <CardBody className="application_card">
                 <fieldset className="usa-fieldset">
-                  <legend className="usa-legend usa-legend--large">
-                    Essay Question 1 <span className="required">*</span>
-                  </legend>
                   <p className="application_questions-essay-guidance">
-                    Answer the following essay question. We encourage you to
-                    write the essays in separate word processing program, check
-                    them for grammar and spelling, and then copy/paste into the
-                    boxes here.
+                    Answer the following essay questions. We encourage you to
+                    write the essays in a separate word processing program,
+                    check them for grammar and spelling, and then copy/paste
+                    into the boxes here.
                   </p>
+                </fieldset>
+              </CardBody>
+            </Card>
+            <Card className="application_card">
+              <CardBody className="application_card">
+                <fieldset className="usa-fieldset">
+                  <legend className="usa-legend usa-legend--large">
+                    Essay Question 1{" "}
+                    <span className="required">(required)*</span>
+                  </legend>
                   <p className="application_questions-essay-q">Question</p>
                   <TextArea
                     id={"essay-question-1"}
@@ -174,14 +181,9 @@ export const ApplicationForm = ({ institutionId }: Props) => {
               <CardBody>
                 <fieldset className="usa-fieldset">
                   <legend className="usa-legend usa-legend--large">
-                    Essay Question 2 <span className="required">*</span>
+                    Essay Question 2{" "}
+                    <span className="required">(required)*</span>
                   </legend>
-                  <p className="application_questions-essay-guidance">
-                    Answer the following essay question. We encourage you to
-                    write the essays in separate word processing program, check
-                    them for grammar and spelling, and then copy/paste into the
-                    boxes here.
-                  </p>
                   <p className="application_questions-essay-q">Question</p>
                   <TextArea
                     id={"essay-question-2"}
@@ -198,14 +200,9 @@ export const ApplicationForm = ({ institutionId }: Props) => {
               <CardBody>
                 <fieldset className="usa-fieldset">
                   <legend className="usa-legend usa-legend--large">
-                    Essay Question 3 <span className="required">*</span>
+                    Essay Question 3{" "}
+                    <span className="required">(required)*</span>
                   </legend>
-                  <p className="application_questions-essay-guidance">
-                    Answer the following essay question. We encourage you to
-                    write the essays in separate word processing program, check
-                    them for grammar and spelling, and then copy/paste into the
-                    boxes here.
-                  </p>
                   <p className="application_questions-essay-q">Question</p>
                   <TextArea
                     id={"essay-question-3"}
@@ -228,7 +225,7 @@ export const ApplicationForm = ({ institutionId }: Props) => {
           </ButtonGroup>
         </div>
       </form>
-    </main>
+    </div>
   );
 
   return <main>{loading ? <Spinner /> : ApplicationView}</main>;

diff --git a/src/app/components/layout/Browse.tsx b/src/app/components/layout/Browse.tsx
@@ -38,7 +38,7 @@ export const Browse = () => {
         <div className="browse_header">
           <h2 className="browse_header-title">Browse colleges</h2>
           <p className="site_text-intro browse_header-subtitle">
-            Find the college thats right for you
+            Find the college that’s right for you
           </p>
           <Button type="button" outline={true} onClick={launchModal}>
             Add filters

diff --git a/src/app/components/layout/PageHeader.tsx b/src/app/components/layout/PageHeader.tsx
@@ -7,11 +7,7 @@ export const PageHeader = () => {
     <>
       <GovBanner />
       <Header basic={true} className="header">
-        <div
-          id="main-header-nav"
-          aria-label="main-header-nav"
-          role="navigation"
-        >
+        <div id="main-header-nav" aria-label="Main" role="navigation">
           <GridContainer>
             <Link href="/" className="header_logo">
               <div className="header_logo-title">

diff --git a/src/app/components/utilities/Spinner.tsx b/src/app/components/utilities/Spinner.tsx
@@ -7,6 +7,7 @@ export const Spinner = () => {
         role="progressbar"
         aria-valuetext="loading"
       ></div>
+      <div className="spinner-text">Loading content</div>
     </div>
   );
 };