From b24807312c2d7ec05112532378622c2d1af773f5 Mon Sep 17 00:00:00 2001
From: Vicente Plata <xientyto@gmail.com>
Date: Mon, 18 Mar 2019 01:58:24 -0400
Subject: [PATCH] fix(client): Make links with Font Awesome Icons accessible to
 visually impaired campers (#35589)

---
 .../components/profile/components/Camper.js   |  1 +
 .../profile/components/SocialIcons.js         | 46 ++++++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/client/src/components/profile/components/Camper.js b/client/src/components/profile/components/Camper.js
index 49d1f291e40..43ac80e1d22 100644
--- a/client/src/components/profile/components/Camper.js
+++ b/client/src/components/profile/components/Camper.js
@@ -81,6 +81,7 @@ function Camper({
         isWebsite={isWebsite}
         linkedin={linkedin}
         twitter={twitter}
+        username={username}
         website={website}
       />
       <br />
diff --git a/client/src/components/profile/components/SocialIcons.js b/client/src/components/profile/components/SocialIcons.js
index fbadd2be7ad..54a4ff7e8b9 100644
--- a/client/src/components/profile/components/SocialIcons.js
+++ b/client/src/components/profile/components/SocialIcons.js
@@ -21,36 +21,57 @@ const propTypes = {
   linkedin: PropTypes.string,
   show: PropTypes.bool,
   twitter: PropTypes.string,
+  username: PropTypes.string,
   website: PropTypes.string
 };
 
-function LinkedInIcon(linkedIn) {
+function LinkedInIcon(linkedIn, username) {
   return (
-    <a href={linkedIn} rel='noopener noreferrer' target='_blank'>
+    <a
+      aria-label={`Link to ${username}'s LinkedIn`}
+      href={linkedIn}
+      rel='noopener noreferrer'
+      target='_blank'
+    >
       <FontAwesomeIcon icon={faLinkedin} size='2x' />
     </a>
   );
 }
 
-function GithubIcon(ghURL) {
+function GithubIcon(ghURL, username) {
   return (
-    <a href={ghURL} rel='noopener noreferrer' target='_blank'>
+    <a
+      aria-label={`Link to ${username}'s Github`}
+      href={ghURL}
+      rel='noopener noreferrer'
+      target='_blank'
+    >
       <FontAwesomeIcon icon={faGithub} size='2x' />
     </a>
   );
 }
 
-function WebsiteIcon(website) {
+function WebsiteIcon(website, username) {
   return (
-    <a href={website} rel='noopener noreferrer' target='_blank'>
+    <a
+      aria-label={`Link to ${username}'s website`}
+      href={website}
+      rel='noopener noreferrer'
+      target='_blank'
+    >
       <FontAwesomeIcon icon={faLink} size='2x' />
     </a>
   );
 }
 
-function TwitterIcon(handle) {
+function TwitterIcon(handle, username) {
   return (
-    <a href={handle} rel='noopener noreferrer' target='_blank'>
+    <a
+      aria-label={`Link to ${username}'s Twitter`}
+      href={handle}
+      rel='noopener noreferrer'
+      target='_blank'
+    >
       <FontAwesomeIcon icon={faTwitter} size='2x' />
     </a>
   );
@@ -65,6 +86,7 @@ function SocialIcons(props) {
     isWebsite,
     linkedin,
     twitter,
+    username,
     website
   } = props;
   const show = isLinkedIn || isGithub || isTwitter || isWebsite;
@@ -75,10 +97,10 @@ function SocialIcons(props) {
   return (
     <Row>
       <Col className='text-center social-media-icons' sm={6} smOffset={3}>
-        {isLinkedIn ? LinkedInIcon(linkedin) : null}
-        {isGithub ? GithubIcon(githubProfile) : null}
-        {isWebsite ? WebsiteIcon(website) : null}
-        {isTwitter ? TwitterIcon(twitter) : null}
+        {isLinkedIn ? LinkedInIcon(linkedin, username) : null}
+        {isGithub ? GithubIcon(githubProfile, username) : null}
+        {isWebsite ? WebsiteIcon(website, username) : null}
+        {isTwitter ? TwitterIcon(twitter, username) : null}
       </Col>
     </Row>
   );