make alt optional for labeled buttons

Also add labels to `defineMessages` for localization. Thanks @fsih!
This commit is contained in:
Matthew Taylor 2017-10-31 15:03:51 -04:00
parent 858a4fbef3
commit f2e031e787
2 changed files with 61 additions and 19 deletions

View file

@ -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

View file

@ -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>