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()lolsob-rspec
parent
f00f6bdd36
commit
c53ba20166
|
@ -67,9 +67,7 @@ class Poll extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleOptionChange = e => {
|
_toggleOption = value => {
|
||||||
const { target: { value } } = e;
|
|
||||||
|
|
||||||
if (this.props.poll.get('multiple')) {
|
if (this.props.poll.get('multiple')) {
|
||||||
const tmp = { ...this.state.selected };
|
const tmp = { ...this.state.selected };
|
||||||
if (tmp[value]) {
|
if (tmp[value]) {
|
||||||
|
@ -83,8 +81,20 @@ class Poll extends ImmutablePureComponent {
|
||||||
tmp[value] = true;
|
tmp[value] = true;
|
||||||
this.setState({ selected: tmp });
|
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 = () => {
|
handleVote = () => {
|
||||||
if (this.props.disabled) {
|
if (this.props.disabled) {
|
||||||
return;
|
return;
|
||||||
|
@ -135,7 +145,17 @@ class Poll extends ImmutablePureComponent {
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{!showResults && <span className={classNames('poll__input', { checkbox: poll.get('multiple'), active })} />}
|
{!showResults && (
|
||||||
|
<span
|
||||||
|
className={classNames('poll__input', { checkbox: poll.get('multiple'), active })}
|
||||||
|
tabIndex='0'
|
||||||
|
role={poll.get('multiple') ? 'checkbox' : 'radio'}
|
||||||
|
onKeyPress={this.handleOptionKeyPress}
|
||||||
|
aria-checked={active}
|
||||||
|
aria-label={option.get('title')}
|
||||||
|
data-index={optionIndex}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{showResults && <span className='poll__number'>
|
{showResults && <span className='poll__number'>
|
||||||
{!!voted && <Icon id='check' className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
|
{!!voted && <Icon id='check' className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
|
||||||
{Math.round(percent)}%
|
{Math.round(percent)}%
|
||||||
|
|
|
@ -13,6 +13,8 @@ const messages = defineMessages({
|
||||||
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
|
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
|
||||||
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
|
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
|
||||||
poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
|
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}}' },
|
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
|
||||||
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
|
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
|
||||||
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
|
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
|
||||||
|
@ -50,6 +52,12 @@ class Option extends React.PureComponent {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleCheckboxKeypress = e => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
this.handleToggleMultiple(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onSuggestionsClearRequested = () => {
|
onSuggestionsClearRequested = () => {
|
||||||
this.props.onClearSuggestions();
|
this.props.onClearSuggestions();
|
||||||
}
|
}
|
||||||
|
@ -71,8 +79,11 @@ class Option extends React.PureComponent {
|
||||||
<span
|
<span
|
||||||
className={classNames('poll__input', { checkbox: isPollMultiple })}
|
className={classNames('poll__input', { checkbox: isPollMultiple })}
|
||||||
onClick={this.handleToggleMultiple}
|
onClick={this.handleToggleMultiple}
|
||||||
|
onKeyPress={this.handleCheckboxKeypress}
|
||||||
role='button'
|
role='button'
|
||||||
tabIndex='0'
|
tabIndex='0'
|
||||||
|
title={intl.formatMessage(isPollMultiple ? messages.switchToMultiple : messages.switchToSingle)}
|
||||||
|
aria-label={intl.formatMessage(isPollMultiple ? messages.switchToMultiple : messages.switchToSingle)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AutosuggestInput
|
<AutosuggestInput
|
||||||
|
|
|
@ -91,6 +91,23 @@
|
||||||
border-color: $valid-value-color;
|
border-color: $valid-value-color;
|
||||||
background: $valid-value-color;
|
background: $valid-value-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
border-width: 4px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
outline: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
outline: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__number {
|
&__number {
|
||||||
|
|
Loading…
Reference in New Issue