diff --git a/packages/ui/src/atoms/Checkbox.local.scss b/packages/ui/src/atoms/Checkbox.local.scss index 3c66c3b3a2ed0f1472126755f2e553b155a3ac39..8349ddc71bc9e61376bb4e60c95c937b0a2c15fe 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 e1e23a051b40c41c37b6c5da0dd3991f39f1ed39..ff22b84d5cb196c7d1169b58bd2e08a5f3acc58f 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 49f699cb136a177a36311a8d45eba9118c982e38..c0bd14541b8aab21c1bc8493452736d5823cee40 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 dfbe9ad318925c3ed9e42427e4ac528348d3e5e5..b487f640b9118fc55462cdbf88f072f2ae79af33 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"