@workday/canvas-kit-react 12.3.7 → 12.4.0-1019-next.0

package/tooltip/lib/Tooltip.tsx

@@ -16,6 +16,17 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   /**
    * This should be a string in most cases. HTML is supported, but only text is understood
    * by assistive technology. This is true for both `label` and `describe` modes.
+   *
+   * **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly translated.
+   *
+   * ```jsx
+   * // The text will be understood as: You must accept terms and conditions
+   * <Tooltip type="description" title={<span>You<i>must</i> accept terms and conditions</span>}/>
+   *
+   * // This will render a string including the html and will not be properly understood by voice over.
+   * const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
+   * <Tooltip type="description" title={MyComponent/>
+   * ```
    */
   title: React.ReactNode;
   /**
@@ -45,7 +56,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
    *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
    *   Ellipsis tooltips.
-   * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
+   * - **Deprecated: `describe` is deprecated, please use `description`**.`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.
    * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
    *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
@@ -55,7 +66,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * Consider an alternate way to inform a user of additional important information.
    * @default 'label'
    */
-  type?: 'label' | 'describe' | 'muted';
+  type?: 'label' | 'describe' | 'muted' | 'description';
   /**
    * Amount of time (in ms) to delay before showing the tooltip
    */

package/tooltip/lib/useTooltip.tsx

@@ -65,17 +65,17 @@ export function useTooltip<T extends Element = Element>({
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
    *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
    *   Ellipsis tooltips.
-   * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
-   *   information about the target.
+   * - **Deprecated: `describe` is deprecated, please use `description`.**`describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional information about the target
    * - `muted`: No effort is made to make the tooltip accessible to screen readers. Use if the
    *   tooltip contents are not useful to a screen reader or if you have handled accessibility of
    *   the tooltip yourself.
+   * - `description`: Sets `aria-description` strings for the wrapped element. Use if the tooltip has additional about the target
    *
    * **Note**: Assistive technology may ignore `describe` techniques based on verbosity settings.
    * Consider an alternate way to inform a user of additional important information.
    * @default 'label'
    */
-  type?: 'label' | 'describe' | 'muted';
+  type?: 'label' | 'describe' | 'muted' | 'description';
   /**
    * The content of the `aria-label` if `type` is `label.
    */
@@ -136,6 +136,7 @@ export function useTooltip<T extends Element = Element>({
   const targetProps = {
     // extra description of the target element for assistive technology
     'aria-describedby': type === 'describe' && visible ? id : undefined,
+    'aria-description': type === 'description' ? titleText : undefined,
     // This will replace the accessible name of the target element
     'aria-label': type === 'label' ? titleText : undefined,
     onMouseEnter: onOpenFromTarget,