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

View file

@ -210,18 +210,21 @@ class EV3 extends ExtensionLanding {
<ProjectCard <ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3" cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
description={this.props.intl.formatMessage({id: 'ev3.waveHelloDescription'})} description={this.props.intl.formatMessage({id: 'ev3.waveHelloDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltWaveHello'})}
imageSrc="/images/ev3/starter-wave-hello.png" imageSrc="/images/ev3/starter-wave-hello.png"
title={this.props.intl.formatMessage({id: 'ev3.waveHelloTitle'})} title={this.props.intl.formatMessage({id: 'ev3.waveHelloTitle'})}
/> />
<ProjectCard <ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3" cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
description={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentDescription'})} description={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltDistanceInstrument'})}
imageSrc="/images/ev3/starter-distance-instrument.png" imageSrc="/images/ev3/starter-distance-instrument.png"
title={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentTitle'})} title={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentTitle'})}
/> />
<ProjectCard <ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3" cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
description={this.props.intl.formatMessage({id: 'ev3.spaceTacosDescription'})} description={this.props.intl.formatMessage({id: 'ev3.spaceTacosDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltSpaceTacos'})}
imageSrc="/images/ev3/starter-flying-game.png" imageSrc="/images/ev3/starter-flying-game.png"
title={this.props.intl.formatMessage({id: 'ev3.spaceTacosTitle'})} 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.imgAltAcceptPasscode": "Use the center button of your EV3 to accept the passcode.",
"ev3.imgAltWaitForWindows": "Windows notifies you when EV3 is ready.", "ev3.imgAltWaitForWindows": "Windows notifies you when EV3 is ready.",
"ev3.imgAltEnterPasscodeMac": "Enter the passcode into the connection request window opening on your Mac.", "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"
} }