Bug 1790490 - Added alt tag div & strings for MR onboarding images r=mviar,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D159770
This commit is contained in:
Emily McMinn 2022-10-24 17:50:06 +00:00
parent c53abb7b6e
commit 5351a51a4b
7 changed files with 83 additions and 1 deletions

View File

@ -819,7 +819,11 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
background: content.background,
"--mr-secondary-background-position-y": content.split_narrow_bkg_position
} : {}
}, content.hero_image ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_HeroImage__WEBPACK_IMPORTED_MODULE_8__.HeroImage, {
}, content.image_alt_text ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "sr-only image-alt",
role: "img",
"data-l10n-id": content.image_alt_text.string_id
}) : null, content.hero_image ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_HeroImage__WEBPACK_IMPORTED_MODULE_8__.HeroImage, {
url: content.hero_image.url
}) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "message-text"

View File

@ -549,6 +549,10 @@ html {
text-shadow: none;
margin-inline: 40px 0;
}
.onboardingContainer .screen[pos=split] .section-secondary .image-alt {
width: inherit;
height: inherit;
}
.onboardingContainer .screen[pos=split] .section-secondary .hero-image {
flex: 1;
display: flex;

View File

@ -283,6 +283,9 @@ const MR_ABOUT_WELCOME_DEFAULT = {
content: {
position: "split",
split_narrow_bkg_position: "-155px",
image_alt_text: {
string_id: "mr2022-onboarding-pin-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-pintaskbar.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,
@ -370,6 +373,9 @@ const MR_ABOUT_WELCOME_DEFAULT = {
content: {
position: "split",
split_narrow_bkg_position: "-60px",
image_alt_text: {
string_id: "mr2022-onboarding-default-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-settodefault.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,
@ -405,6 +411,9 @@ const MR_ABOUT_WELCOME_DEFAULT = {
content: {
position: "split",
split_narrow_bkg_position: "-42px",
image_alt_text: {
string_id: "mr2022-onboarding-import-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-import.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,
@ -442,6 +451,9 @@ const MR_ABOUT_WELCOME_DEFAULT = {
content: {
position: "split",
split_narrow_bkg_position: "-65px",
image_alt_text: {
string_id: "mr2022-onboarding-colorways-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-colorways.avif') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,
@ -580,6 +592,9 @@ const MR_ABOUT_WELCOME_DEFAULT = {
content: {
position: "split",
split_narrow_bkg_position: "-160px",
image_alt_text: {
string_id: "mr2022-onboarding-mobile-download-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-mobilecrosspromo.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,
@ -624,6 +639,9 @@ const MR_ABOUT_WELCOME_DEFAULT = {
content: {
position: "split",
split_narrow_bkg_position: "-228px",
image_alt_text: {
string_id: "mr2022-onboarding-gratitude-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-gratitude.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,

View File

@ -483,6 +483,11 @@ html {
margin-inline: 40px 0;
}
.image-alt {
width: inherit;
height: inherit;
}
.hero-image {
flex: 1;
display: flex;

View File

@ -240,6 +240,13 @@ export class ProtonScreen extends React.PureComponent {
: {}
}
>
{content.image_alt_text ? (
<div
className="sr-only image-alt"
role="img"
data-l10n-id={content.image_alt_text.string_id}
/>
) : null}
{content.hero_image ? (
<HeroImage url={content.hero_image.url} />
) : (

View File

@ -146,6 +146,9 @@ const BASE_MESSAGES = () => [
content: {
position: "split",
split_narrow_bkg_position: "-155px",
image_alt_text: {
string_id: "mr2022-onboarding-pin-image-alt",
},
progress_bar: "true",
background:
"url('chrome://activity-stream/content/data/content/assets/mr-pintaskbar.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
@ -204,6 +207,9 @@ const BASE_MESSAGES = () => [
content: {
position: "split",
split_narrow_bkg_position: "-60px",
image_alt_text: {
string_id: "mr2022-onboarding-default-image-alt",
},
progress_bar: "true",
background:
"url('chrome://activity-stream/content/data/content/assets/mr-settodefault.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
@ -239,6 +245,9 @@ const BASE_MESSAGES = () => [
content: {
position: "split",
split_narrow_bkg_position: "-42px",
image_alt_text: {
string_id: "mr2022-onboarding-import-image-alt",
},
progress_bar: "true",
background:
"url('chrome://activity-stream/content/data/content/assets/mr-import.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
@ -276,6 +285,9 @@ const BASE_MESSAGES = () => [
content: {
position: "split",
split_narrow_bkg_position: "-65px",
image_alt_text: {
string_id: "mr2022-onboarding-colorways-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-colorways.avif') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,
@ -430,6 +442,9 @@ const BASE_MESSAGES = () => [
content: {
position: "split",
split_narrow_bkg_position: "-160px",
image_alt_text: {
string_id: "mr2022-onboarding-mobile-download-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-mobilecrosspromo.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
progress_bar: true,
@ -474,6 +489,9 @@ const BASE_MESSAGES = () => [
content: {
position: "split",
split_narrow_bkg_position: "-100px",
image_alt_text: {
string_id: "mr2022-onboarding-pin-private-image-alt",
},
progress_bar: "true",
background:
"url('chrome://activity-stream/content/data/content/assets/mr-pinprivate.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
@ -514,6 +532,9 @@ const BASE_MESSAGES = () => [
content: {
position: "split",
split_narrow_bkg_position: "-80px",
image_alt_text: {
string_id: "mr2022-onboarding-privacy-segmentation-image-alt",
},
progress_bar: "true",
dual_action_buttons: true,
background:
@ -570,6 +591,9 @@ const BASE_MESSAGES = () => [
position: "split",
progress_bar: "true",
split_narrow_bkg_position: "-228px",
image_alt_text: {
string_id: "mr2022-onboarding-gratitude-image-alt",
},
background:
"url('chrome://activity-stream/content/data/content/assets/mr-gratitude.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
logo: {},

View File

@ -416,3 +416,23 @@ mr2022-onboarding-gratitude-secondary-button-label = Start browsing
onboarding-infrequent-import-title = Make yourself at home
onboarding-infrequent-import-subtitle = Whether youre settling in or just stopping by, remember you can import your bookmarks, passwords, and more.
onboarding-infrequent-import-primary-button = Import to { -brand-short-name }
## MR2022 Illustration alt tags
## Descriptive tags for illustrations used by screen readers and other assistive tech
mr2022-onboarding-pin-image-alt =
.aria-label = Person working on a laptop surrounded by stars and flowers
mr2022-onboarding-default-image-alt =
.aria-label = Person hugging the { -brand-product-name } logo
mr2022-onboarding-import-image-alt =
.aria-label = Person riding a skateboard with a box of software icons
mr2022-onboarding-mobile-download-image-alt =
.aria-label = Frogs hopping across lily pads with a QR code to download { -brand-product-name } for mobile in the center
mr2022-onboarding-pin-private-image-alt =
.aria-label = Magic wand makes { -brand-product-name } private browsing logo appear out of a hat
mr2022-onboarding-privacy-segmentation-image-alt =
.aria-label = Light-skinned and dark-skinned hands high five
mr2022-onboarding-gratitude-image-alt =
.aria-label = View of a sunset through a window with a fox and a house plant on a windowsill
mr2022-onboarding-colorways-image-alt =
.aria-label = A hand spray paints a colorful collage of a green eye, orange shoe, red basketball, purple headphones, blue heart, and yellow crown