Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Fix poll options not being selectable via keyboard (#12538)

Browse source 
* 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()
This commit is contained in:
ThibG 2019-12-03 19:53:16 +01:00 • committed by Eugen Rochko
parent f1ef777d40
commit c05ed8a625
3 changed files with 52 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/javascript/mastodon/features/compose/components/poll_form.js
View file

@ -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 {
<span
className={classNames('poll__input', { checkbox: isPollMultiple })}
onClick={this.handleToggleMultiple}
onKeyPress={this.handleCheckboxKeypress}
role='button'
tabIndex='0'
title={intl.formatMessage(isPollMultiple ? messages.switchToMultiple : messages.switchToSingle)}
aria-label={intl.formatMessage(isPollMultiple ? messages.switchToMultiple : messages.switchToSingle)}
/>
<AutosuggestInput