From c05ed8a6254bc82fda3ae0fd3934dc2cdcf7c82d Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 3 Dec 2019 19:53:16 +0100 Subject: [PATCH] Fix poll options not being selectable via keyboard (#12538) * Fix poll options not being selectable via keyboard Fixes #12384 * Improve styling of poll option checkboxes/radio buttons * Use more appropriate ARIA roles for poll options * Allow switching between single and multiple choice from keyboard * Coding style * Avoid using .bind() --- app/javascript/mastodon/components/poll.js | 28 ++++++++++++++++--- .../features/compose/components/poll_form.js | 11 ++++++++ app/javascript/styles/mastodon/polls.scss | 17 +++++++++++ 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/app/javascript/mastodon/components/poll.js b/app/javascript/mastodon/components/poll.js index 0edd064e06b..3a17e80e726 100644 --- a/app/javascript/mastodon/components/poll.js +++ b/app/javascript/mastodon/components/poll.js @@ -67,9 +67,7 @@ class Poll extends ImmutablePureComponent { } } - handleOptionChange = e => { - const { target: { value } } = e; - + _toggleOption = value => { if (this.props.poll.get('multiple')) { const tmp = { ...this.state.selected }; if (tmp[value]) { @@ -83,8 +81,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; @@ -135,7 +145,17 @@ class Poll extends ImmutablePureComponent { disabled={disabled} /> - {!showResults && } + {!showResults && ( + + )} {showResults && {!!voted && } {Math.round(percent)}% diff --git a/app/javascript/mastodon/features/compose/components/poll_form.js b/app/javascript/mastodon/features/compose/components/poll_form.js index f4cd71a76e1..81ab0ec1ac8 100644 --- a/app/javascript/mastodon/features/compose/components/poll_form.js +++ b/app/javascript/mastodon/features/compose/components/poll_form.js @@ -13,6 +13,8 @@ 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}}' }, @@ -50,6 +52,12 @@ class Option extends React.PureComponent { e.stopPropagation(); }; + handleCheckboxKeypress = e => { + if (e.key === 'Enter' || e.key === ' ') { + this.handleToggleMultiple(e); + } + } + onSuggestionsClearRequested = () => { this.props.onClearSuggestions(); } @@ -71,8 +79,11 @@ class Option extends React.PureComponent {