Tooltip labeling

.changeset/little-files-cough.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Tooltip: New prop 'desribeChild' to better handle elements with no visible labels.

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -12,9 +12,10 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, { HTMLAttributes, cloneElement, forwardRef, useRef } from "react";
+import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
+import { Slot } from "../slot/Slot";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -80,6 +81,12 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
    * List of Keyboard-keys for shortcuts.
    */
   keys?: string[];
+  /**
+   * When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers.
+   * When true, content is added as additional information to the child element.
+   * @default false
+   */
+  describesChild?: boolean;
 }
 
 /**
@@ -89,9 +96,9 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
  * @see 🏷️ {@link TooltipProps}
  *
  * @example
- * ```jsx
+ * ```jsx Tooltip as only form of labeling
  * <Tooltip content="Skriv ut dokument">
- *   <Button icon={<PrinterLargeIcon title="demo knapp" />} />
+ *   <Button icon={<PrinterLargeIcon aria-hidden />} />
  * </Tooltip>
  * ```
  */
@@ -111,6 +118,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       id,
       keys,
       maxChar = 80,
+      describesChild = false,
       ...rest
     },
     ref,
@@ -164,7 +172,6 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     const ariaId = useId(id);
 
     const mergedRef = useMergeRefs(ref, refs.setFloating);
-    const childMergedRef = useMergeRefs(children.ref, refs.setReference);
 
     if (
       !children ||
@@ -184,18 +191,22 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         );
     }
 
+    const labelProps = describesChild
+      ? _open
+        ? { "aria-describedby": ariaId }
+        : { title: content }
+      : { "aria-label": content };
+
     return (
       <>
-        {cloneElement(
-          children,
-          getReferenceProps({
-            ...children.props,
-            ref: childMergedRef,
-            "aria-describedby": _open
-              ? cl(ariaId, children?.props["aria-describedby"])
-              : children?.props["aria-describedby"],
-          }),
-        )}
+        <Slot
+          ref={refs.setReference}
+          {...getReferenceProps()}
+          {...labelProps}
+          aria-keyshortcuts={keys ? keys.join("+") : undefined}
+        >
+          {children}
+        </Slot>
         <Portal rootElement={rootElement} asChild>
           {_open && (
             <div
@@ -220,7 +231,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             >
               {content}
               {keys && (
-                <span className="navds-tooltip__keys">
+                <span className="navds-tooltip__keys" aria-hidden>
                   {keys.map((key) => (
                     <Detail as="kbd" key={key} className="navds-tooltip__key">
                       {key}

@navikt/core/react/src/tooltip/tooltip.stories.tsx

@@ -1,8 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Alert } from "../alert";
 import { Button } from "../button";
-import { Search } from "../form/search";
 import { VStack } from "../layout/stack";
 import Tooltip from "./Tooltip";
 
@@ -32,20 +30,6 @@ export default {
   },
 } satisfies Meta<typeof Tooltip>;
 
-export const Demo = () => (
-  <div>
-    <Tooltip content="Tooltip example" placement="top">
-      <Alert variant="info">test</Alert>
-    </Tooltip>
-    <Tooltip content="Tooltip example" placement="top">
-      <Search label="søk" />
-    </Tooltip>
-    <Tooltip content="Tooltip example" placement="top">
-      <Button aria-describedby="test123">Tooltip</Button>
-    </Tooltip>
-  </div>
-);
-
 export const Default = (props) => {
   return (
     <Tooltip
@@ -56,15 +40,17 @@ export const Default = (props) => {
       arrow={props?.arrow}
       delay={props?.delay}
       offset={props?.offset}
+      describesChild={props?.describesChild}
     >
-      <Button aria-describedby="test123">Tooltip</Button>
+      <Button>Tooltip</Button>
     </Tooltip>
   );
 };
 Default.args = {
   keys: false,
   arrow: true,
   delay: 150,
+  describesChild: true,
 };
 
 export const Placement = () => {
@@ -90,10 +76,10 @@ export const Keys = () => {
   return (
     <Tooltip
       content="Tooltip example Laboris reprehenderit sit sunt nisi velit mollit esse excepteur. "
-      open={true}
       keys={["CMD", "I"]}
+      open={true}
     >
-      <div>Element</div>
+      <button>Element</button>
     </Tooltip>
   );
 };

aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx

@@ -9,23 +9,20 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <ToggleGroup defaultValue="lest" onChange={console.info}>
-      <Tooltip content="Uleste meldinger">
+      <Tooltip content="Uleste meldinger" describesChild>
         <ToggleGroup.Item
           value="ulest"
-          icon={<EnvelopeClosedIcon title="Ulest" />}
+          icon={<EnvelopeClosedIcon aria-hidden />}
         />
       </Tooltip>
-      <Tooltip content="Leste meldinger">
+      <Tooltip content="Leste meldinger" describesChild>
         <ToggleGroup.Item
           value="lest"
-          icon={<EnvelopeOpenIcon title="Lest" />}
+          icon={<EnvelopeOpenIcon aria-hidden />}
         />
       </Tooltip>
-      <Tooltip content="Sendte meldinger">
-        <ToggleGroup.Item
-          value="sendt"
-          icon={<PaperplaneIcon title="Sendt" />}
-        />
+      <Tooltip content="Sendte meldinger" describesChild>
+        <ToggleGroup.Item value="sendt" icon={<PaperplaneIcon aria-hidden />} />
       </Tooltip>
     </ToggleGroup>
   );
@@ -41,4 +38,5 @@ export const Demo = {
 
 export const args = {
   index: 6,
+  desc: "For ToggleGroup uten label med Tooltip bør du bruke 'describesChild'-prop på Tooltip.",
 };

aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx

@@ -5,7 +5,7 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <Tooltip content="Skriv ut dokument">
-      <Button icon={<PrinterLargeIcon title="demo knapp" />} />
+      <Button icon={<PrinterLargeIcon aria-hidden />} />
     </Tooltip>
   );
 };

aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx

@@ -0,0 +1,29 @@
+import { PrinterLargeIcon } from "@navikt/aksel-icons";
+import { Button, HStack, Tooltip } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <HStack gap="4">
+      <Tooltip content="Skriv ut dokument">
+        <Button icon={<PrinterLargeIcon aria-hidden />} />
+      </Tooltip>
+      <Tooltip content="Skriv ut dokument" describesChild>
+        <Button>Skriv ut</Button>
+      </Tooltip>
+    </HStack>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+  desc: "Hvis tooltip ikke er eneste form for tekstlig beskrivelse, kan du sette 'describesChild' til 'true'. Tooltip content blir da satt som 'title' (lukket) og 'aria-describedby' (åpen).",
+};

aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx

@@ -5,7 +5,7 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <Tooltip content="Skriv ut dokument" arrow={false}>
-      <Button icon={<PrinterLargeIcon title="demo knapp" />} />
+      <Button icon={<PrinterLargeIcon aria-hidden />} />
     </Tooltip>
   );
 };

aksel.nav.no/website/pages/eksempler/tooltip/placement.tsx

@@ -11,16 +11,16 @@ const Example = () => {
   return (
     <div className="grid gap-4">
       <Tooltip content="Skriv ut dokument">
-        <Button icon={<ArrowUpIcon title="demo knapp" />} />
+        <Button icon={<ArrowUpIcon aria-hidden />} />
       </Tooltip>
       <Tooltip content="Skriv ut dokument" placement="right">
-        <Button icon={<ArrowRightIcon title="demo knapp" />} />
+        <Button icon={<ArrowRightIcon aria-hidden />} />
       </Tooltip>
       <Tooltip content="Skriv ut dokument" placement="bottom">
-        <Button icon={<ArrowDownIcon title="demo knapp" />} />
+        <Button icon={<ArrowDownIcon aria-hidden />} />
       </Tooltip>
       <Tooltip content="Skriv ut dokument" placement="left">
-        <Button icon={<ArrowLeftIcon title="demo knapp" />} />
+        <Button icon={<ArrowLeftIcon aria-hidden />} />
       </Tooltip>
     </div>
   );

aksel.nav.no/website/pages/eksempler/tooltip/with-shortcuts.tsx

@@ -5,7 +5,7 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <Tooltip content="Skriv ut dokument" keys={["cmd", "p"]}>
-      <Button icon={<PrinterLargeIcon title="demo knapp" />} />
+      <Button icon={<PrinterLargeIcon aria-hidden />} />
     </Tooltip>
   );
 };

aksel.nav.no/website/scripts/update-examples/parts/extract-args.ts

@@ -16,13 +16,10 @@ export function extractArgs(
     return {};
   }
 
-  const parsedArgs = JSON5.parse(`{${args}}`);
-
-  if (!parsedArgs) {
-    env !== "test" &&
-      console.warn(`Unable to parse args for example/template: ${fileName}`);
-    return {};
+  try {
+    return JSON5.parse(`{${args}}`);
+  } catch (e) {
+    console.warn(`Unable to parse args for example/template: ${fileName}`);
+    throw e;
   }
-
-  return parsedArgs;
 }

aksel.nav.no/website/scripts/update-examples/parts/extract-metadata.ts

@@ -25,5 +25,9 @@ export function extractMetadata(
     "utf-8",
   );
 
-  return JSON5.parse(metadata);
+  try {
+    return JSON5.parse(metadata);
+  } catch (e) {
+    console.error(`Could not parse JSON5 in ${dirName}`);
+  }
 }