React-tooltip: Keyboard accessible tooltip

[abijames]

I am looking for a customisable tooltip to use in a project using React but it needs to be accessible to keyboard users (and screen readers).

Currently react-tooltip only activates on hover. To be accessible it needs to activate when focus is on the element (onfocus) and then close if ESC is pressed (as documented in https://www.w3.org/TR/wai-aria-practices/#tooltip).

Is this in your roadmap? Or can you point me to the events that would need to be changed to start the tooltip when the element is in focus?

[wwayne]

Yo can take a look at the attribute event, it may satisfy your requirement, <ReactTooltip event='focus' /> or <p data-tip='...' data-event='focus'>
If it not, you can try to update this method, that's the closet way to satisfy your requirement I think.

[mackbrowne]

@wwayne is there a good way to do this yet? I need the exact same thing. I've determined the key code i need for esc is 27. How can i close the tooltip when this key is pressed using the event functionality you mentioned above?

[luknl]

Hi, I was able to make it work this way, with onFocus, and onBlur:

<button
  type="button"
  aria-label="Close"
  data-tip="Delete"
  data-for="deleteDocument"
  // delete document (on click, and when selected with keyboard and pressing "enter" (as it's type button)
  onClick={() => this.delete(document)}
  // show/hide tooltip on element focus/blur
  onFocus={(e) => ReactTooltip.show(e.target)}
  onBlur={(e) => ReactTooltip.hide(e.target)}
>Delete icon</button>
<ReactTooltip id="deleteDocument" effect="solid" />

Hope it helps!