diff --git a/app/soapbox/components/poll.js b/app/soapbox/components/poll.js
index f7f78db6b..ee22a9d1e 100644
--- a/app/soapbox/components/poll.js
+++ b/app/soapbox/components/poll.js
@@ -36,9 +36,7 @@ class Poll extends ImmutablePureComponent {
selected: {},
};
- handleOptionChange = e => {
- const { target: { value } } = e;
-
+ _toggleOption = value => {
if (this.props.poll.get('multiple')) {
const tmp = { ...this.state.selected };
if (tmp[value]) {
@@ -52,8 +50,20 @@ class Poll extends ImmutablePureComponent {
tmp[value] = true;
this.setState({ selected: tmp });
}
+ }
+
+ handleOptionChange = ({ target: { value } }) => {
+ this._toggleOption(value);
};
+ handleOptionKeyPress = (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ this._toggleOption(e.target.getAttribute('data-index'));
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }
+
handleVote = () => {
if (this.props.disabled) {
return;
@@ -105,7 +115,17 @@ class Poll extends ImmutablePureComponent {
disabled={disabled}
/>
- {!showResults && }
+ {!showResults && (
+
+ )}
{showResults &&
{!!voted && }
{Math.round(percent)}%
diff --git a/app/soapbox/features/compose/components/poll_form.js b/app/soapbox/features/compose/components/poll_form.js
index 8c26798a5..95d2cad7e 100644
--- a/app/soapbox/features/compose/components/poll_form.js
+++ b/app/soapbox/features/compose/components/poll_form.js
@@ -16,10 +16,11 @@ const messages = defineMessages({
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
+ switchToMultiple: { id: 'compose_form.poll.switch_to_multiple', defaultMessage: 'Change poll to allow multiple choices' },
+ switchToSingle: { id: 'compose_form.poll.switch_to_single', defaultMessage: 'Change poll to allow for a single choice' },
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
- hint: { id: 'compose_form.poll.type.hint', defaultMessage: 'Click to toggle poll type. Radio button (default) is single. Checkbox is multiple.' },
});
@injectIntl
@@ -63,6 +64,12 @@ class Option extends React.PureComponent {
this.props.onClearSuggestions();
}
+ handleCheckboxKeypress = e => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ this.handleToggleMultiple(e);
+ }
+ }
+
onSuggestionsFetchRequested = (token) => {
this.props.onFetchSuggestions(token);
}
@@ -80,9 +87,11 @@ class Option extends React.PureComponent {