Accessibility improvements on club listing page and leaders corner page

Author: csrs

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,23 @@ 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/communication-channels/communication-channels.js

@@ -43,10 +43,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/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/faq-group/faq-group.js

@@ -13,9 +13,16 @@ 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/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/leader-tools/leader-tools.js

@@ -56,7 +56,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>
+    );
   }
 
   /**
@@ -123,6 +127,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-training-resources/member-training-resources.js

@@ -64,10 +64,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>