mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-14 15:09:59 -04:00
finish all alt tags
This commit is contained in:
caseymm
parent
0e32b6c9c3
commit
fc47304527
6 changed files with 85 additions and 9 deletions
|
|
@ -24,7 +24,10 @@ const CountryBlurb = props => (
|
|||
<div className="country-text">
|
||||
<h5>{props.title}</h5>
|
||||
<div className="location">
|
||||
<img src={props.list_icon} />
|
||||
<img
|
||||
src={props.list_icon}
|
||||
alt="location icon"
|
||||
/>
|
||||
<span>{props.country}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,14 @@ const TextAndMediaSnippet = props => (
|
|||
videoHeight="216"
|
||||
videoId={props.video_id}
|
||||
videoWidth="380"
|
||||
alt={props.alt}
|
||||
/>
|
||||
}
|
||||
{props.type !== 'video' &&
|
||||
<img
|
||||
className="large"
|
||||
src={props.large_image}
|
||||
alt={props.alt}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -36,6 +38,7 @@ const TextAndMediaSnippet = props => (
|
|||
<img
|
||||
className="large"
|
||||
src={props.large_image}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -44,6 +47,7 @@ const TextAndMediaSnippet = props => (
|
|||
<img
|
||||
className="large"
|
||||
src={props.large_image}
|
||||
alt={props.alt}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -56,7 +60,8 @@ TextAndMediaSnippet.propTypes = {
|
|||
large_image: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
video_id: PropTypes.string,
|
||||
type: PropTypes.string
|
||||
type: PropTypes.string,
|
||||
alt: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = TextAndMediaSnippet;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@ const TimelineCard = props => (
|
|||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="../../images/annual-report/2020/Symbols-UI/Open Link.svg" />
|
||||
<img
|
||||
src="../../images/annual-report/2020/Symbols-UI/Open Link.svg"
|
||||
alt="open link"
|
||||
/>
|
||||
</a>
|
||||
<h5>{props.date}</h5>
|
||||
<h4>{props.title}</h4>
|
||||
|
|
@ -26,12 +29,14 @@ const TimelineCard = props => (
|
|||
videoHeight="216"
|
||||
videoId={props.videoId}
|
||||
videoWidth="380"
|
||||
alt={props.alt}
|
||||
/>
|
||||
}
|
||||
{!props.videoId &&
|
||||
{!props.videoId && props.image &&
|
||||
<img
|
||||
className="large"
|
||||
src={props.image}
|
||||
alt={props.alt}
|
||||
/>
|
||||
}
|
||||
{props.attribution &&
|
||||
|
|
@ -48,7 +53,8 @@ TimelineCard.propTypes = {
|
|||
image: PropTypes.string,
|
||||
videoId: PropTypes.string,
|
||||
attribution: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
className: PropTypes.string,
|
||||
alt: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = TimelineCard;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
z-index: 1;
|
||||
margin-bottom: 30px;
|
||||
p{
|
||||
margin: 0px;
|
||||
margin: 10px 0 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a{
|
||||
|
|
|
|||
|
|
@ -685,7 +685,12 @@ class AnnualReport extends React.Component {
|
|||
)
|
||||
}}
|
||||
/>
|
||||
<img src="/images/annual-report/2020/Symbols-UI/Arrow_Next.svg" />
|
||||
<img
|
||||
src="/images/annual-report/2020/Symbols-UI/Arrow_Next.svg"
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altArrowNext'}
|
||||
)}
|
||||
/>
|
||||
<FormattedMessage
|
||||
id="annualReport.2020.reachIncreaseInCommentsIncrease"
|
||||
values={{
|
||||
|
|
@ -1223,6 +1228,9 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.connectivityExample1Paragraph'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altTutorial'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/connectivity/TutorialUI.svg"
|
||||
/>
|
||||
|
|
@ -1234,6 +1242,9 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.connectivityExample2Paragraph'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altGettingStarted'}
|
||||
)}
|
||||
type="video"
|
||||
video_id="xfh9bvbeik"
|
||||
large_image="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
|
||||
|
|
@ -1246,6 +1257,9 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.connectivityExample3Paragraph'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altEditor'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
|
||||
/>
|
||||
|
|
@ -1417,6 +1431,9 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.adaptationHighlightText4b'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altHackYourWindow'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/adaptation/hackyourwindow_gif.gif"
|
||||
/>
|
||||
|
|
@ -1449,6 +1466,9 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.adaptationSnapshot1Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altScratchInteraction'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/adaptation/Computer Clubhouse Illustration.svg"
|
||||
/>
|
||||
|
|
@ -1462,6 +1482,9 @@ class AnnualReport extends React.Component {
|
|||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.adaptationSnapshot2Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altImageBubbles'}
|
||||
)}
|
||||
type="image"
|
||||
large_image="/images/annual-report/2020/adaptation/BYIS Graphic.svg"
|
||||
/>
|
||||
|
|
@ -1687,6 +1710,9 @@ class AnnualReport extends React.Component {
|
|||
text={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.yearInReviewCard1Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altJanuaryCard'}
|
||||
)}
|
||||
image="/images/annual-report/2020/community/Timeline/Images/endofthedecade_sds.jpg"
|
||||
attribution="project by u/lukiepie2011"
|
||||
/>
|
||||
|
|
@ -1724,6 +1750,9 @@ class AnnualReport extends React.Component {
|
|||
text={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.yearInReviewCard3Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altAprilCard'}
|
||||
)}
|
||||
image="/images/annual-report/2020/community/Timeline/Images/createalong.jpg"
|
||||
/>
|
||||
<img
|
||||
|
|
@ -1760,6 +1789,9 @@ class AnnualReport extends React.Component {
|
|||
text={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.yearInReviewCard5Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altMayCard'}
|
||||
)}
|
||||
image="/images/annual-report/2020/community/Timeline/Images/blmvideo.png"
|
||||
videoId="r1pmlyylye"
|
||||
/>
|
||||
|
|
@ -1782,6 +1814,9 @@ class AnnualReport extends React.Component {
|
|||
text={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.yearInReviewCard6Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altJuneCard'}
|
||||
)}
|
||||
image="/images/annual-report/2020/community/Timeline/Images/funathome_sds.jpg"
|
||||
attribution="project by u/cellie"
|
||||
/>
|
||||
|
|
@ -1819,6 +1854,9 @@ class AnnualReport extends React.Component {
|
|||
text={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.yearInReviewCard8Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altJulyCard'}
|
||||
)}
|
||||
image="/images/annual-report/2020/community/Timeline/Images/scratchcamp.jpg"
|
||||
attribution="project by u/LGMammoth"
|
||||
/>
|
||||
|
|
@ -1841,6 +1879,9 @@ class AnnualReport extends React.Component {
|
|||
text={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.yearInReviewCard9Text'}
|
||||
)}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altOctoberCard'}
|
||||
)}
|
||||
image="/images/annual-report/2020/community/Timeline/Images/scratchtober.jpg"
|
||||
attribution="project by u/IDK_HAVE_SOME_NUMBER"
|
||||
/>
|
||||
|
|
@ -2275,7 +2316,12 @@ class AnnualReport extends React.Component {
|
|||
>
|
||||
<FlexRow className="donate-info">
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<img src="/images/annual-report/donate-illustration.svg" />
|
||||
<img
|
||||
src="/images/annual-report/donate-illustration.svg"
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altDonateIllustration'}
|
||||
)}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<div className="donate-content">
|
||||
<h2>
|
||||
|
|
|
|||
|
|
@ -357,6 +357,22 @@
|
|||
"annualReport.2020.altIndiaIcon": "A star interlocked with a circle",
|
||||
"annualReport.2020.altUSAIcon": "A cartoon raspberry, the Raspberry Pi logo",
|
||||
|
||||
"annualReport.2020.altTutorial": "A Scratch tutorial in Spanish",
|
||||
"annualReport.2020.altGettingStarted": "A play button sits on top of the Scratch UI.",
|
||||
"annualReport.2020.altEditor": "The Scratch UI along wiht a preview of th progam currently being built showing two people talking to each other.",
|
||||
"annualReport.2020.altHackYourWindow": "A dog in a space helmet, a star, and a donut float outside a window in space.",
|
||||
"annualReport.2020.altScratchInteraction": "Two people talk amongst scratch components. One is handing a component to the other one.",
|
||||
"annualReport.2020.altImageBubbles": "Images from Scratch projects appear in bubble shapes grouped together.",
|
||||
|
||||
"annualReport.2020.altConnectivityVideoPreview": "A play button appears over a scene of friendly sea creatures.",
|
||||
"annualReport.2020.altAdaptationVideoPreview": "A play button apppears over various scenes from the Scratch user interface."
|
||||
"annualReport.2020.altAdaptationVideoPreview": "A play button apppears over various scenes from the Scratch user interface.",
|
||||
|
||||
"annualReport.2020.altJanuaryCard": "Rey from Star Wars holds a staff and stands in the desert.",
|
||||
"annualReport.2020.altAprilCard": "Multiple screenshots from the Scratch UI are placed together.",
|
||||
"annualReport.2020.altMayCard": "Hands belonging to people of a variety of races are raised in fists.",
|
||||
"annualReport.2020.altJuneCard": "A person staples a paper flower together.",
|
||||
"annualReport.2020.altJulyCard": "A crab, mermaid, and octopus play music together under the sea.",
|
||||
"annualReport.2020.altOctoberCard": "A pumpkin and candy corn appear on the wall above a computer workstation.",
|
||||
|
||||
"annualReport.2020.altDonateIllustration": "Two hands form the shape of a heart with their fingers inside of a cut out heart shape."
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue