mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-12-04 12:51:28 -05:00
feat: [UEPR-67] Added alternative texts for images on guidelines page
This commit is contained in:
MiroslavDionisiev
parent
de60f74248
commit
6eda19637e
2 changed files with 101 additions and 64 deletions
|
|
@ -3,6 +3,7 @@ const React = require('react');
|
|||
|
||||
const Page = require('../../components/page/www/page.jsx');
|
||||
const render = require('../../lib/render.jsx');
|
||||
const {useIntl} = require('react-intl');
|
||||
|
||||
require('./guidelines.scss');
|
||||
|
||||
|
|
@ -15,7 +16,9 @@ const pageSections = [
|
|||
{id: 'guidelines.respectbody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_respect.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobblue_respect.svg'
|
||||
sectionImgAltTextId: 'guidelines.respectSectionImageDescription',
|
||||
buttonImgSrc: '/svgs/guidelines/blobblue_respect.svg',
|
||||
buttonImgAltTextId: 'guidelines.respectButtonImageDescription'
|
||||
},
|
||||
{
|
||||
id: 'privacy',
|
||||
|
|
@ -25,7 +28,9 @@ const pageSections = [
|
|||
{id: 'guidelines.privacybody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_safe.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobyellow_safe.svg'
|
||||
sectionImgAltTextId: 'guidelines.privacySectionImageDescription',
|
||||
buttonImgSrc: '/svgs/guidelines/blobyellow_safe.svg',
|
||||
buttonImgAltTextId: 'guidelines.privacyButtonImageDescription'
|
||||
},
|
||||
{
|
||||
id: 'helpful',
|
||||
|
|
@ -35,7 +40,9 @@ const pageSections = [
|
|||
{id: 'guidelines.helpfulbody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_feedback.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobmagenta_feedback.svg'
|
||||
sectionImgAltTextId: 'guidelines.helpfulSectionImageDescription',
|
||||
buttonImgSrc: '/svgs/guidelines/blobmagenta_feedback.svg',
|
||||
buttonImgAltTextId: 'guidelines.helpfulButtonImageDescription'
|
||||
},
|
||||
{
|
||||
id: 'remix',
|
||||
|
|
@ -45,7 +52,9 @@ const pageSections = [
|
|||
{id: 'guidelines.remixbody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_remix.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobgreen_remix.svg'
|
||||
sectionImgAltTextId: 'guidelines.remixSectionImageDescription',
|
||||
buttonImgSrc: '/svgs/guidelines/blobgreen_remix.svg',
|
||||
buttonImgAltTextId: 'guidelines.remixButtonImageDescription'
|
||||
},
|
||||
{
|
||||
id: 'honesty',
|
||||
|
|
@ -55,7 +64,9 @@ const pageSections = [
|
|||
{id: 'guidelines.honestybody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_honest.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobpurple_honest.svg'
|
||||
sectionImgAltTextId: 'guidelines.honestySectionImageDescription',
|
||||
buttonImgSrc: '/svgs/guidelines/blobpurple_honest.svg',
|
||||
buttonImgAltTextId: 'guidelines.honestyButtonImageDescription'
|
||||
},
|
||||
{
|
||||
id: 'friendly',
|
||||
|
|
@ -65,7 +76,9 @@ const pageSections = [
|
|||
{id: 'guidelines.friendlybody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_friendly.svg',
|
||||
buttonImgSrc: '/svgs/guidelines/blobpink_friendly.svg'
|
||||
sectionImgAltTextId: 'guidelines.friendlySectionImageDescription',
|
||||
buttonImgSrc: '/svgs/guidelines/blobpink_friendly.svg',
|
||||
buttonImgAltTextId: 'guidelines.friendlyButtonImageDescription'
|
||||
},
|
||||
{
|
||||
id: 'learn-more',
|
||||
|
|
@ -83,69 +96,80 @@ const pageSections = [
|
|||
},
|
||||
{id: 'guidelines.learnMorebody2'}
|
||||
],
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_learn_more.svg'
|
||||
sectionImgSrc: '/svgs/guidelines/illustration_learn_more.svg',
|
||||
sectionImgAltTextId: 'guidelines.learnMoreSectionImageDescription'
|
||||
}
|
||||
];
|
||||
|
||||
const Guidelines = () => (
|
||||
<div className="guidelines-page">
|
||||
<header>
|
||||
<div className="title">
|
||||
<FormattedMessage id="guidelines.title" />
|
||||
</div>
|
||||
<div className="header1">
|
||||
<FormattedMessage id="guidelines.header1" />
|
||||
</div>
|
||||
<div className="header2">
|
||||
<FormattedMessage id="guidelines.header2" />
|
||||
</div>
|
||||
</header>
|
||||
<section className="navigation">
|
||||
<div className="header3">
|
||||
<FormattedMessage id="guidelines.header3" />
|
||||
</div>
|
||||
<section className="navigation-buttons">
|
||||
{pageSections
|
||||
.filter(guide => guide.buttonImgSrc)
|
||||
.map(({id, headerTextId, buttonImgSrc}) => (
|
||||
<a
|
||||
key={id}
|
||||
href={`#${id}`}
|
||||
>
|
||||
<img src={buttonImgSrc} />
|
||||
<FormattedMessage id={headerTextId} />
|
||||
</a>
|
||||
))}
|
||||
</section>
|
||||
</section>
|
||||
<section className="inner guidelines">
|
||||
{pageSections.map(
|
||||
({id, headerTextId, contentTexts, sectionImgSrc}, index) => (
|
||||
<div
|
||||
id={id}
|
||||
key={id}
|
||||
className={`guideline ${
|
||||
index % 2 === 0 ? 'content-first' : 'image-first'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<div className="guideline-title">
|
||||
const Guidelines = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<div className="guidelines-page">
|
||||
<header>
|
||||
<div className="title">
|
||||
<FormattedMessage id="guidelines.title" />
|
||||
</div>
|
||||
<div className="header1">
|
||||
<FormattedMessage id="guidelines.header1" />
|
||||
</div>
|
||||
<div className="header2">
|
||||
<FormattedMessage id="guidelines.header2" />
|
||||
</div>
|
||||
</header>
|
||||
<section className="navigation">
|
||||
<div className="header3">
|
||||
<FormattedMessage id="guidelines.header3" />
|
||||
</div>
|
||||
<section className="navigation-buttons">
|
||||
{pageSections
|
||||
.filter(guide => guide.buttonImgSrc)
|
||||
.map(({id, headerTextId, buttonImgSrc, buttonImgAltTextId}) => (
|
||||
<a
|
||||
key={id}
|
||||
href={`#${id}`}
|
||||
>
|
||||
<img
|
||||
alt={intl.formatMessage({id: buttonImgAltTextId})}
|
||||
src={buttonImgSrc}
|
||||
/>
|
||||
<FormattedMessage id={headerTextId} />
|
||||
</a>
|
||||
))}
|
||||
</section>
|
||||
</section>
|
||||
<section className="inner guidelines">
|
||||
{pageSections.map(
|
||||
({id, headerTextId, contentTexts, sectionImgSrc, sectionImgAltTextId}, index) => (
|
||||
<div
|
||||
id={id}
|
||||
key={id}
|
||||
className={`guideline ${
|
||||
index % 2 === 0 ? 'content-first' : 'image-first'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<div className="guideline-title">
|
||||
<FormattedMessage id={headerTextId} />
|
||||
</div>
|
||||
<p className="first-paragraph">
|
||||
<FormattedMessage {...contentTexts[0]} />
|
||||
</p>
|
||||
<p className="second-paragraph">
|
||||
<FormattedMessage {...contentTexts[1]} />
|
||||
</p>
|
||||
</div>
|
||||
<p className="first-paragraph">
|
||||
<FormattedMessage {...contentTexts[0]} />
|
||||
</p>
|
||||
<p className="second-paragraph">
|
||||
<FormattedMessage {...contentTexts[1]} />
|
||||
</p>
|
||||
<img
|
||||
alt={intl.formatMessage({id: sectionImgAltTextId})}
|
||||
src={sectionImgSrc}
|
||||
/>
|
||||
</div>
|
||||
<img src={sectionImgSrc} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render(
|
||||
<Page>
|
||||
|
|
|
|||
|
|
@ -23,5 +23,18 @@
|
|||
"guidelines.friendlybody2": "If you think something on Scratch is mean, insulting, too violent, or otherwise disruptive to the community, click “Report” to let us know about it. Please use the “Report” button rather than engaging in fights, spreading rumors about other people’s behavior, or otherwise responding to any inappropriate content. The Scratch Team will look at your report and take the appropriate action.",
|
||||
"guidelines.learnMoreheader": "Want to learn more?",
|
||||
"guidelines.learnMorebody1": "<a>Download the guide</a> for more details!",
|
||||
"guidelines.learnMorebody2": "Discover the limitless potential of the Scratch online community with our guides! These valuable resources are designed to help you navigate and thrive as a Scratcher, revealing everything from setting up your profile to connecting with like-minded individuals. Learn how to connect with others, share your unique creations, and find inspiration for your next project."
|
||||
"guidelines.learnMorebody2": "Discover the limitless potential of the Scratch online community with our guides! These valuable resources are designed to help you navigate and thrive as a Scratcher, revealing everything from setting up your profile to connecting with like-minded individuals. Learn how to connect with others, share your unique creations, and find inspiration for your next project.",
|
||||
"guidelines.respectButtonImageDescription": "A blue circle",
|
||||
"guidelines.privacyButtonImageDescription": "A yellow circle",
|
||||
"guidelines.helpfulButtonImageDescription": "A magenta circle",
|
||||
"guidelines.remixButtonImageDescription": "A green circle",
|
||||
"guidelines.honestyButtonImageDescription": "A purple circle",
|
||||
"guidelines.friendlyButtonImageDescription": "A pink circle",
|
||||
"guidelines.respectSectionImageDescription": "A graphic of two hands grasping each other in a handshake, with a pink heart above them.",
|
||||
"guidelines.privacySectionImageDescription": "A graphic of a blue combination lock lock on a yellow background. Inside the lock is the shape of a head with a question mark printed on the face.",
|
||||
"guidelines.helpfulSectionImageDescription": "A graphic of a piece of paper on top of a pink background. On the paper, there is a Scratch project with a white cat on a blue background. A pink pen with a heart on the cap is drawing a heart and a pencil is writing a comment.",
|
||||
"guidelines.remixSectionImageDescription": "A graphic of the Scratch \"remix\" swirl on a green background. Two hands move orange, blue, and purple Scratch blocks around. A paintbrush paints a green streak.",
|
||||
"guidelines.honestySectionImageDescription": "A graphic of a light blue compass on a purple background. There is a pink heart in the \"North\" position.",
|
||||
"guidelines.friendlySectionImageDescription": "A graphic of 5 hands with different skin tones using their pointer and middle fingers to create a star on a pink background with a pink star and yellow star in the center.",
|
||||
"guidelines.learnMoreSectionImageDescription": "A graphic of a box with a green arrow pointing inside of it with stars in the background."
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue