From f2e031e787b5f71ab16282dae4907e6cb64dca7e Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Tue, 31 Oct 2017 15:03:51 -0400
Subject: [PATCH] make alt optional for labeled buttons

Also add labels to `defineMessages` for localization. Thanks @fsih!
---
 .../labeled-icon-button.jsx                   |  2 +-
 src/components/paint-editor/paint-editor.jsx  | 78 ++++++++++++++-----
 2 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/src/components/labeled-icon-button/labeled-icon-button.jsx b/src/components/labeled-icon-button/labeled-icon-button.jsx
index c08660d6..45555f36 100644
--- a/src/components/labeled-icon-button/labeled-icon-button.jsx
+++ b/src/components/labeled-icon-button/labeled-icon-button.jsx
@@ -34,7 +34,7 @@ const LabeledIconButton = ({
 
 LabeledIconButton.propTypes = {
     className: PropTypes.string,
-    imgAlt: PropTypes.string.isRequired,
+    imgAlt: PropTypes.string,
     imgSrc: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.string.isRequired
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 32cc0a27..0a13e9f6 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -50,6 +50,56 @@ const messages = defineMessages({
         id: 'paint.paintEditor.costume',
         description: 'Label for the name of a sound',
         defaultMessage: 'Costume'
+    },
+    group: {
+        defaultMessage: 'Group',
+        description: 'Label for the button to group shapes',
+        id: 'paint.paintEditor.group'
+    },
+    ungroup: {
+        defaultMessage: 'Ungroup',
+        description: 'Label for the button to ungroup shapes',
+        id: 'paint.paintEditor.ungroup'
+    },
+    undo: {
+        defaultMessage: 'Undo',
+        description: 'Alt to image for the button to undo an action',
+        id: 'paint.paintEditor.undo'
+    },
+    redo: {
+        defaultMessage: 'Redo',
+        description: 'Alt to image for the button to undo an action',
+        id: 'paint.paintEditor.redo'
+    },
+    forward: {
+        defaultMessage: 'Forward',
+        description: 'Label for the `Send forward on canvas` button',
+        id: 'paint.paintEditor.forward'
+    },
+    backward: {
+        defaultMessage: 'Backward',
+        description: 'Label for the `Send backward on canvas` button',
+        id: 'paint.paintEditor.backward'
+    },
+    front: {
+        defaultMessage: 'Front',
+        description: 'Label for the `Send to front of canvas` button',
+        id: 'paint.paintEditor.front'
+    },
+    back: {
+        defaultMessage: 'Back',
+        description: 'Label for the `Send to back of canvas` button',
+        id: 'paint.paintEditor.back'
+    },
+    copy: {
+        defaultMessage: 'Copy',
+        description: 'Label for the copy button',
+        id: 'paint.paintEditor.copy'
+    },
+    paste: {
+        defaultMessage: 'Paste',
+        description: 'Label for the paste button',
+        id: 'paint.paintEditor.paste'
     }
 });
 
@@ -101,7 +151,7 @@ class PaintEditorComponent extends React.Component {
                                         onClick={this.props.onUndo}
                                     >
                                         <img
-                                            alt="Undo"
+                                            alt={this.props.intl.formatMessage(messages.undo)}
                                             className={styles.buttonGroupButtonIcon}
                                             src={undoIcon}
                                         />
@@ -119,7 +169,7 @@ class PaintEditorComponent extends React.Component {
                                         onClick={this.props.onRedo}
                                     >
                                         <img
-                                            alt="Redo"
+                                            alt={this.props.intl.formatMessage(messages.redo)}
                                             className={styles.buttonGroupButtonIcon}
                                             src={redoIcon}
                                         />
@@ -131,16 +181,14 @@ class PaintEditorComponent extends React.Component {
                             <InputGroup className={styles.modDashedBorder}>
                                 <LabeledIconButton
                                     disabled={!shouldShowGroup()}
-                                    imgAlt="Group"
                                     imgSrc={groupIcon}
-                                    title="Group"
+                                    title={this.props.intl.formatMessage(messages.group)}
                                     onClick={this.props.onGroup}
                                 />
                                 <LabeledIconButton
                                     disabled={!shouldShowUngroup()}
-                                    imgAlt="Ungroup"
                                     imgSrc={ungroupIcon}
-                                    title="Ungroup"
+                                    title={this.props.intl.formatMessage(messages.ungroup)}
                                     onClick={this.props.onUngroup}
                                 />
                             </InputGroup>
@@ -149,16 +197,14 @@ class PaintEditorComponent extends React.Component {
                             <InputGroup className={styles.modDashedBorder}>
                                 <LabeledIconButton
                                     disabled={!shouldShowBringForward()}
-                                    imgAlt="Send Forward"
                                     imgSrc={sendForwardIcon}
-                                    title="Forward"
+                                    title={this.props.intl.formatMessage(messages.forward)}
                                     onClick={this.props.onSendForward}
                                 />
                                 <LabeledIconButton
                                     disabled={!shouldShowSendBackward()}
-                                    imgAlt="Send Backward"
                                     imgSrc={sendBackwardIcon}
-                                    title="Backward"
+                                    title={this.props.intl.formatMessage(messages.backward)}
                                     onClick={this.props.onSendBackward}
                                 />
                             </InputGroup>
@@ -167,16 +213,14 @@ class PaintEditorComponent extends React.Component {
                             <InputGroup>
                                 <LabeledIconButton
                                     disabled={!shouldShowBringForward()}
-                                    imgAlt="Send to Front"
                                     imgSrc={sendFrontIcon}
-                                    title="Front"
+                                    title={this.props.intl.formatMessage(messages.front)}
                                     onClick={this.props.onSendToFront}
                                 />
                                 <LabeledIconButton
                                     disabled={!shouldShowSendBackward()}
-                                    imgAlt="Send to Back"
                                     imgSrc={sendBackIcon}
-                                    title="Back"
+                                    title={this.props.intl.formatMessage(messages.back)}
                                     onClick={this.props.onSendToBack}
                                 />
                             </InputGroup>
@@ -217,16 +261,14 @@ class PaintEditorComponent extends React.Component {
                             <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
                                 <LabeledIconButton
                                     disabled
-                                    imgAlt="Copy Icon"
                                     imgSrc={copyIcon}
-                                    title="Copy"
+                                    title={this.props.intl.formatMessage(messages.copy)}
                                     onClick={function () {}}
                                 />
                                 <LabeledIconButton
                                     disabled
-                                    imgAlt="Paste Icon"
                                     imgSrc={pasteIcon}
-                                    title="Paste"
+                                    title={this.props.intl.formatMessage(messages.paste)}
                                     onClick={function () {}}
                                 />
                             </InputGroup>