@sproutsocial/seeds-react-tooltip 1.0.8 → 1.0.10

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     4.49 KB
-ESM dist/esm/index.js.map 10.17 KB
-ESM ⚡️ Build success in 86ms
-CJS dist/index.js     6.48 KB
-CJS dist/index.js.map 10.28 KB
-CJS ⚡️ Build success in 94ms
+CJS dist/index.js     6.50 KB
+CJS dist/index.js.map 10.32 KB
+CJS ⚡️ Build success in 71ms
+ESM dist/esm/index.js     4.51 KB
+ESM dist/esm/index.js.map 10.21 KB
+ESM ⚡️ Build success in 70ms
 DTS Build start
-DTS ⚡️ Build success in 5563ms
+DTS ⚡️ Build success in 5899ms
 DTS dist/index.d.ts  1.91 KB
 DTS dist/index.d.mts 1.91 KB
-Done in 6.75s.
+Done in 7.13s.

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sproutsocial/seeds-react-tooltip
 
+## 1.0.10
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-popout@2.4.11
+
+## 1.0.9
+
+### Patch Changes
+
+- 5e20b0b: Fix Tooltip ARIA attributes for improved accessibility
+
+  - `aria-describedby` is now only set when the tooltip is open, rather than always being present. This ensures the association between the trigger element and tooltip content is only established when the tooltip is visible.
+  - `aria-expanded` is now only set when the child element already has this attribute (e.g., for drawer/disclosure patterns). Previously, it was incorrectly set to the tooltip's open state for all elements.
+
+  These changes improve screen reader behavior and align with ARIA best practices for tooltip components.
+
+- Updated dependencies [8f6ba8d]
+  - @sproutsocial/seeds-react-theme@3.2.0
+  - @sproutsocial/seeds-react-box@1.1.6
+  - @sproutsocial/seeds-react-popout@2.4.10
+
 ## 1.0.8
 
 ### Patch Changes

package/dist/esm/index.js

@@ -150,9 +150,9 @@ var Tooltip = ({
             whiteSpace: "nowrap"
           } : {},
           children: React.isValidElement(children) ? React.cloneElement(children, {
-            //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
-            "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : isOpen,
-            "aria-describedby": id
+            //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that property takes priority */
+            "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : void 0,
+            "aria-describedby": isOpen ? id : void 0
           }) : children
         }
       )

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that property takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": isOpen ? id : undefined,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -187,9 +187,9 @@ var Tooltip = ({
             whiteSpace: "nowrap"
           } : {},
           children: React.isValidElement(children) ? React.cloneElement(children, {
-            //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
-            "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : isOpen,
-            "aria-describedby": id
+            //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that property takes priority */
+            "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : void 0,
+            "aria-describedby": isOpen ? id : void 0
           }) : children
         }
       )

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Tooltip.tsx","../src/styles.ts","../src/TooltipTypes.ts"],"sourcesContent":["import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n"],"mappings":"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","names":["styled","Box","MOTION","Popout","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Tooltip.tsx","../src/styles.ts","../src/TooltipTypes.ts"],"sourcesContent":["import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that property takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : undefined,\n              \"aria-describedby\": isOpen ? id : undefined,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n"],"mappings":"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","names":["styled","Box","MOTION","Popout","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-tooltip",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Seeds React Tooltip",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,10 +18,10 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.1.1",
+    "@sproutsocial/seeds-react-theme": "^3.2.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-popout": "^2.4.9",
-    "@sproutsocial/seeds-react-box": "^1.1.5",
+    "@sproutsocial/seeds-react-popout": "^2.4.11",
+    "@sproutsocial/seeds-react-box": "^1.1.6",
     "@sproutsocial/seeds-motion": "^1.8.0"
   },
   "devDependencies": {
@@ -35,9 +35,9 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-icon": "^1.1.7",
-    "@sproutsocial/seeds-react-banner": "^1.0.9",
-    "@sproutsocial/seeds-react-button": "^1.3.3",
+    "@sproutsocial/seeds-react-icon": "^2.0.0",
+    "@sproutsocial/seeds-react-banner": "^1.0.11",
+    "@sproutsocial/seeds-react-button": "^1.3.5",
     "@sproutsocial/seeds-react-text": "^1.3.2",
     "@sproutsocial/seeds-react-portal": "^1.1.4"
   },

package/src/Tooltip.tsx

@@ -165,11 +165,11 @@ const Tooltip = ({
       >
         {React.isValidElement(children)
           ? React.cloneElement(children as React.ReactElement, {
-              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
+              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that property takes priority */
               "aria-expanded": hasAttribute(children, "aria-expanded")
                 ? children.props["aria-expanded"]
-                : isOpen,
-              "aria-describedby": id,
+                : undefined,
+              "aria-describedby": isOpen ? id : undefined,
             })
           : children}
       </span>

package/src/__tests__/Tooltip.test.tsx

@@ -126,48 +126,65 @@ describe("Tooltip", () => {
       ).rejects.toBeTruthy();
     });
 
-    it("should render as aria-expanded if tooltip is hovered", async () => {
+    it("should not add aria-expanded to elements without it", async () => {
       render(
         <Tooltip content="hello">
-          <Button role="button" onClick={() => {}}>
-            hi
-          </Button>
+          <Button>hi</Button>
         </Tooltip>
       );
-      // Hover over
+
+      const button = screen.getByRole("button", { name: "hi" });
+
+      // Should not have aria-expanded initially
+      expect(button).not.toHaveAttribute("aria-expanded");
+
+      // Hover to open tooltip
       act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
+        fireEvent.mouseOver(button);
       });
+
       // Wait for tooltip
       await screen.findByText(/hello/i);
-      // check if expanded
-      expect(
-        screen.getByRole("button", {
-          expanded: true,
-        })
-      ).toBeInTheDocument();
+
+      // Should still not have aria-expanded (tooltips don't use this attribute)
+      expect(button).not.toHaveAttribute("aria-expanded");
     });
 
-    it("should not render as aria-expanded if child already defines one", async () => {
+    it("should preserve existing aria-expanded attribute", async () => {
       render(
         <Tooltip content="hello">
-          <Button aria-expanded="false" role="button" onClick={() => {}}>
-            hi
-          </Button>
+          <Button aria-expanded="false">hi</Button>
         </Tooltip>
       );
-      // Hover over
+
+      const button = screen.getByRole("button", { name: "hi" });
+
+      // Should preserve the existing aria-expanded value
+      expect(button).toHaveAttribute("aria-expanded", "false");
+
+      // Hover to open tooltip
       act(() => {
-        fireEvent.mouseOver(screen.getByText("hi"));
+        fireEvent.mouseOver(button);
       });
+
       // Wait for tooltip
       await screen.findByText(/hello/i);
-      // check if expanded
-      expect(
-        screen.getByRole("button", {
-          expanded: false,
-        })
-      ).toBeInTheDocument();
+
+      // Should still preserve aria-expanded="false" (drawer/disclosure pattern)
+      expect(button).toHaveAttribute("aria-expanded", "false");
+    });
+
+    it("should not add aria-expanded to non-interactive elements", () => {
+      render(
+        <Tooltip content="Tooltip text">
+          <span data-testid="text-element">Static text</span>
+        </Tooltip>
+      );
+
+      const textElement = screen.getByTestId("text-element");
+
+      // Non-interactive elements should not get aria-expanded
+      expect(textElement).not.toHaveAttribute("aria-expanded");
     });
   });
 
@@ -191,4 +208,107 @@ describe("Tooltip", () => {
       })
     ).resolves.toBeTruthy();
   });
+
+  describe("ARIA attributes", () => {
+    it("should not have aria-describedby when tooltip is closed", () => {
+      render(
+        <Tooltip content="Tooltip content">
+          <Button data-testid="trigger">Trigger</Button>
+        </Tooltip>
+      );
+
+      const trigger = screen.getByTestId("trigger");
+      expect(trigger).not.toHaveAttribute("aria-describedby");
+    });
+
+    it("should have aria-describedby when tooltip is open", async () => {
+      render(
+        <Tooltip content="Tooltip content">
+          <Button data-testid="trigger">Trigger</Button>
+        </Tooltip>
+      );
+
+      const trigger = screen.getByTestId("trigger");
+
+      // Hover to open tooltip
+      act(() => {
+        fireEvent.mouseOver(trigger);
+      });
+
+      // Wait for tooltip to appear
+      await screen.findByText("Tooltip content");
+
+      // Check that aria-describedby is now present
+      expect(trigger).toHaveAttribute("aria-describedby");
+      const tooltipId = trigger.getAttribute("aria-describedby");
+      expect(tooltipId).toBeTruthy();
+      expect(tooltipId).toMatch(/^Racine-tooltip-\d+$/);
+    });
+
+    it("should remove aria-describedby when tooltip closes", async () => {
+      render(
+        <Tooltip content="Tooltip content">
+          <Button data-testid="trigger">Trigger</Button>
+        </Tooltip>
+      );
+
+      const trigger = screen.getByTestId("trigger");
+
+      // Open tooltip
+      act(() => {
+        fireEvent.mouseOver(trigger);
+      });
+
+      // Wait for tooltip to appear
+      await screen.findByText("Tooltip content");
+
+      // Verify aria-describedby is present
+      expect(trigger).toHaveAttribute("aria-describedby");
+
+      // Close tooltip
+      act(() => {
+        fireEvent.mouseOut(trigger);
+      });
+
+      // Wait for tooltip to close (using a small delay)
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 200));
+      });
+
+      // Verify aria-describedby is removed
+      expect(trigger).not.toHaveAttribute("aria-describedby");
+    });
+
+    it("should have aria-describedby pointing to element with role='tooltip'", async () => {
+      render(
+        <Tooltip content="Tooltip content">
+          <Button data-testid="trigger">Trigger</Button>
+        </Tooltip>
+      );
+
+      const trigger = screen.getByTestId("trigger");
+
+      // Open tooltip
+      act(() => {
+        fireEvent.mouseOver(trigger);
+      });
+
+      // Wait for tooltip to appear
+      const tooltipElement = await screen.findByText("Tooltip content");
+
+      // Get the aria-describedby value
+      const tooltipId = trigger.getAttribute("aria-describedby");
+      expect(tooltipId).toBeTruthy();
+
+      // Find the tooltip by role
+      const tooltipByRole = screen.getByRole("tooltip");
+      expect(tooltipByRole).toBeInTheDocument();
+
+      // Verify the ID matches
+      expect(tooltipByRole).toHaveAttribute("id", tooltipId);
+
+      // Verify the tooltip contains the content
+      expect(tooltipByRole).toContainElement(tooltipElement);
+    });
+  });
 });