@pingux/astro 2.1.2-alpha.1 → 2.1.2-alpha.2

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -12,6 +12,8 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
@@ -39,15 +41,26 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     iconButtonProps = props.iconButtonProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var tooltipId = (0, _uuid.v4)();
+  var buttonRef = (0, _react.useRef)();
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var isTooltipOpen = isFocusVisible || isHovered;
   return (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({
     ref: ref,
     direction: "top"
-  }, others, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+  }, others, {
+    isOpen: isTooltipOpen
+  }, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+    ref: buttonRef,
     variant: "hintButton",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button",
-    "aria-describedby": tooltipId
-  }, iconButtonProps), (0, _react2.jsx)(_.Icon, {
+    "aria-describedby": isTooltipOpen ? tooltipId : null
+  }, iconButtonProps, hoverProps, focusProps), (0, _react2.jsx)(_.Icon, {
     icon: HelpIcon
   })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, (0, _extends2["default"])({}, tooltipProps, {
     role: "tooltip",

package/lib/cjs/components/HelpHint/HelpHint.test.js

@@ -31,7 +31,10 @@ test('shows tooltip on hover', function () {
   expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   _testWrapper.fireEvent.mouseMove(helpHintButton);
   _testWrapper.fireEvent.mouseEnter(helpHintButton);
-  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = _testWrapper.screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('shows tooltip on focus', function () {
   getComponent();
@@ -39,7 +42,10 @@ test('shows tooltip on focus', function () {
   expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   _userEvent["default"].tab();
   expect(helpHintButton).toHaveFocus();
-  expect(_testWrapper.screen.queryByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = _testWrapper.screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('applies tooltipProps', function () {
   getComponent({

package/lib/components/HelpHint/HelpHint.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "tooltipProps", "iconButtonProps"];
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
+import { useFocusRing } from 'react-aria';
+import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Icon } from '../..';
@@ -26,15 +28,26 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     iconButtonProps = props.iconButtonProps,
     others = _objectWithoutProperties(props, _excluded);
   var tooltipId = uuid();
+  var buttonRef = useRef();
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var isTooltipOpen = isFocusVisible || isHovered;
   return ___EmotionJSX(TooltipTrigger, _extends({
     ref: ref,
     direction: "top"
-  }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
+  }, others, {
+    isOpen: isTooltipOpen
+  }, tooltipProps), ___EmotionJSX(IconButton, _extends({
+    ref: buttonRef,
     variant: "hintButton",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button",
-    "aria-describedby": tooltipId
-  }, iconButtonProps), ___EmotionJSX(Icon, {
+    "aria-describedby": isTooltipOpen ? tooltipId : null
+  }, iconButtonProps, hoverProps, focusProps), ___EmotionJSX(Icon, {
     icon: HelpIcon
   })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
     role: "tooltip",

package/lib/components/HelpHint/HelpHint.test.js

@@ -28,7 +28,10 @@ test('shows tooltip on hover', function () {
   expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   fireEvent.mouseMove(helpHintButton);
   fireEvent.mouseEnter(helpHintButton);
-  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('shows tooltip on focus', function () {
   getComponent();
@@ -36,7 +39,10 @@ test('shows tooltip on focus', function () {
   expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   userEvent.tab();
   expect(helpHintButton).toHaveFocus();
-  expect(screen.queryByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('applies tooltipProps', function () {
   getComponent({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.1.2-alpha.1",
+  "version": "2.1.2-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",