Merge pull request #1160 from civictechindex/aria-level-1101

Set hierarchical header levels (#1101)
civictechindex · Feb 18, 2022 · 122ca5c · 122ca5c
2 parents 0ec4bf9 + 99f7b2c
commit 122ca5c
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>