Skip to content

Commit

Permalink
arrow keys to select skintone
Browse files Browse the repository at this point in the history
  • Loading branch information
Xindi Xu committed Jul 20, 2020
1 parent 30468ff commit 51dd4a9
Showing 1 changed file with 27 additions and 10 deletions.
37 changes: 27 additions & 10 deletions src/components/skins-dot.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import PropTypes from 'prop-types'

import Skins from './skins'

const focusOnElementBySkin = (el, skin) => {
const currentSkinEl = el.querySelector(`[data-skin="${skin}"]`)
currentSkinEl.focus()
}

export default class SkinsDot extends Skins {
constructor(props) {
super(props)
Expand All @@ -18,22 +23,33 @@ export default class SkinsDot extends Skins {

handleMenuClick() {
const { skin } = this.props
const currentSkinEl = this.skinTones.querySelector(`[data-skin="${skin}"]`)
currentSkinEl.focus()
focusOnElementBySkin(this.skinTones, skin)
this.setState({ opened: !this.state.opened })
}

handleKeyDown(event) {
if (event.keyCode === 13) {
event.preventDefault()
this.handleMenuClick(event)
}
}

handleSkinKeyDown(event) {
// if either enter or space is pressed, then execute
if (event.keyCode === 13 || event.keyCode === 32) {
event.preventDefault()
this.handleClick(event)
handleSkinKeyDown(e, skin) {
switch (e.key) {
case 'ArrowLeft':
focusOnElementBySkin(this.skinTones, skin - 1 < 1 ? 6 : skin - 1)
break

case 'ArrowRight':
focusOnElementBySkin(this.skinTones, skin + 1 > 6 ? 1 : skin + 1)
break

case 'Enter':
case 'Space':
this.handleClick(e)
this.skinTones.focus()
default:
break
}
}

Expand All @@ -59,8 +75,8 @@ export default class SkinsDot extends Skins {
>
<span
onClick={this.handleClick}
onKeyDown={this.handleSkinKeyDown}
tabIndex={opened ? '0' : ''}
onKeyDown={(e) => this.handleSkinKeyDown(e, skinTone)}
tabIndex={opened ? '0' : '-1'}
role="button"
{...(selected
? {
Expand All @@ -85,7 +101,8 @@ export default class SkinsDot extends Skins {
>
<div
{...(opened ? { role: 'menubar' } : {})}
tabIndex={opened ? '' : '0'}
tabIndex={'0'}
onFocus={() => console.log('focus')}
onClick={this.handleMenuClick}
onKeyDown={this.handleKeyDown}
ref={this.setSkinTonesRef}
Expand Down

0 comments on commit 51dd4a9

Please sign in to comment.