[Glitch] Fix poll options not being selectable via keyboard

Port c05ed8a625 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
main
ThibG 5 years ago committed by Thibaut Girka
parent 1e1293e3c8
commit c6ba870f00

@ -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 && <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'>
{!!voted && <Icon id='check' className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />}
{Math.round(percent)}%

@ -98,6 +98,23 @@
border-color: $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 {

Loading…
Cancel
Save