From 99f7b2c9dffd1379c9b0770eeacd558f1908167f Mon Sep 17 00:00:00 2001
From: Bruce Lai <bruceplai@yahoo.com>
Date: Wed, 16 Feb 2022 20:32:07 -0800
Subject: [PATCH] Set hierarchical header levels (#1101)

* Set aria-level values in multiple pages

* Some code formatting
---
 src/components/ContributorThumbnail.js        |  3 +-
 src/components/FAQCard/accordionSection.js    |  4 +-
 src/components/FAQCard/index.js               |  2 +-
 src/components/PictureCard.js                 | 61 +++++++++++++++----
 src/components/TitleSection.js                |  2 +-
 src/pages/Collaborate/LeftTextRightImage.js   |  7 ++-
 src/pages/Collaborate/RightTextLeftImage.js   |  7 ++-
 .../Contributors/UnaffiliatedOrganizations.js |  2 +-
 src/pages/Donate/index.js                     | 17 +++++-
 src/pages/Home/index.js                       |  2 +-
 .../Home/sections/TrendingTopicsSection.js    |  4 +-
 src/pages/Share/MediaInfo.js                  |  6 +-
 src/pages/Share/index.js                      | 21 ++++++-
 src/pages/TagGenerator/StepComponent.js       |  4 +-
 src/pages/TagGenerator/TopicTagSection.js     |  2 +-
 15 files changed, 113 insertions(+), 31 deletions(-)

diff --git a/src/components/ContributorThumbnail.js b/src/components/ContributorThumbnail.js
index a2a2a557..dc9281ca 100644
--- a/src/components/ContributorThumbnail.js
+++ b/src/components/ContributorThumbnail.js
@@ -243,7 +243,8 @@ const Thumbnail = ({
         </Grid>
         <Grid item className={classes.affthumbnailText}>
           <Typography
-            variant={isChildThumbnail ? 'body1' : 'h6'}
+            variant={isChildThumbnail ? 'h6' : 'h5'}
+            aria-level={isChildThumbnail ? '4' : '3'}
             noWrap
             data-cy='contributor-thumbnail-text'
             className={
diff --git a/src/components/FAQCard/accordionSection.js b/src/components/FAQCard/accordionSection.js
index 6d17085b..d0ea4a05 100644
--- a/src/components/FAQCard/accordionSection.js
+++ b/src/components/FAQCard/accordionSection.js
@@ -70,7 +70,9 @@ const AccordionSection = (props) => {
               data-cy='faq-question'
               expandIcon={<ExpandMoreRoundedIcon />}
             >
-              <Typography variant='h6'>{faq.question}</Typography>
+              <Typography variant='h6' aria-level='3'>
+                {faq.question}
+              </Typography>
             </AccordionSummary>
             <Divider />
             <AccordionDetails data-cy='faq-answer' className={classes.detail}>
diff --git a/src/components/FAQCard/index.js b/src/components/FAQCard/index.js
index adaa7539..cc79d340 100644
--- a/src/components/FAQCard/index.js
+++ b/src/components/FAQCard/index.js
@@ -37,7 +37,7 @@ const FAQCard = (props) => {
       <Container>
         <Grid container justify='center'>
           <Grid item xs={12} sm={9} lg={11} className={classes.titleContainer}>
-            <Typography variant='h6' className={classes.title}>
+            <Typography variant='h6' aria-level='2' className={classes.title}>
               {props.title}
             </Typography>
           </Grid>
diff --git a/src/components/PictureCard.js b/src/components/PictureCard.js
index cc1d4797..97a46956 100644
--- a/src/components/PictureCard.js
+++ b/src/components/PictureCard.js
@@ -58,26 +58,65 @@ export default function PictureCard(props) {
 
   return (
     <>
-      <Box className='containerGray' pt='30px' pb='115px' >
+      <Box className='containerGray' pt='30px' pb='115px'>
         <Container>
-          <Grid container display="flex" justify="flex-start" >
-            <Grid item xs={8} md={8} lg={5} align='center' className={classes.item1_img} >
+          <Grid container display='flex' justify='flex-start'>
+            <Grid
+              item
+              xs={8}
+              md={8}
+              lg={5}
+              align='center'
+              className={classes.item1_img}
+            >
               <img src={items[0].src} alt={items[0].alt} />
             </Grid>
-            <Grid item xs={8} md={8} lg={5} className={classes.item1_txt} >
-              <Typography variant='h4' className={classes.textStyle} >{items[0].children}</Typography>
+            <Grid item xs={8} md={8} lg={5} className={classes.item1_txt}>
+              <Typography
+                variant='h4'
+                aria-level='2'
+                className={classes.textStyle}
+              >
+                {items[0].children}
+              </Typography>
             </Grid>
-            <Grid item xs={8} md={8} lg={5} align='center' className={classes.item2_img} >
+            <Grid
+              item
+              xs={8}
+              md={8}
+              lg={5}
+              align='center'
+              className={classes.item2_img}
+            >
               <img src={items[1].src} alt={items[1].alt} />
             </Grid>
-            <Grid item xs={8} md={8} lg={5} className={classes.item2_txt} >
-              <Typography variant='h4' className={classes.textStyle} >{items[1].children}</Typography>
+            <Grid item xs={8} md={8} lg={5} className={classes.item2_txt}>
+              <Typography
+                variant='h4'
+                aria-level='2'
+                className={classes.textStyle}
+              >
+                {items[1].children}
+              </Typography>
             </Grid>
-            <Grid item xs={8} md={8} lg={5} align='center' className={classes.item3_img} >
+            <Grid
+              item
+              xs={8}
+              md={8}
+              lg={5}
+              align='center'
+              className={classes.item3_img}
+            >
               <img src={items[2].src} alt={items[2].alt} />
             </Grid>
-            <Grid item xs={8} md={8} lg={5} className={classes.item3_txt} >
-              <Typography variant='h4' className={classes.textStyle} >{items[2].children}</Typography>
+            <Grid item xs={8} md={8} lg={5} className={classes.item3_txt}>
+              <Typography
+                variant='h4'
+                aria-level='2'
+                className={classes.textStyle}
+              >
+                {items[2].children}
+              </Typography>
             </Grid>
           </Grid>
         </Container>
diff --git a/src/components/TitleSection.js b/src/components/TitleSection.js
index 58040b9a..3d3122e3 100644
--- a/src/components/TitleSection.js
+++ b/src/components/TitleSection.js
@@ -33,7 +33,7 @@ const TitleSection = (props) => {
     <Grid container>
       <Grid item xs={1} md={2} />
       <Grid item xs={10} md={8}>
-        <Typography variant='h1' className={classes.titleStyle}>
+        <Typography variant='h1' aria-level='1' className={classes.titleStyle}>
           {title}
         </Typography>
       </Grid>
diff --git a/src/pages/Collaborate/LeftTextRightImage.js b/src/pages/Collaborate/LeftTextRightImage.js
index 633b588b..04547ecc 100644
--- a/src/pages/Collaborate/LeftTextRightImage.js
+++ b/src/pages/Collaborate/LeftTextRightImage.js
@@ -102,12 +102,17 @@ const LeftTextRightImage = ({
   return (
     <Grid container className={classes.leftContainerStyle}>
       <Paper elevation={0} className={classes.leftInnerTextCardContainer}>
-        <Typography className={classes.leftCardHeading} variant='h4'>
+        <Typography
+          variant='h4'
+          aria-level='2'
+          className={classes.leftCardHeading}
+        >
           {' '}
           {mainHeading}{' '}
         </Typography>
         <Typography
           variant='h6'
+          aria-level='3'
           color='primary'
           className={classes.leftSubcardHeading}
         >
diff --git a/src/pages/Collaborate/RightTextLeftImage.js b/src/pages/Collaborate/RightTextLeftImage.js
index 2d59b920..5047dcc3 100644
--- a/src/pages/Collaborate/RightTextLeftImage.js
+++ b/src/pages/Collaborate/RightTextLeftImage.js
@@ -100,12 +100,17 @@ const RightImageLeftText = ({
         />
       </Card>
       <Paper elevation={0} className={classes.rightInnerTextCardContainer}>
-        <Typography className={classes.rightCardHeading} variant='h4'>
+        <Typography
+          variant='h4'
+          aria-level='2'
+          className={classes.rightCardHeading}
+        >
           {' '}
           {mainHeading}{' '}
         </Typography>
         <Typography
           variant='h6'
+          aria-level='3'
           color='primary'
           className={classes.rightSubcardHeading}
         >
diff --git a/src/pages/Contributors/UnaffiliatedOrganizations.js b/src/pages/Contributors/UnaffiliatedOrganizations.js
index 8c1fed51..eb901f55 100644
--- a/src/pages/Contributors/UnaffiliatedOrganizations.js
+++ b/src/pages/Contributors/UnaffiliatedOrganizations.js
@@ -63,7 +63,7 @@ export const UnaffiliatedOrganizations = (props) => {
   return (
     <Grid>
       <Grid style={{ padding: '24px 0px 32px' }}>
-        <Typography variant='h4' className={classes.unAfflText}>
+        <Typography variant='h4' aria-level='2' className={classes.unAfflText}>
           Unaffiliated Organizations
           <span style={{ paddingLeft: '1px' }}>
             {' '}
diff --git a/src/pages/Donate/index.js b/src/pages/Donate/index.js
index b09f1432..abc1def5 100644
--- a/src/pages/Donate/index.js
+++ b/src/pages/Donate/index.js
@@ -29,13 +29,20 @@ const Donate = () => {
         <Container>
           <Grid container>
             <Grid item xs={12} sm={6} className={classes.infoGrid}>
-              <Typography variant='h4' className={classes.infoDescription}>
+              <Typography
+                variant='h4'
+                aria-level='2'
+                className={classes.infoDescription}
+              >
                 The Civic Tech Index is being developed by Hack For LA, and is
                 currently taking donations through Code For America.
               </Typography>
               <Typography variant='body1' className={classes.infoSteps}>
                 1. Please follow this link to the Code For America{' '}
-                <Link to='https://www.codeforamerica.org/donate' target="_blank">
+                <Link
+                  to='https://www.codeforamerica.org/donate'
+                  target='_blank'
+                >
                   donation form
                 </Link>
                 .
@@ -44,7 +51,11 @@ const Donate = () => {
                 2. To make a donation to the Civic Tech Index, please select{' '}
                 Hack for LA under the brigades listed.
               </Typography>
-              <Typography variant='h5' className={classes.infoThank}>
+              <Typography
+                variant='h5'
+                aria-level='2'
+                className={classes.infoThank}
+              >
                 We appreciate your contribution.
               </Typography>
             </Grid>
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
index d52424c2..25d64546 100644
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@@ -101,7 +101,7 @@ const Home = () => {
                 justify='center'
                 className={classes.localTitleSectionStyle}>
                 <Grid item xs={11} md={8} lg={10}>
-                  <Typography variant='h2' className={classes.localTitleStyle}>
+                  <Typography variant='h2' aria-level='1' className={classes.localTitleStyle}>
                     Join a worldwide movement to catalog every open-source civic
                     tech project.
                   </Typography>
diff --git a/src/pages/Home/sections/TrendingTopicsSection.js b/src/pages/Home/sections/TrendingTopicsSection.js
index 09e5da97..befc8b78 100644
--- a/src/pages/Home/sections/TrendingTopicsSection.js
+++ b/src/pages/Home/sections/TrendingTopicsSection.js
@@ -79,10 +79,10 @@ const TrendingTopicsSection = () => {
   return (
     <Grid container className={classes.trendingContainerStyle}>
       <Grid item lg={10}>
-        <Typography variant='h3' color='textPrimary' className={classes.sectionMainTitle}>
+        <Typography variant='h3' color='textPrimary' aria-level='2' className={classes.sectionMainTitle}>
           How are people using the CTI?
         </Typography>
-        <Typography variant='h5' color='textSecondary' className={classes.sectionSubTitle}>
+        <Typography variant='h5' color='textSecondary' aria-level='3' className={classes.sectionSubTitle}>
           Trending Topics:
         </Typography>
         <TrendingTopicList />
diff --git a/src/pages/Share/MediaInfo.js b/src/pages/Share/MediaInfo.js
index 951dc1da..83dc9357 100644
--- a/src/pages/Share/MediaInfo.js
+++ b/src/pages/Share/MediaInfo.js
@@ -66,7 +66,11 @@ const MediaInfo = () => {
             >
               Use our Logo on your Project!
             </Typography>
-            <Typography variant='h6' style={{ marginBottom: '16px' }}>
+            <Typography
+              variant='h6'
+              aria-level='3'
+              style={{ marginBottom: '16px' }}
+            >
               If you have done the following:
             </Typography>
             <Typography variant='body1' style={{ paddingBottom: '15px' }}>
diff --git a/src/pages/Share/index.js b/src/pages/Share/index.js
index c7efd913..6bc3f76b 100644
--- a/src/pages/Share/index.js
+++ b/src/pages/Share/index.js
@@ -23,7 +23,11 @@ const StarMediaSection = () => {
         <Card className={classes.card}>
           <CardMedia className={classes.media} image={image} title={title} />
           <CardContent>
-            <Typography variant='h6' className={classes.cardTypo}>
+            <Typography
+              variant='h6'
+              aria-level='3'
+              className={classes.cardTypo}
+            >
               {cardContent}
             </Typography>
           </CardContent>
@@ -59,7 +63,11 @@ const StarMediaSection = () => {
               </GitHubButton>
             </CardActions>
             <CardContent>
-              <Typography variant='h6' className={classes.cardTypo}>
+              <Typography
+                variant='h6'
+                aria-level='3'
+                className={classes.cardTypo}
+              >
                 Don’t forget to star our repository
               </Typography>
             </CardContent>
@@ -112,6 +120,7 @@ const SocialMediaSection = () => {
         >
           <Typography
             variant='h4'
+            aria-level='2'
             className={classes.sectionHeadTypography}
             style={{
               marginBottom: '24px',
@@ -121,6 +130,7 @@ const SocialMediaSection = () => {
           </Typography>
           <Typography
             variant='h6'
+            aria-level='3'
             style={{
               marginBottom: '48px',
             }}
@@ -181,11 +191,16 @@ export default function ShareTheCti() {
               textAlign: 'center',
             }}
           >
-            <Typography variant='h4' className={classes.sectionHeadTypography}>
+            <Typography
+              variant='h4'
+              aria-level='2'
+              className={classes.sectionHeadTypography}
+            >
               Tell others about us!
             </Typography>
             <Typography
               variant='h6'
+              aria-level='2'
               style={{
                 margin: '8px 0 32px',
               }}
diff --git a/src/pages/TagGenerator/StepComponent.js b/src/pages/TagGenerator/StepComponent.js
index f5a621b1..710e8139 100644
--- a/src/pages/TagGenerator/StepComponent.js
+++ b/src/pages/TagGenerator/StepComponent.js
@@ -13,10 +13,10 @@ const StepComponent = ({ step, stepHeading }) => {
   const classes = useStyles();
   return (
     <Grid>
-      <Typography variant='h5' className={classes.stepTypo}>
+      <Typography variant='h5' aria-level='2' className={classes.stepTypo}>
         {step}
       </Typography>
-      <Typography variant='h3' className={classes.stepTypo}>
+      <Typography variant='h3' aria-level='3' className={classes.stepTypo}>
         {stepHeading}
       </Typography>
     </Grid>
diff --git a/src/pages/TagGenerator/TopicTagSection.js b/src/pages/TagGenerator/TopicTagSection.js
index 97837366..4173583d 100644
--- a/src/pages/TagGenerator/TopicTagSection.js
+++ b/src/pages/TagGenerator/TopicTagSection.js
@@ -360,7 +360,7 @@ export const CopyPasteTags = ({
     <>
       <Grid>
         <Grid style={{ padding: '20px 0px' }}>
-          <Typography variant='h6'>
+          <Typography variant='h6' aria-level='3'>
             Here are the Topic Tags to add to {repositoryName}:
           </Typography>
         </Grid>