a11y(Tooltip): "tooltip" role

packages/core/src/common/utils/reactUtils.ts

@@ -26,8 +26,8 @@ import { isEmptyString } from "./jsUtils";
 export function isReactNodeEmpty(node?: React.ReactNode, skipArray = false): boolean {
  return (
  node == null ||
- node === "" ||
  node === false ||
+ isEmptyString(node) ||
  (!skipArray &&
  Array.isArray(node) &&
  // only recurse one level through arrays, for performance

packages/core/src/components/popover/popover.tsx

@@ -74,11 +74,6 @@ export interface PopoverProps<TProps extends DefaultPopoverTargetHTMLProps = Def
  /** HTML props for the backdrop element. Can be combined with `backdropClassName`. */
  backdropProps?: React.HTMLProps<HTMLDivElement>;
 
- /**
- * The content displayed inside the popover.
- */
- content?: string | React.JSX.Element;
-
  /**
  * The kind of interaction that triggers the display of the popover.
  *
@@ -252,8 +247,7 @@ export class Popover<
  const { disabled, content, placement, position = "auto", positioningStrategy } = this.props;
  const { isOpen } = this.state;
 
- const isContentEmpty = content == null || (typeof content === "string" && content.trim() === "");
- if (isContentEmpty) {
+ if (Utils.isReactNodeEmpty(content)) {
  // need to do this check in render(), because `isOpen` is derived from
  // state, and state can't necessarily be accessed in validateProps.
  if (!disabled && isOpen !== false && !Utils.isNodeEnv("production")) {
@@ -301,7 +295,7 @@ export class Popover<
  }
  }
 
- protected validateProps(props: PopoverProps<T> & { children?: React.ReactNode }) {
+ protected validateProps(props: PopoverProps<T>) {
  if (props.isOpen == null && props.onInteraction != null) {
  console.warn(Errors.POPOVER_WARN_UNCONTROLLED_ONINTERACTION);
  }
@@ -417,7 +411,7 @@ export class Popover<
  tabIndex: targetTabIndex,
  });
  } else {
- const childTarget = Utils.ensureElement(React.Children.toArray(children)[0])!;
+ const childTarget = Utils.ensureElement(React.Children.toArray(children)[0]);
 
  if (childTarget === undefined) {
  return null;

packages/core/src/components/popover/popoverSharedProps.ts

@@ -86,10 +86,20 @@ export type PopoverClickTargetHandlers<TProps extends DefaultPopoverTargetHTMLPr
  * @template TProps HTML props interface for target element,
  * defaults to props for HTMLElement in IPopoverProps and ITooltipProps
  */
-export interface PopoverSharedProps<TProps extends DefaultPopoverTargetHTMLProps> extends OverlayableProps, Props {
+export interface PopoverSharedProps<
+ TProps extends DefaultPopoverTargetHTMLProps,
+ // eslint-disable-next-line @typescript-eslint/ban-types
+ AdditionalTargetRendererProps = {},
+> extends OverlayableProps,
+ Props {
  /** Interactive element which will trigger the popover. */
  children?: React.ReactNode;
 
+ /**
+ * The content displayed inside the popover.
+ */
+ content?: string | React.JSX.Element;
+
  /**
  * A boundary element supplied to the "flip" and "preventOverflow" modifiers.
  * This is a shorthand for overriding Popper.js modifier options with the `modifiers` prop.
@@ -238,7 +248,10 @@ export interface PopoverSharedProps<TProps extends DefaultPopoverTargetHTMLProps
  // improvement would be better implemented if we added another type param to Popover, something like
  // Popover<TProps, "click" | "hover">. Instead of discriminating, we union the different possible event handlers
  // that may be passed (they are all optional properties anyway).
- props: PopoverTargetProps & PopoverHoverTargetHandlers<TProps> & PopoverClickTargetHandlers<TProps>,
+ props: PopoverTargetProps &
+ PopoverHoverTargetHandlers<TProps> &
+ PopoverClickTargetHandlers<TProps> &
+ AdditionalTargetRendererProps,
  ) => React.JSX.Element;
 
  /**

packages/core/src/components/tooltip/tooltip.tsx

@@ -17,22 +17,18 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { AbstractPureComponent, DISPLAYNAME_PREFIX, type IntentProps } from "../../common";
+import { AbstractPureComponent, DISPLAYNAME_PREFIX, type IntentProps, Utils } from "../../common";
 import * as Classes from "../../common/classes";
+import * as Errors from "../../common/errors";
 // eslint-disable-next-line import/no-cycle
 import { Popover, type PopoverInteractionKind } from "../popover/popover";
 import { TOOLTIP_ARROW_SVG_SIZE } from "../popover/popoverArrow";
 import type { DefaultPopoverTargetHTMLProps, PopoverSharedProps } from "../popover/popoverSharedProps";
 import { TooltipContext, type TooltipContextState, TooltipProvider } from "../popover/tooltipContext";
 
 export interface TooltipProps<TProps extends DefaultPopoverTargetHTMLProps = DefaultPopoverTargetHTMLProps>
- extends Omit<PopoverSharedProps<TProps>, "shouldReturnFocusOnClose">,
+ extends Omit<PopoverSharedProps<TProps, { tooltipId: string }>, "shouldReturnFocusOnClose">,
  IntentProps {
- /**
- * The content that will be displayed inside of the tooltip.
- */
- content: React.JSX.Element | string;
-
  /**
  * Whether to use a compact appearance, which reduces the visual padding around
  * tooltip content.
@@ -42,19 +38,11 @@ export interface TooltipProps<TProps extends DefaultPopoverTargetHTMLProps = Def
  compact?: boolean;
 
  /**
- * The amount of time in milliseconds the tooltip should remain open after
- * the user hovers off the trigger. The timer is canceled if the user mouses
- * over the target before it expires.
- *
  * @default 0
  */
  hoverCloseDelay?: number;
 
  /**
- * The amount of time in milliseconds the tooltip should wait before opening
- * after the user hovers over the trigger. The timer is canceled if the user
- * mouses away from the target before it expires.
- *
  * @default 100
  */
  hoverOpenDelay?: number;
@@ -68,12 +56,6 @@ export interface TooltipProps<TProps extends DefaultPopoverTargetHTMLProps = Def
  interactionKind?: typeof PopoverInteractionKind.HOVER | typeof PopoverInteractionKind.HOVER_TARGET_ONLY;
 
  /**
- * Indicates how long (in milliseconds) the tooltip's appear/disappear
- * transition takes. This is used by React `CSSTransition` to know when a
- * transition completes and must match the duration of the animation in CSS.
- * Only set this prop if you override Blueprint's default transitions with
- * new transitions of a different length.
- *
  * @default 100
  */
  transitionDuration?: number;
@@ -114,13 +96,29 @@ export class Tooltip<
  this.popoverRef.current?.reposition();
  }
 
+ protected validateProps(props: TooltipProps<T>) {
+ const childrenCount = React.Children.count(props.children);
+ if (childrenCount > 1) {
+ console.warn(Errors.POPOVER_WARN_TOO_MANY_CHILDREN);
+ }
+ // all other warnings should occur in Popover, not here.
+ }
+
  // any descendant ContextMenus may update this ctxState
  private renderPopover = (ctxState: TooltipContextState) => {
- const { children, compact, disabled, intent, popoverClassName, ...restProps } = this.props;
+ const { children, content, renderTarget, compact, disabled, intent, popoverClassName, ...restProps } =
+ this.props;
+
  const popoverClasses = classNames(Classes.TOOLTIP, Classes.intentClass(intent), popoverClassName, {
  [Classes.COMPACT]: compact,
  });
 
+ const tooltipId = Utils.uniqueId("tooltip");
+
+ const childTarget = Utils.ensureElement(React.Children.toArray(children)[0], undefined, {
+ "aria-describedby": tooltipId,
+ });
+
  return (
  <Popover
  modifiers={{
@@ -134,6 +132,14 @@ export class Tooltip<
  },
  }}
  {...restProps}
+ // eslint-disable-next-line react/jsx-no-bind
+ renderTarget={renderTarget ? props => renderTarget({ ...props, tooltipId }) : undefined}
+ content={
+ // want Popover to warn if empty, so don't wrap in element if empty.
+ Utils.isReactNodeEmpty(content)
+ ? content
+ : Utils.ensureElement(content, undefined, { role: "tooltip", id: tooltipId })
+ }
  autoFocus={false}
  canEscapeKeyClose={false}
  disabled={ctxState.forceDisabled ?? disabled}
@@ -143,7 +149,7 @@ export class Tooltip<
  portalContainer={this.props.portalContainer}
  ref={this.popoverRef}
  >
- {children}
+ {childTarget}
  </Popover>
  );
  };

packages/core/test/popover/popoverTests.tsx

@@ -78,7 +78,7 @@ describe("<Popover>", () => {
  assert.isTrue(warnSpy.calledWith(Errors.POPOVER_WARN_TOO_MANY_CHILDREN));
  });
 
- it("warns if given children and target prop", () => {
+ it("warns if given children and renderTarget prop", () => {
  shallow(<Popover renderTarget={() => <span>"boom"</span>}>pow</Popover>);
  assert.isTrue(warnSpy.calledWith(Errors.POPOVER_WARN_DOUBLE_TARGET));
  });

packages/core/test/tooltip/tooltipTests.tsx

@@ -20,15 +20,65 @@ import * as React from "react";
 import { spy, stub } from "sinon";
 
 import { Classes } from "../../src/common";
+import * as Errors from "../../src/common/errors";
 import { Button, Overlay2 } from "../../src/components";
 import { Popover } from "../../src/components/popover/popover";
 import { Tooltip, type TooltipProps } from "../../src/components/tooltip/tooltip";
 
 const TARGET_SELECTOR = `.${Classes.POPOVER_TARGET}`;
 const TOOLTIP_SELECTOR = `.${Classes.TOOLTIP}`;
-const TEST_TARGET_ID = "test-target";
 
 describe("<Tooltip>", () => {
+ describe("validation", () => {
+ let warnSpy: sinon.SinonStub;
+
+ // use sinon.stub to prevent warnings from appearing in the test logs
+ before(() => (warnSpy = stub(console, "warn")));
+ beforeEach(() => warnSpy.resetHistory());
+ after(() => warnSpy.restore());
+
+ it("throws error if given no target", () => {
+ mount(<Tooltip content={<p>Text</p>} usePortal={false} />);
+ assert.isTrue(warnSpy.calledWith(Errors.POPOVER_REQUIRES_TARGET));
+ });
+
+ it("warns if given > 1 target elements", () => {
+ mount(
+ <Tooltip>
+ <Button />
+ <Button />
+ </Tooltip>,
+ );
+ assert.isTrue(warnSpy.calledWith(Errors.POPOVER_WARN_TOO_MANY_CHILDREN));
+ });
+
+ it("warns if given children and renderTarget prop", () => {
+ mount(<Tooltip renderTarget={() => <span>"boom"</span>}>pow</Tooltip>);
+ assert.isTrue(warnSpy.calledWith(Errors.POPOVER_WARN_DOUBLE_TARGET));
+ });
+
+ it("warns if given targetProps and renderTarget", () => {
+ mount(<Tooltip targetProps={{ role: "none" }} renderTarget={() => <span>"boom"</span>} />);
+ assert.isTrue(warnSpy.calledWith(Errors.POPOVER_WARN_TARGET_PROPS_WITH_RENDER_TARGET));
+ });
+
+ it("warns if attempting to open with empty content", () => {
+ renderTooltip({ content: undefined, isOpen: true });
+ assert.isTrue(warnSpy.calledWith(Errors.POPOVER_WARN_EMPTY_CONTENT));
+ });
+
+ it("warns and disables if given empty content", () => {
+ const tooltip = renderTooltip({ content: undefined, isOpen: true });
+
+ assert.isFalse(tooltip.find(Overlay2).exists(), "not open for undefined content");
+ assert.equal(warnSpy.callCount, 2);
+
+ tooltip.setProps({ content: " " });
+ assert.isFalse(tooltip.find(Overlay2).exists(), "not open for white-space string content");
+ assert.equal(warnSpy.callCount, 3);
+ });
+ });
+
  describe("rendering", () => {
  it("propogates class names correctly", () => {
  const tooltip = renderTooltip({
@@ -159,7 +209,7 @@ describe("<Tooltip>", () => {
  function renderTooltip(props?: Partial<TooltipProps>) {
  return mount<TooltipProps>(
  <Tooltip content={<p>Text</p>} hoverOpenDelay={0} {...props} usePortal={false}>
- <Button id={TEST_TARGET_ID} text="target" />
+ <Button text="target" />
  </Tooltip>,
  );
  }