From 4fa5dfd3afce96007b9446085540794dbfbe1c88 Mon Sep 17 00:00:00 2001
From: Tamlyn Rhodes <tamlyn@tamlyn.org>
Date: Wed, 6 Dec 2017 16:00:57 +0000
Subject: [PATCH] Improve accessibility of form controls
---
packages/ui/src/atoms/Checkbox.local.scss | 4 +++-
packages/ui/src/atoms/Menu.js | 14 +++++++++++++-
packages/ui/src/atoms/Radio.local.scss | 3 ++-
packages/ui/test/__snapshots__/Menu.test.js.snap | 1 +
4 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/packages/ui/src/atoms/Checkbox.local.scss b/packages/ui/src/atoms/Checkbox.local.scss
index 3c66c3b3a..8349ddc71 100644
--- a/packages/ui/src/atoms/Checkbox.local.scss
+++ b/packages/ui/src/atoms/Checkbox.local.scss
@@ -21,8 +21,9 @@
}
.root .input {
- display: none;
margin-right: 0.25rem;
+ opacity: 0;
+ position: absolute;
}
.root span::before {
@@ -37,6 +38,7 @@
width: 9px;
}
+.root input:focus + span::before,
.root:hover span::before {
//background-size: 100%;
background: var(--color-primary);
diff --git a/packages/ui/src/atoms/Menu.js b/packages/ui/src/atoms/Menu.js
index e1e23a051..ff22b84d5 100644
--- a/packages/ui/src/atoms/Menu.js
+++ b/packages/ui/src/atoms/Menu.js
@@ -30,6 +30,12 @@ class Menu extends React.Component {
this.props.onChange(selected)
}
+ handleKeyPress = (event, selected) => {
+ if (event.which === 13) {
+ this.handleSelect(selected)
+ }
+ }
+
optionLabel = value => {
const { options } = this.props
@@ -48,7 +54,7 @@ class Menu extends React.Component {
>
{label && <span className={classes.label}>{label}</span>}
- <div className={classes.main}>
+ <div className={classes.main} role="listbox">
<div className={classes.openerContainer}>
<button
className={classes.opener}
@@ -69,11 +75,17 @@ class Menu extends React.Component {
<div className={classes.options}>
{options.map(option => (
<div
+ aria-selected={option.value === selected}
className={classnames(classes.option, {
[classes.active]: option.value === selected,
})}
key={option.value}
onClick={() => this.handleSelect(option.value)}
+ onKeyPress={event =>
+ this.handleKeyPress(event, option.value)
+ }
+ role="option"
+ tabIndex="0"
>
{option.label || option.value}
</div>
diff --git a/packages/ui/src/atoms/Radio.local.scss b/packages/ui/src/atoms/Radio.local.scss
index 49f699cb1..c0bd14541 100644
--- a/packages/ui/src/atoms/Radio.local.scss
+++ b/packages/ui/src/atoms/Radio.local.scss
@@ -34,7 +34,8 @@
// hide the input
.input {
- display: none;
+ opacity: 0;
+ position: absolute;
}
/* pseudo-input */
diff --git a/packages/ui/test/__snapshots__/Menu.test.js.snap b/packages/ui/test/__snapshots__/Menu.test.js.snap
index dfbe9ad31..b487f640b 100644
--- a/packages/ui/test/__snapshots__/Menu.test.js.snap
+++ b/packages/ui/test/__snapshots__/Menu.test.js.snap
@@ -6,6 +6,7 @@ exports[`Menu Snapshot 1`] = `
>
<div
className="main"
+ role="listbox"
>
<div
className="openerContainer"
--
GitLab