@workday/canvas-kit-react 12.3.5 → 12.4.0-1015-next.0

package/dist/es6/text-input/lib/TextInput.js

@@ -7,15 +7,15 @@ export const textInputStencil = createStencil({
     vars: {
         width: '',
     },
-    base: { name: "x0713x", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-d81f49);min-width:var(--width-text-input-d81f49, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
+    base: { name: "lqrz3x", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-d81f49);min-width:var(--width-text-input-d81f49, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
     modifiers: {
         grow: {
-            true: { name: "x0713y", styles: "width:100%;resize:vertical;" },
-            false: { name: "x0713z", styles: "width:initial;" }
+            true: { name: "lqrz3y", styles: "width:100%;resize:vertical;" },
+            false: { name: "lqrz3z", styles: "width:initial;" }
         },
         error: {
-            error: { name: "x07140", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-error-base);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
-            alert: { name: "x07141", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}" }
+            error: { name: "lqrz40", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-error-base);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+            alert: { name: "lqrz41", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}" }
         }
     },
     defaultModifiers: {

package/dist/es6/toast/lib/Toast.js

@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "x07160", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "lqrz60", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
 }, "toast-55513d");
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility

package/dist/es6/toast/lib/ToastBody.js

@@ -4,7 +4,7 @@ import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const toastBodyStencil = createStencil({
-    base: { name: "x0715z", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "lqrz5z", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
 }, "toast-body-7d81ac");
 export const ToastBody = createComponent('div')({
     displayName: 'Toast.Body',

package/dist/es6/toast/lib/ToastCloseIcon.js

@@ -4,7 +4,7 @@ import { Popup } from '@workday/canvas-kit-react/popup';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "x0715w", styles: "box-sizing:border-box;position:relative;" }
+    base: { name: "lqrz5w", styles: "box-sizing:border-box;position:relative;" }
 }, "toast-close-icon-be7e9f");
 export const ToastCloseIcon = createComponent('button')({
     displayName: 'Toast.CloseIcon',

package/dist/es6/toast/lib/ToastIcon.js

@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "x0715x", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
+    base: { name: "lqrz5x", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
 }, "toast-icon-4b0701");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

package/dist/es6/toast/lib/ToastMessage.js

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 export const toastMessageStencil = createStencil({
-    base: { name: "x0715y", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
+    base: { name: "lqrz5y", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
 }, "toast-message-759382");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

package/dist/es6/tooltip/lib/Tooltip.d.ts

@@ -4,6 +4,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;
     /**
@@ -33,7 +44,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
@@ -43,7 +54,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/dist/es6/tooltip/lib/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}

package/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -10,17 +10,17 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * - `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.
      */
@@ -37,6 +37,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
     /** Mix these properties into the target element. **Must be an Element** */
     targetProps: {
         'aria-describedby': string | undefined;
+        'aria-description': string | undefined;
         'aria-label': string | undefined;
         onMouseEnter: (event: React.SyntheticEvent) => void;
         onMouseLeave: () => void;

package/dist/es6/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA+DF,2EAA2E;;;;8BA7C5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IA0CtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IAgEF,2EAA2E;;;;;8BA9C5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IA2CtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

package/dist/es6/tooltip/lib/useTooltip.js

@@ -78,6 +78,7 @@ export function useTooltip({ type = 'label', titleText = '', showDelay = 300, hi
     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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.3.5",
+  "version": "12.4.0-1015-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.3.5",
-    "@workday/canvas-kit-styling": "^12.3.5",
+    "@workday/canvas-kit-popup-stack": "^12.4.0-1015-next.0",
+    "@workday/canvas-kit-styling": "^12.4.0-1015-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "36cb5e3cb24c43de85acf72a534c9a8a8b2499bf"
+  "gitHead": "d2351f7f9b4ef85afeaaf40ce7100fefb9f2d27b"
 }

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,