radio button for windowtheme

main
Mike Fix 6 years ago committed by Michael Fix
parent 1a2bb3f6d7
commit f3f421707b

@ -15,30 +15,34 @@ class ThemeSelect extends React.Component {
renderThemes() {
return WINDOW_THEMES.map(theme => {
const Img = WINDOW_THEMES_MAP[theme]
const checked = this.props.selected === theme
return (
<div
role="button"
tabIndex={0}
className={`theme ${this.props.selected === theme ? 'selected' : ''}`}
key={theme}
role="radio"
checked={checked}
aria-checked={checked}
tabIndex={checked ? 0 : -1}
onClick={this.select.bind(null, theme)}
value={theme}
>
<Img />
<style jsx>
{`
.theme {
[role='radio'] {
cursor: pointer;
margin-right: 8px;
outline: none;
}
.theme:last-of-type {
margin-right: 0px;
}
.selected :global(svg) {
[aria-checked='true'] :global(svg) {
border-radius: 3px;
border: solid 2px ${COLORS.SECONDARY};
}
[role='radio']:last-of-type {
margin-right: 0px;
}
`}
</style>
</div>
@ -49,8 +53,12 @@ class ThemeSelect extends React.Component {
render() {
return (
<div className="window-theme">
<span className="label">Theme</span>
<div className="themes">{this.renderThemes()}</div>
<span className="label" id="window-theme-label">
Theme
</span>
<div className="themes" role="radiogroup" aria-labelledby="window-theme-label">
{this.renderThemes()}
</div>
<style jsx>
{`
.window-theme {

Loading…
Cancel
Save