add tooltip Esc handler to comply with WAI-ARIA tooltip interaction desc
This commit is contained in:
parent
36980f7525
commit
645f71b785
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user