Skip to content

Commit 435f44f

Browse files
AllegroFoxAllegroFox
authored
Bug 1551711 - Added alt-text prop to all snippet schemas that include an icon. (mozilla#5102)
1 parent cac30c6 commit 435f44f

File tree

7 files changed

+44
-9
lines changed

7 files changed

+44
-9
lines changed

‎content-src/asrouter/templates/EOYSnippet/EOYSnippet.schema.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@
8080
"type": "string",
8181
"description": "Snippet icon. Dark theme variant. 64x64px. SVG or PNG preferred."
8282
},
83+
"icon_alt_text": {
84+
"type": "string",
85+
"description": "Alt text for accessibility",
86+
"default": ""
87+
},
8388
"title": {
8489
"allOf": [
8590
{"$ref": "#/definitions/plainText"},

‎content-src/asrouter/templates/SimpleBelowSearchSnippet/SimpleBelowSearchSnippet.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {safeURI} from "../../template-utils";
44
import {SnippetBase} from "../../components/SnippetBase/SnippetBase";
55

66
const DEFAULT_ICON_PATH = "chrome://branding/content/icon64.png";
7-
// Alt text if available; in the future this should come from the server. See bug 1551711
7+
// Alt text placeholder in case the prop from the server isn't available
88
const ICON_ALT_TEXT = "";
99

1010
export class SimpleBelowSearchSnippet extends React.PureComponent {
@@ -26,8 +26,8 @@ export class SimpleBelowSearchSnippet extends React.PureComponent {
2626
}
2727

2828
return (<SnippetBase {...props} className={className} textStyle={this.props.textStyle}>
29-
<img src={safeURI(props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-light-theme" alt={ICON_ALT_TEXT} />
30-
<img src={safeURI(props.content.icon_dark_theme || props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-dark-theme" alt={ICON_ALT_TEXT} />
29+
<img src={safeURI(props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-light-theme" alt={props.content.icon_alt_text || ICON_ALT_TEXT} />
30+
<img src={safeURI(props.content.icon_dark_theme || props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-dark-theme" alt={props.content.icon_alt_text || ICON_ALT_TEXT} />
3131
<div>
3232
<p className="body">{this.renderText()}</p>
3333
{this.props.extraContent}

‎content-src/asrouter/templates/SimpleBelowSearchSnippet/SimpleBelowSearchSnippet.schema.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@
2929
"type": "string",
3030
"description": "Snippet icon. Dark theme variant. 64x64px. SVG or PNG preferred."
3131
},
32+
"icon_alt_text": {
33+
"type": "string",
34+
"description": "Alt text describing icon for screen readers",
35+
"default": ""
36+
},
3237
"block_button_text": {
3338
"type": "string",
3439
"description": "Tooltip text used for dismiss button.",

‎content-src/asrouter/templates/SimpleSnippet/SimpleSnippet.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {safeURI} from "../../template-utils";
66
import {SnippetBase} from "../../components/SnippetBase/SnippetBase";
77

88
const DEFAULT_ICON_PATH = "chrome://branding/content/icon64.png";
9-
// Alt text if available; in the future this should come from the server. See bug 1551711
9+
// Alt text placeholder in case the prop from the server isn't available
1010
const ICON_ALT_TEXT = "";
1111

1212
export class SimpleSnippet extends React.PureComponent {
@@ -131,8 +131,8 @@ export class SimpleSnippet extends React.PureComponent {
131131
return (<SnippetBase {...props} className={className} textStyle={this.props.textStyle}>
132132
{sectionHeader}
133133
<ConditionalWrapper condition={sectionHeader} wrap={this.wrapSnippetContent}>
134-
<img src={safeURI(props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-light-theme" alt={ICON_ALT_TEXT} />
135-
<img src={safeURI(props.content.icon_dark_theme || props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-dark-theme" alt={ICON_ALT_TEXT} />
134+
<img src={safeURI(props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-light-theme" alt={props.content.icon_alt_text || ICON_ALT_TEXT} />
135+
<img src={safeURI(props.content.icon_dark_theme || props.content.icon) || DEFAULT_ICON_PATH} className="icon icon-dark-theme" alt={props.content.icon_alt_text || ICON_ALT_TEXT} />
136136
<div>
137137
{this.renderTitle()} <p className="body">{this.renderText()}</p>
138138
{this.props.extraContent}

‎content-src/asrouter/templates/SimpleSnippet/SimpleSnippet.schema.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@
3939
"type": "string",
4040
"description": "Snippet icon, dark theme variant. 64x64px. SVG or PNG preferred."
4141
},
42+
"icon_alt_text": {
43+
"type": "string",
44+
"description": "Alt text describing icon for screen readers",
45+
"default": ""
46+
},
4247
"title_icon": {
4348
"type": "string",
4449
"description": "Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."
@@ -47,6 +52,11 @@
4752
"type": "string",
4853
"description": "Small icon that shows up before the title / text. Dark theme variant. 16x16px. SVG or PNG preferred. Grayscale."
4954
},
55+
"title_icon_alt_text": {
56+
"type": "string",
57+
"description": "Alt text describing title icon for screen readers",
58+
"default": ""
59+
},
5060
"button_action": {
5161
"type": "string",
5262
"description": "The type of action the button should trigger."

‎content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {safeURI} from "../../template-utils";
55
import {SimpleSnippet} from "../SimpleSnippet/SimpleSnippet";
66
import {SnippetBase} from "../../components/SnippetBase/SnippetBase";
77

8-
// Alt text if available; in the future this should come from the server. See bug 1551711
8+
// Alt text placeholder in case the prop from the server isn't available
99
const ICON_ALT_TEXT = "";
1010

1111
export class SubmitFormSnippet extends React.PureComponent {
@@ -168,8 +168,8 @@ export class SubmitFormSnippet extends React.PureComponent {
168168
return (<SnippetBase {...this.props} className={containerClass} footerDismiss={true}>
169169
{content.scene2_icon ?
170170
<div className="scene2Icon">
171-
<img src={safeURI(content.scene2_icon)} className="icon-light-theme" alt={ICON_ALT_TEXT} />
172-
<img src={safeURI(content.scene2_icon_dark_theme || content.scene2_icon)} className="icon-dark-theme" alt={ICON_ALT_TEXT} />
171+
<img src={safeURI(content.scene2_icon)} className="icon-light-theme" alt={content.scene2_icon_alt_text || ICON_ALT_TEXT} />
172+
<img src={safeURI(content.scene2_icon_dark_theme || content.scene2_icon)} className="icon-dark-theme" alt={content.scene2_icon_alt_text || ICON_ALT_TEXT} />
173173
</div> : null}
174174
<div className="message">
175175
<p>

‎content-src/asrouter/templates/SubmitFormSnippet/SubmitFormSnippet.schema.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@
5959
"type": "string",
6060
"description": "Snippet icon. Dark theme variant. 64x64px. SVG or PNG preferred."
6161
},
62+
"scene1_icon_alt_text": {
63+
"type": "string",
64+
"description": "Alt text describing scene1 icon for screen readers",
65+
"default": ""
66+
},
6267
"scene1_title_icon": {
6368
"type": "string",
6469
"description": "Small icon that shows up before the title / text. 16x16px. SVG or PNG preferred. Grayscale."
@@ -67,6 +72,11 @@
6772
"type": "string",
6873
"description": "Small icon that shows up before the title / text. Dark theme variant. 16x16px. SVG or PNG preferred. Grayscale."
6974
},
75+
"scene1_title_icon_alt_text": {
76+
"type": "string",
77+
"description": "Alt text describing scene1 title icon for screen readers",
78+
"default": ""
79+
},
7080
"form_action": {
7181
"type": "string",
7282
"description": "Endpoint to submit form data."
@@ -115,6 +125,11 @@
115125
"type": "string",
116126
"description": "(send to device) Image to display above the form. Dark theme variant. 98x98px. SVG or PNG preferred."
117127
},
128+
"scene2_icon_alt_text": {
129+
"type": "string",
130+
"description": "Alt text describing scene2 icon for screen readers",
131+
"default": ""
132+
},
118133
"scene2_newsletter": {
119134
"type": "string",
120135
"description": "Newsletter/basket id user is subscribing to. Must be a value from the 'Slug' column here: https://basket.mozilla.org/news/. Default 'mozilla-foundation'."

0 commit comments

Comments
 (0)