@fremtind/jkl-tooltip-react - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

build/cjs/Tooltip.js

@@ -31,2 +31,3 @@ "use strict";
 var import_react_dom_interactions = require("@floating-ui/react-dom-interactions");
+var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
 var import_classnames = __toESM(require("classnames"));
@@ -36,2 +37,3 @@ var import_framer_motion = require("framer-motion");
 const Tooltip = ({ content, initialPlacement = "top", className }) => {
+  const tooltipId = (0, import_jkl_react_hooks.useId)("jkl-tooltip");
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -57,4 +59,3 @@ const arrowElement = (0, import_react.useRef)(null);
     (0, import_react_dom_interactions.useDismiss)(context, { referencePress: false }),
-    (0, import_react_dom_interactions.useHover)(context),
-    (0, import_react_dom_interactions.useFocus)(context),
+    (0, import_react_dom_interactions.useFocus)(context, { enabled: open }),
     (0, import_react_dom_interactions.useRole)(context, { role: "tooltip" })
@@ -67,2 +68,4 @@ ]);
   }, /* @__PURE__ */ import_react.default.createElement("button", {
+    "aria-expanded": open,
+    "aria-controls": tooltipId,
     type: "button",
@@ -75,3 +78,3 @@ className: "jkl-tooltip__button",
     className: "jkl-sr-only"
-  }, "Hjelpetekst")), /* @__PURE__ */ import_react.default.createElement(import_framer_motion.AnimatePresence, null, open && /* @__PURE__ */ import_react.default.createElement(import_framer_motion.motion.span, {
+  }, `${open ? "Skjul" : "Vis"} hjelpetekst`)), /* @__PURE__ */ import_react.default.createElement(import_framer_motion.AnimatePresence, null, open && /* @__PURE__ */ import_react.default.createElement(import_framer_motion.motion.span, {
     initial: { opacity: 0 },
@@ -82,4 +85,6 @@ animate: { opacity: 1 },
     "data-placement": placement,
+    "aria-live": "assertive",
     className: "jkl-tooltip__content",
     ...getFloatingProps({
+      id: tooltipId,
       ref: floating,
@@ -93,2 +98,3 @@ style: {
   }, content, /* @__PURE__ */ import_react.default.createElement("span", {
+    "aria-hidden": true,
     className: "jkl-tooltip__arrow",
@@ -95,0 +101,0 @@ ref: arrowElement,

build/esm/Tooltip.js

@@ -7,9 +7,9 @@ import {
   arrow,
-  useHover,
-  useFocus,
   useRole,
   useInteractions,
   useClick,
-  useDismiss
+  useDismiss,
+  useFocus
 } from "@floating-ui/react-dom-interactions";
+import { useId } from "@fremtind/jkl-react-hooks";
 import cn from "classnames";
@@ -19,2 +19,3 @@ import { motion, AnimatePresence } from "framer-motion";
 const Tooltip = ({ content, initialPlacement = "top", className }) => {
+  const tooltipId = useId("jkl-tooltip");
   const [open, setOpen] = useState(false);
@@ -40,4 +41,3 @@ const arrowElement = useRef(null);
     useDismiss(context, { referencePress: false }),
-    useHover(context),
-    useFocus(context),
+    useFocus(context, { enabled: open }),
     useRole(context, { role: "tooltip" })
@@ -50,2 +50,4 @@ ]);
   }, /* @__PURE__ */ React.createElement("button", {
+    "aria-expanded": open,
+    "aria-controls": tooltipId,
     type: "button",
@@ -58,3 +60,3 @@ className: "jkl-tooltip__button",
     className: "jkl-sr-only"
-  }, "Hjelpetekst")), /* @__PURE__ */ React.createElement(AnimatePresence, null, open && /* @__PURE__ */ React.createElement(motion.span, {
+  }, `${open ? "Skjul" : "Vis"} hjelpetekst`)), /* @__PURE__ */ React.createElement(AnimatePresence, null, open && /* @__PURE__ */ React.createElement(motion.span, {
     initial: { opacity: 0 },
@@ -65,4 +67,6 @@ animate: { opacity: 1 },
     "data-placement": placement,
+    "aria-live": "assertive",
     className: "jkl-tooltip__content",
     ...getFloatingProps({
+      id: tooltipId,
       ref: floating,
@@ -76,2 +80,3 @@ style: {
   }, content, /* @__PURE__ */ React.createElement("span", {
+    "aria-hidden": true,
     className: "jkl-tooltip__arrow",
@@ -78,0 +83,0 @@ ref: arrowElement,

package.json

 {
     "name": "@fremtind/jkl-tooltip-react",
-    "version": "1.0.14",
+    "version": "1.0.15",
     "publishConfig": {
@@ -43,2 +43,3 @@ "access": "public"
         "@fremtind/jkl-core": "^11.2.1",
+        "@fremtind/jkl-react-hooks": "^10.2.6",
         "@fremtind/jkl-tooltip": "^1.0.7",
@@ -64,3 +65,3 @@ "classnames": "^2.3.2",
     },
-    "gitHead": "dbcf2de9161949de83c9c482c72e871f14392b4e"
+    "gitHead": "40501dbd2625f240da94ff01cea9221102aab4b9"
 }

No alert changes

Improved metrics

Total package byte prevSize

24371

increased by7.63%

Lines of code

227

increased by5.09%

Worsened metrics

Dependency count

11

increased by10%

Dependency changes

• + Added@fremtind/jkl-react-hooks@^10.2.6

• + Added@fremtind/jkl-react-hooks@10.2.9(transitive)

• + Addednanoid@3.3.7(transitive)