Accessible checkbox in react

checkbox.js

import React, { PureComponent } from 'react';
import cx from 'classnames';

import './checkbox.styl';

const SPACE_KEY = 32;

const filterSpacePressed = (event, callback) => {
  if (event.which === SPACE_KEY) {
    event.preventDefault();
    callback(event);
  }
};

const Checkbox = ({ disabled, checked, onChange }) =>
  <div
    role="checkbox"
    aria-checked={checked}
    tabIndex={disabled ? -1 : 0}
    className={cx('roleCheckbox', { checked, disabled })}
    onClick={!disabled && onChange}
    onKeyDown={!disabled && (event => filterSpacePressed(event, onChange))}>
    {checked ? '✔' : null}
  </div>;

export default Checkbox;

checkbox.styl

.roleCheckbox
  display flex
  align-items center
  justify-content center
  border-radius 4px
  border 2px solid #999

  width 26px
  height 26px

  svg
    fill white

  &.checked
    background-color #2574a8
    border-color #2574a8

  &.disabled
    background-color #999
    border-color #999