Fix/social button alt text/accessibility

README.md

@@ -1,6 +1,6 @@
 <!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
 <p align="center">
-  <a href="https://www.gatsbyjs.org">
+  <a alt="Link to page Gatsby JS" href="https://www.gatsbyjs.org">
     <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
   </a>
 </p>

src/components/Banner/index.js

@@ -20,7 +20,7 @@ export default class Banner extends PureComponent {
             {children}
           </div>
           { closable &&
-            <CloseIcon onClick={onClose} width={16} height={16} className="fill-current text-secondary-dark cursor-pointer hover:text-primary-light" />
+            <CloseIcon onClick={onClose} width={16} height={16} className="fill-current text-secondary-dark cursor-pointer hover:text-primary-light" ariaLabelledby="Close icon"/>
           }
         </div>
       </section>

src/components/Button/ScrollTop.js

@@ -58,7 +58,7 @@ export default class ScrollTop extends React.Component {
         }}
       >
         <Button onClick={this.scrollToTop} onKeyPress={this.scrollToTop} className="px-3">
-          <ArrowUp width={27} height={28} color="currentColor" />
+          <ArrowUp width={27} height={28} color="currentColor" ariaLabelledby="Scroll to the top of the page" />
         </Button>
       </div>
     );

src/components/Button/index.js

@@ -9,7 +9,7 @@ const Button = React.memo(({ children, className, to, onClick }) => {
   if (to) {
     if (to.startsWith('http')) {
       return (
-        <a href={to} className={css}>{children}</a>
+        <a aria-label={children} href={to} className={css}>{children}</a>
       );
     }
 

src/components/Icon/ArrowUp.js

@@ -4,5 +4,5 @@ import Icon from './index.js';
 const vectors = 'M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z'; // eslint-disable-line
 
 export default function ArrowUp(props) {
-  return <Icon viewBox="0 0 448 512" {...props} vectors={vectors} />;
+  return <Icon viewBox="0 0 448 512" {...props} vectors={vectors}/>;
 }

src/components/Icon/Close.js

@@ -4,5 +4,5 @@ import Icon from './index';
 const vectors = 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'; // eslint-disable-line
 
 export default function Close(props) {
-  return <Icon viewBox="0 0 352 512" {...props} vectors={vectors} />;
+  return <Icon viewBox="0 0 352 512" {...props} vectors={vectors}/>;
 }

src/components/Icon/index.js

@@ -13,14 +13,15 @@ export default function Icon(props) {
     width,
     vectors,
     viewBox,
+    ariaLabelledby
   } = props;
 
   return (
     <svg
       width={width}
       height={height}
       viewBox={viewBox}
-      aria-labelledby="title"
+      aria-labelledby={ariaLabelledby}
       className={className}
       style={style}
       onClick={onClick}
@@ -43,4 +44,5 @@ Icon.propTypes = {
   vectors: string,
   viewBox: string,
   width: number,
+  ariaLabelledby: string
 };

src/components/MainNav/index.js

@@ -46,7 +46,7 @@ const MenuLink = React.memo(({ children, to }) => {
   if (to && to.startsWith('http')) {
     return (
       <li className={liCss}>
-        <a href={to} className={linkCss}>{children}</a>
+        <a aria-label={children} href={to} className={linkCss}>{children}</a>
       </li>
     );
   }

src/components/Sidebar/index.js

@@ -49,11 +49,11 @@ function FeaturedMentor({ mentor, isAuthor }) {
       <SidebarTitle>
         { isAuthor ? 'Author' : 'Featured Mentor' }
       </SidebarTitle>
-      <a href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="block mb-4 w-full">
+      <a title href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="block mb-4 w-full">
         <img src={mentor.avatar} className="w-full" alt={mentor.name} />
       </a>
       <h3 className="font-body mb-1 text-lg truncate" title={mentor.name}>
-        <a href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
+        <a aria-label={mentor.name} href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
       </h3>
       {mentor.tags &&
         <p className="font-body mb-1 text-xs uppercase truncate text-secondary-dark">
@@ -75,7 +75,7 @@ function LatestMentors({ mentors }) {
         {mentors.map(mentor =>
           <li key={mentor.name} className="mb-2">
             <h4 className="font-body">
-              <a href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
+              <a aria-label={mentor.name} href={`https://mentors.codingcoach.io/u/${mentor._id}`} className="hover:underline">{mentor.name}</a>
             </h4>
             <p className="uppercase text-xs text-secondary-dark truncate">{mentor.tags.join(', ')}</p>
           </li>
@@ -109,7 +109,7 @@ function TwitchAd() {
   return (
     <div className="mb-12 pt-4 md:mr-4 md:flex-1 lg:flex-none">
       <SidebarTitle>Follow us in Twitch</SidebarTitle>
-      <a href="https://www.twitch.tv/codingcoach/">
+      <a aria-label="Access our page on Twitch" href="https://www.twitch.tv/codingcoach/">
         <img src={twitchImage} alt="Twitch Logo" />
       </a>
     </div>
@@ -120,7 +120,7 @@ function StoreAd() {
   return (
     <div className="mb-12 pt-4 md:mr-4 md:flex-1 lg:flex-none">
       <SidebarTitle>Get the T-Shirt</SidebarTitle>
-      <a href="https://shop.spreadshirt.com/coding-coach" target="_blank" rel="noopener noreferrer">
+      <a aria-label="Buy coding-coach merchandise" href="https://shop.spreadshirt.com/coding-coach" target="_blank" rel="noopener noreferrer">
         <img src={tshirtImage} alt="Coding Coach T-Shirt" />
       </a>
     </div>

src/pages/404.js

@@ -23,13 +23,13 @@ const NotFoundPage = () => (
           <Link to="/">home page</Link> would be a good idea. You might want to{' '}
           <Link to="/blog">read the blog</Link>, we have very interesting
           articles and tutorials! Maybe looking for{' '}
-          <a href="https://mentors.codingcoach.io">a mentor</a> to improve your
+          <a aria-label="Link to page with all the mentors" href="https://mentors.codingcoach.io">a mentor</a> to improve your
           career?
         </p>
         <p>
           How did you get here? Is this a broken link within the blog? Or maybe
           a link from a third party website? Please{' '}
-          <a href="mailto:[email protected]">let us know</a> and we will fix it
+          <a aria-label="Send email to the page admin" href="mailto:[email protected]">let us know</a> and we will fix it
           ASAP!
         </p>
       </div>

src/pages/about.js

@@ -80,11 +80,11 @@ function Profile({ className, highlight, image, name, title, to }) {
 
   return (
     <div className={css}>
-      <a href={to}>
-        <img src={image} alt={name} title={name} />
+      <a aria-label={name} href={to}>
+        <img aria-label={name} src={image} alt={name} title={name} />
       </a>
       <h3 className={titleCss}>
-        <a href={to} className="hover:underline" title={name}>
+        <a aria-label={name} href={to} className="hover:underline" title={name}>
           {name}
         </a>
       </h3>

src/pages/blog.js

@@ -68,7 +68,7 @@ function PostExcerpt({ author, data, excerpt, fields }) {
           </Link>
         </h2>
         <p className="mb-1 font-body text-sm uppercase text-secondary-dark">
-          <a href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a> <span className="inline-block mx-2">&middot;</span>{' '}
+          <a aria-label={author.frontmatter.name} href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a> <span className="inline-block mx-2">&middot;</span>{' '}
           {data.date} <span className="inline-block mx-2">&middot;</span>{' '}
           {fields.readingTime.text}
         </p>

src/templates/post.js

@@ -51,7 +51,7 @@ export default function PostTemplate({ data }) {
             {frontmatter.title}
           </h1>
           <p className="mb-4 font-body uppercase  text-xs md:text-sm">
-            <a href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a>{' '}
+            <a aria-label={author.frontmatter.name} href={author.frontmatter.link} className="hover:underline">{author.frontmatter.name}</a>{' '}
             <span className="inline-block mx-2">&middot;</span>{' '}
             {frontmatter.date}{' '}
             <span className="inline-block mx-2">&middot;</span>{' '}