Browser elements should respond to click events

The <FastClick> component wraps every other component in the codebase that handles user interaction in the browser. Ironically, this component does not actually support click events! It supports mousedown and touchstart/touchend, but click events are swallowed and ignored.

Not all users use a mouse or a touchscreen. If a user tries to navigate the website using a keyboard (or an assistive tech device that emulates a keyboard), the user will be totally unable to use Searchkit. (Keyboards can send click events by focusing on a clickable element like a <button>, and pressing spacebar.) In order to be accessible, Searchkit needs to support keyboard use.

I see two ways of addressing this issue: removing the <FastClick> component entirely, or making it support click events. I’m not sure which approach is better, but I’d like to start the discussion. Why does the <FastClick> component exist? Why is it specifically designed to swallow and ignore click events?

This is related to #359 (accessibility).

[singingwolfboy]

How would FastClick be able to reliably determine if there was an event dispatched by mousedown, when deciding whether or not to swallow a click event? If your concern is about performance, I would expect that holding on to prior events is going to cause a performance penalty.

There’s also a nice usability perk that comes from using the click event instead of the mousedown event – the user can mousedown on an element, change their mind, move the mouse off the element, and then release the mouse in order to cancel the impending event. It’s a little thing, but it’s a bit disappointing that you can’t do that with the way you’ve implemented FastClick.

I guess my question is, why is speed so important in this case? I agree that performance is an important metric, but not to the extent that it negates others like usability and accessibility.

[ssetem]

right at beginning of your code, something alone these lines

import {FastClick} from "searchkit"

FastClick.prototype.render = function(){
  return React.cloneElement(this.props.children, {
    onClick:this.props.handler
  })
}