added alt attributes to img tags in starter projects component and when using this component on ev3 page

This commit is contained in:
Linda 2018-08-21 16:07:27 -04:00
parent 1ff394f9b2
commit bf5a890a87
3 changed files with 12 additions and 2 deletions

View file

@ -8,7 +8,10 @@ const ProjectCard = props => (
href={props.cardUrl}
>
<div className="project-card-image">
<img src={props.imageSrc} />
<img
alt={props.imageAlt}
src={props.imageSrc}
/>
</div>
<div className="project-card-info">
<h4>{props.title}</h4>
@ -20,6 +23,7 @@ const ProjectCard = props => (
ProjectCard.propTypes = {
cardUrl: PropTypes.string,
description: PropTypes.string,
imageAlt: PropTypes.string,
imageSrc: PropTypes.string,
title: PropTypes.string
};

View file

@ -210,18 +210,21 @@ class EV3 extends ExtensionLanding {
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
description={this.props.intl.formatMessage({id: 'ev3.waveHelloDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltWaveHello'})}
imageSrc="/images/ev3/starter-wave-hello.png"
title={this.props.intl.formatMessage({id: 'ev3.waveHelloTitle'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
description={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltDistanceInstrument'})}
imageSrc="/images/ev3/starter-distance-instrument.png"
title={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentTitle'})}
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
description={this.props.intl.formatMessage({id: 'ev3.spaceTacosDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltSpaceTacos'})}
imageSrc="/images/ev3/starter-flying-game.png"
title={this.props.intl.formatMessage({id: 'ev3.spaceTacosTitle'})}
/>

View file

@ -41,5 +41,8 @@
"ev3.imgAltAcceptPasscode": "Use the center button of your EV3 to accept the passcode.",
"ev3.imgAltWaitForWindows": "Windows notifies you when EV3 is ready.",
"ev3.imgAltEnterPasscodeMac": "Enter the passcode into the connection request window opening on your Mac.",
"ev3.imgAltPlugInMotor": "Port A is not to be confused with Port 4 on the other side of the EV3."
"ev3.imgAltPlugInMotor": "Port A is not to be confused with Port 4 on the other side of the EV3.",
"ev3.imgAltWaveHello": "A fairy",
"ev3.imgAltDistanceInstrument": "A guitar on stage",
"ev3.imgAltSpaceTacos": "A cat and a taco in space"
}