react-tooltip 4.2.14 → 4.2.18

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [4.2.18](https://github.com/wwayne/react-tooltip/compare/v4.2.17...v4.2.18) (2021-04-25)
+
+
+### Bug Fixes
+
+* **src/index.js:** add accessibility support for tabbing ([#695](https://github.com/wwayne/react-tooltip/issues/695)) ([ae936a5](https://github.com/wwayne/react-tooltip/commit/ae936a5))
+
+## [4.2.17](https://github.com/wwayne/react-tooltip/compare/v4.2.16...v4.2.17) (2021-03-26)
+
+
+### Bug Fixes
+
+* **type:** added role property to types ([#679](https://github.com/wwayne/react-tooltip/issues/679)) ([9b49395](https://github.com/wwayne/react-tooltip/commit/9b49395))
+
+## [4.2.16](https://github.com/wwayne/react-tooltip/compare/v4.2.15...v4.2.16) (2021-03-26)
+
+
+### Bug Fixes
+
+* **index.js:** fix exception when testing with Jest ([#682](https://github.com/wwayne/react-tooltip/issues/682)) ([f885f1f](https://github.com/wwayne/react-tooltip/commit/f885f1f))
+
+## [4.2.15](https://github.com/wwayne/react-tooltip/compare/v4.2.14...v4.2.15) (2021-02-26)
+
+
+### Bug Fixes
+
+* do not delay show if tooltip is already shown ([#676](https://github.com/wwayne/react-tooltip/issues/676)) ([e8b9d84](https://github.com/wwayne/react-tooltip/commit/e8b9d84))
+
 ## [4.2.14](https://github.com/wwayne/react-tooltip/compare/v4.2.13...v4.2.14) (2021-02-16)
 
 

package/dist/index.es.js

@@ -1171,6 +1171,7 @@ function (_React$Component) {
       var domRoot;
 
       switch (parentNode.constructor.name) {
+        case 'Document':
         case 'HTMLDocument':
           domRoot = parentNode.head;
           break;
@@ -1283,12 +1284,14 @@ function (_React$Component) {
           }
 
           target.addEventListener('mouseenter', _this3.showTooltip, isCaptureMode);
+          target.addEventListener('focus', _this3.showTooltip, isCaptureMode);
 
           if (effect === 'float') {
             target.addEventListener('mousemove', _this3.updateTooltip, isCaptureMode);
           }
 
           target.addEventListener('mouseleave', _this3.hideTooltip, isCaptureMode);
+          target.addEventListener('blur', _this3.showTooltip, isCaptureMode);
         });
       } // Global event to hide tooltip
 
@@ -1402,6 +1405,11 @@ function (_React$Component) {
         scrollHide = e.currentTarget.getAttribute('data-scroll-hide') === 'true';
       } else if (this.props.scrollHide != null) {
         scrollHide = this.props.scrollHide;
+      } // adding aria-describedby to target to make tooltips read by screen readers
+
+
+      if (e && e.currentTarget && e.currentTarget.setAttribute) {
+        e.currentTarget.setAttribute('aria-describedby', this.state.uuid);
       } // Make sure the correct place is set
 
 
@@ -1488,7 +1496,6 @@ function (_React$Component) {
           disable = _this$state.disable;
       var afterShow = this.props.afterShow;
       var placeholder = this.getTooltipContent();
-      var delayTime = parseInt(delayShow, 10);
       var eventTarget = e.currentTarget || e.target; // Check if the mouse is actually over the tooltip, if so don't hide the tooltip
 
       if (this.mouseOnToolTip()) {
@@ -1500,6 +1507,8 @@ function (_React$Component) {
         return;
       }
 
+      var delayTime = !this.state.show ? parseInt(delayShow, 10) : 0;
+
       var updateState = function updateState() {
         if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) {
           var isInvisible = !_this5.state.show;
@@ -1520,7 +1529,7 @@ function (_React$Component) {
 
       clearTimeout(this.delayShowLoop);
 
-      if (delayShow) {
+      if (delayTime) {
         this.delayShowLoop = setTimeout(updateState, delayTime);
       } else {
         updateState();
@@ -1575,6 +1584,11 @@ function (_React$Component) {
           return ele === e.currentTarget;
         });
         if (!isMyElement || !this.state.show) return;
+      } // clean up aria-describedby when hiding tooltip
+
+
+      if (e && e.currentTarget && e.currentTarget.removeAttribute) {
+        e.currentTarget.removeAttribute('aria-describedby');
       }
 
       var resetState = function resetState() {
@@ -1696,7 +1710,8 @@ function (_React$Component) {
           extraClass = _this$state3.extraClass,
           html = _this$state3.html,
           ariaProps = _this$state3.ariaProps,
-          disable = _this$state3.disable;
+          disable = _this$state3.disable,
+          uuid = _this$state3.uuid;
       var content = this.getTooltipContent();
       var isEmptyTip = this.isEmptyTip(content);
       var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border);
@@ -1715,7 +1730,7 @@ function (_React$Component) {
         var htmlContent = "".concat(content, "\n<style>").concat(style, "</style>");
         return React.createElement(Wrapper, _extends({
           className: "".concat(wrapperClassName),
-          id: this.props.id,
+          id: this.props.id || uuid,
           ref: function ref(_ref) {
             return _this9.tooltipRef = _ref;
           }
@@ -1728,7 +1743,7 @@ function (_React$Component) {
       } else {
         return React.createElement(Wrapper, _extends({
           className: "".concat(wrapperClassName),
-          id: this.props.id
+          id: this.props.id || uuid
         }, ariaProps, {
           ref: function ref(_ref2) {
             return _this9.tooltipRef = _ref2;