diff --git a/app/javascript/flavours/glitch/components/poll.js b/app/javascript/flavours/glitch/components/poll.js
index 2d2a7cbe01..62965df949 100644
--- a/app/javascript/flavours/glitch/components/poll.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss
index 95d8e510c5..b43da1e281 100644
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ b/app/javascript/flavours/glitch/styles/polls.scss
@@ -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 {