add tooltip Esc handler to comply with WAI-ARIA tooltip interaction desc

This commit is contained in:
KDSBrowne 2018-01-11 09:05:32 -08:00
parent 36980f7525
commit 645f71b785

View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import Tippy from 'tippy.js';
import _ from 'lodash';
import cx from 'classnames';
import { ESCAPE } from '/imports/utils/keyCodes';
const propTypes = {
title: PropTypes.string.isRequired,
@ -22,6 +23,8 @@ class Tooltip extends Component {
this.tippySelectorId = _.uniqueId('tippy-');
this.onShow = this.onShow.bind(this);
this.onHide = this.onHide.bind(this);
this.handleEscapeHide = this.handleEscapeHide.bind(this);
this.delay = [150, 50];
this.dynamicTitle = true;
}
@ -36,6 +39,7 @@ class Tooltip extends Component {
dynamicTitle: this.dynamicTitle,
delay: this.delay,
onShow: this.onShow,
onHide: this.onHide,
touchHold: true,
};
@ -43,11 +47,23 @@ class Tooltip extends Component {
}
onShow() {
document.addEventListener('keyup', this.handleEscapeHide);
window.setTimeout(() => {
this.tooltip.tooltips[0].hide();
document.removeEventListener('keyup', this.handleEscapeHide);
}, 5000);
}
onHide() {
document.removeEventListener('keyup', this.handleEscapeHide);
}
handleEscapeHide(e) {
if (e.keyCode !== ESCAPE) return;
this.tooltip.tooltips[0].hide();
}
render() {
const {
children,