Accessibility improvements on club listing page and leaders corner page (#293)

* Accessibility improvements on club listing page and leaders corner page

* Added underline to paragraph-level links, and subsequently had to remove underline from heading-level links

* Added p tag to FAQ page for screen readers

* Added null check for aria labels

* deleted line instead of commenting out

Author: csrs

Diff for: src/components/base-styles/base/links/_links.scss

@@ -15,7 +15,6 @@
 a,
 %link {
   color: color(link);
-  text-decoration: none;
   transition: .2s cubic-bezier(.190, 1.000, .220, 1.000); /* easeOutExpo */
 }
 

Diff for: src/components/components/announcements/announcements.js

@@ -17,8 +17,10 @@ export default props => {
 
   return (
     <div>
-      <h2 className="teaser-box__list-title"> Latest announcements </h2>
-      <div>
+      <h2 className="teaser-box__list-title" id="announcements">
+        Latest announcements
+      </h2>
+      <div aria-labelledby="announcements">
         <TeaserBoxList items={items} dummyData={props.dummyData} />
       </div>
     </div>

Diff for: src/components/components/club-teaser-list/club-teaser-list.js

@@ -20,17 +20,26 @@ export const ClubTeaser = props => {
   const image = props.club.imageUrl;
   const classes = props.className ? props.className : "";
   return (
-    <Link to={`/clubs/${props.club.id}`} className={`${classes} club-teaser`}>
+    <Link
+      to={`/clubs/${props.club.id}`}
+      className={`${classes} club-teaser`}
+      aria-labelledby={title.replace(/\s/g, "")}
+    >
       <ShadowBox className="club-teaser__inner">
         <div className="club-teaser__image-wrapper">
           <img
             src={image || groupSmallImage}
-            alt={title}
+            alt={`${title} club logo`}
             className="club-teaser__image"
           />
         </div>
         <div className="club-teaser__text">
-          <h2 className="club-teaser__title">{title}</h2>
+          <h2
+            className="club-teaser__title"
+            id={(title || "").replace(/\s/g, "")}
+          >
+            {title}
+          </h2>
           <span className="club-teaser__description"> {subtitle} </span>
           <div className="button button--x-small club-teaser__button">
             Club page <ChevronRight size={16} className="icon" />

Diff for: src/components/components/club-teaser-list/club-teaser.scss

@@ -6,6 +6,7 @@
 .club-teaser {
   color: color('text');
   display: flex;
+  text-decoration: none;
 
   &__inner {
     @include padding-top(20px);

Diff for: src/components/components/communication-channels/communication-channels.js

@@ -48,10 +48,18 @@ export const ChannelList = props => {
 
   return (
     <div className="communication-channels__list">
-      <h2 className="communication-channels__list-title title title--x-small">
+      <h2
+        className="communication-channels__list-title title title--x-small"
+        id="communication"
+      >
         Communication channels
       </h2>
-      <div className="communication-channels__list-wrapper">{channels}</div>
+      <div
+        className="communication-channels__list-wrapper"
+        aria-labelledby="communication"
+      >
+        {channels}
+      </div>
     </div>
   );
 };

Diff for: src/components/components/communication-channels/communication-channels.scss

@@ -7,6 +7,7 @@
 .communication-channels {
   text-align: center;
   margin-bottom: 5px;
+  text-decoration: none;
 
   &__image {
     max-width: 100%;

Diff for: src/components/components/contributing-tools/contributing-tools.js

@@ -25,7 +25,7 @@ export const ContributingToolSet = props => {
 
   return (
     <div>
-      <h2> Tools for contributing code to open source projects </h2>
+      <h2>Tools for contributing code to open source projects</h2>
       <MediaQuery maxWidth={767}>
         <LayoutScroll>{tools}</LayoutScroll>
       </MediaQuery>

Diff for: src/components/components/external-link-box/external-link-box.scss

@@ -13,6 +13,7 @@
     flex-direction: column;
     max-width: 160px;
     min-height: 120px;
+    text-decoration: none;
 
     @include breakpoint($tablet) {
       max-width: 100%;

Diff for: src/components/components/faq-group/faq-group.js

@@ -13,9 +13,19 @@ export default props => {
     <div className={classes}>
       <ShadowBox>
         <div className="faq__group-header">
-          <h2 title="title title--x-small">{props.header}</h2>
+          <h2
+            title="title title--x-small"
+            id={(props.header || "").replace(/\s/g, "")}
+          >
+            {props.header}
+          </h2>
         </div>
-        <ul className="faq__group-content">{props.children}</ul>
+        <ul
+          className="faq__group-content"
+          aria-labelledby={(props.header || "").replace(/\s/g, "")}
+        >
+          {props.children}
+        </ul>
       </ShadowBox>
     </div>
   );

Diff for: src/components/components/faq-item/faq-item.js

@@ -48,7 +48,7 @@ class FaqItem extends React.PureComponent {
           </button>
         </h3>
         <div id={id} className="faq__item-content" hidden={isHidden}>
-          {this.props.children}
+          <p>{this.props.children}</p>
         </div>
       </li>
     );

Diff for: src/components/components/footer/footer.scss

@@ -11,7 +11,7 @@
 
   a {
     color: color('white');
-
+    text-decoration: none;
     &:hover,
     &:focus {
       color: color('white');

Diff for: src/components/components/job-listing/job-listing.js

@@ -17,8 +17,10 @@ export default props => {
 
   return (
     <div>
-      <h2 className="teaser-box__list-title"> Jobs & internships board </h2>
-      <div>
+      <h2 className="teaser-box__list-title" id="jobs">
+        Jobs & internships board
+      </h2>
+      <div aria-labelledby="jobs">
         <TeaserBoxList items={items} dummyData={props.dummyData} />
       </div>
     </div>

Diff for: src/components/components/join-cta/join-cta.scss

@@ -10,6 +10,7 @@
   display: flex;
   width: 100%;
   max-width: 350px;
+  text-decoration: none;
   @include margin-top(1);
 
   @include breakpoint($desktop) {
@@ -131,4 +132,4 @@
       }
     }
   }
-}
+}

Diff for: src/components/components/leader-tools/leader-tools.js

@@ -62,7 +62,11 @@ export class LeaderToolList extends React.PureComponent {
    * Creates the tool header.
    */
   getSimpleHeader() {
-    return <span className="title title--x-small"> {this.props.title} </span>;
+    return (
+      <span className="title title--x-small" id={this.props.detailsId}>
+        {this.props.title}
+      </span>
+    );
   }
 
   /**
@@ -129,6 +133,7 @@ export class LeaderToolList extends React.PureComponent {
             className="leader-tools-list"
             hidden={hideDetails}
             aria-hidden={hideDetails}
+            aria-labelledby={this.props.detailsId}
           >
             {tools}
           </ul>

Diff for: src/components/components/member-teaser/member-teaser.scss

@@ -9,6 +9,7 @@
   display: flex;
   width: 100%;
   height: 100%;
+  text-decoration: none;
 
   &__inner {
     display: flex;

Diff for: src/components/components/member-training-resources/member-training-resources.js

@@ -69,10 +69,13 @@ export default props => {
 
   return (
     <LayoutContained>
-      <h2 className="member-training-resources__list-title">
+      <h2 className="member-training-resources__list-title" id="resources">
         Training & various resources
       </h2>
-      <div className="member-training-resources__list">
+      <div
+        className="member-training-resources__list"
+        aria-labelledby="resources"
+      >
         <MediaQuery maxWidth={767}>
           <LayoutScroll stretchItems>{resources}</LayoutScroll>
         </MediaQuery>

Diff for: src/components/components/member-training-resources/member-training-resources.scss

@@ -27,6 +27,7 @@
     padding: 0;
     display: flex;
     height: 100%;
+    text-decoration: none;
   }
 
   &__image-wrapper {

Diff for: src/components/components/member/member.scss

@@ -91,6 +91,9 @@
     word-break: break-all;
     margin-left: auto;
     margin-right: auto;
+    a {
+      text-decoration: none;
+    }
   }
 
   &__link-content {

Diff for: src/components/components/organization/organization.scss

@@ -5,6 +5,7 @@
 // Used for organization page listing.
 .organization {
   display: flex;
+  text-decoration: none;
 
   &__inner {
     padding: 5px;

Diff for: src/components/components/teaser-box/teaser-box.scss

@@ -35,6 +35,7 @@
   &__wrapper-link {
     width: 100%;
     display: flex;
+    text-decoration: none;
   }
 
   &__link-inner {

Diff for: src/components/navigation/main-navigation/main-navigation.scss

@@ -104,6 +104,7 @@
       display: inline-block;
       padding-top: 0;
       padding-bottom: 0;
+      text-decoration: none;
     }
   }
 }

Diff for: src/components/navigation/secondary-navigation/secondary-navigation.scss

@@ -15,6 +15,7 @@
     @include font-size(18px);
     @include line-height(27px);
     color: color('navigation');
+    text-decoration: none;
     transition: .3s cubic-bezier(0.19, 1, 0.22, 1);
     display: block;
     padding-top: 5px;