gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vicente Plata
2019-03-18 01:58:24 -04:00
committed by Valeriy
parent 91926b71fe
commit b24807312c
2 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/profile/components/Camper.js
View File

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

46
client/src/components/profile/components/SocialIcons.js
View File

@ -21,36 +21,57 @@ const propTypes = {
linkedin: PropTypes.string, linkedin: PropTypes.string,
show: PropTypes.bool, show: PropTypes.bool,
twitter: PropTypes.string, twitter: PropTypes.string,
username: PropTypes.string,
website: PropTypes.string website: PropTypes.string
}; };
function LinkedInIcon(linkedIn) { function LinkedInIcon(linkedIn, username) {
return ( 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' /> <FontAwesomeIcon icon={faLinkedin} size='2x' />
</a> </a>
); );
} }
function GithubIcon(ghURL) { function GithubIcon(ghURL, username) {
return ( 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' /> <FontAwesomeIcon icon={faGithub} size='2x' />
</a> </a>
); );
} }
function WebsiteIcon(website) { function WebsiteIcon(website, username) {
return ( 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' /> <FontAwesomeIcon icon={faLink} size='2x' />
</a> </a>
); );
} }
function TwitterIcon(handle) { function TwitterIcon(handle, username) {
return ( 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' /> <FontAwesomeIcon icon={faTwitter} size='2x' />
</a> </a>
); );
@ -65,6 +86,7 @@ function SocialIcons(props) {
isWebsite, isWebsite,
linkedin, linkedin,
twitter, twitter,
username,
website website
} = props; } = props;
const show = isLinkedIn || isGithub || isTwitter || isWebsite; const show = isLinkedIn || isGithub || isTwitter || isWebsite;
@ -75,10 +97,10 @@ function SocialIcons(props) {
return ( return (
<Row> <Row>
<Col className='text-center social-media-icons' sm={6} smOffset={3}> <Col className='text-center social-media-icons' sm={6} smOffset={3}>
{isLinkedIn ? LinkedInIcon(linkedin) : null} {isLinkedIn ? LinkedInIcon(linkedin, username) : null}
{isGithub ? GithubIcon(githubProfile) : null} {isGithub ? GithubIcon(githubProfile, username) : null}
{isWebsite ? WebsiteIcon(website) : null} {isWebsite ? WebsiteIcon(website, username) : null}
{isTwitter ? TwitterIcon(twitter) : null} {isTwitter ? TwitterIcon(twitter, username) : null}
</Col> </Col>
</Row> </Row>
); );