fix(client): Make links with Font Awesome Icons accessible to visually impaired campers (#35589)

client/src/components/profile/components/Camper.js

@@ -81,6 +81,7 @@ function Camper({
         isWebsite={isWebsite}
         linkedin={linkedin}
         twitter={twitter}
+        username={username}
         website={website}
       />
       <br />

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>
   );