@momentum-design/components 0.129.9 → 0.129.11

package/dist/components/tooltip/tooltip.component.js

@@ -11,14 +11,22 @@ import { property } from 'lit/decorators.js';
 import { v4 as uuidv4 } from 'uuid';
 import { ROLE } from '../../utils/roles';
 import Popover from '../popover/popover.component';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
 import styles from './tooltip.styles';
 /**
+ * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>
+ * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.
+ *
+ * Because of this, tooltips cannot contain content that can be focused or interacted with.
+ * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.
+ *
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
  *
- * Note: Tooltips cannot contain content that can be focused or interacted with.
+ * Note:
+ *  - Tooltips cannot contain content that can be focused or interacted with.
+ *  - Tooltips will contain the default `aria-hidden="true"` so that VO will never focus the tooltip.
  *
  * @tagname mdc-tooltip
  *
@@ -47,24 +55,27 @@ class Tooltip extends Popover {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.backdrop = false;
+        this.role = ROLE.TOOLTIP;
+        // We don't want the tooltip to be visible for screen readers as they are not focusable
+        this.ariaHidden = DEFAULTS.ARIA_HIDDEN;
+        // Tooltip defaults
+        this.backdrop = DEFAULTS.BACKDROP;
         this.delay = this.delay || DEFAULTS.DELAY;
-        this.focusTrap = false;
-        this.hideOnBlur = true;
-        this.hideOnEscape = true;
-        this.interactive = false;
+        this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
+        this.hideOnBlur = DEFAULTS.HIDE_ON_BLUR;
+        this.hideOnEscape = DEFAULTS.HIDE_ON_ESCAPE;
         this.offset = this.offset || DEFAULTS.OFFSET;
         this.placement = this.placement || DEFAULTS.PLACEMENT;
-        this.role = ROLE.TOOLTIP;
-        this.trigger = 'mouseenter focusin';
-        this.preventScroll = false;
-        this.disableFlip = false;
-        this.preventScroll = false;
-        this.closeButton = false;
-        this.hideOnOutsideClick = false;
-        this.focusBackToTrigger = false;
-        this.size = false;
-        this.disableAriaExpanded = true;
+        this.trigger = DEFAULTS.TRIGGER;
+        // Popover defaults
+        this.closeButton = POPOVER_DEFAULTS.CLOSE_BUTTON;
+        this.disableFlip = POPOVER_DEFAULTS.DISABLE_FLIP;
+        this.focusBackToTrigger = POPOVER_DEFAULTS.FOCUS_BACK;
+        this.focusTrap = POPOVER_DEFAULTS.FOCUS_TRAP;
+        this.hideOnOutsideClick = POPOVER_DEFAULTS.HIDE_ON_CLICK_OUTSIDE;
+        this.interactive = POPOVER_DEFAULTS.INTERACTIVE;
+        this.preventScroll = POPOVER_DEFAULTS.PREVENT_SCROLL;
+        this.size = POPOVER_DEFAULTS.SIZE;
     }
     /**
      * Sets the type attribute for the tooltip component.

package/dist/components/tooltip/tooltip.constants.d.ts

@@ -5,8 +5,13 @@ declare const TOOLTIP_TYPES: {
     readonly NONE: "none";
 };
 declare const DEFAULTS: {
+    readonly ARIA_HIDDEN: "true";
     readonly BACKDROP: false;
     readonly DELAY: "0,0";
+    readonly DISABLE_ARIA_EXPANDED: true;
+    readonly HIDE_ON_BLUR: true;
+    readonly HIDE_ON_ESCAPE: true;
+    readonly TRIGGER: "mouseenter focusin";
     readonly OFFSET: 4;
     readonly PLACEMENT: "top";
     readonly SHOW_ARROW: true;

package/dist/components/tooltip/tooltip.constants.js

@@ -1,5 +1,5 @@
 import utils from '../../utils/tag-name';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('tooltip');
 const TOOLTIP_TYPES = {
     DESCRIPTION: 'description',
@@ -7,8 +7,13 @@ const TOOLTIP_TYPES = {
     NONE: 'none',
 };
 const DEFAULTS = {
+    ARIA_HIDDEN: 'true',
     BACKDROP: false,
     DELAY: '0,0',
+    DISABLE_ARIA_EXPANDED: true,
+    HIDE_ON_BLUR: true,
+    HIDE_ON_ESCAPE: true,
+    TRIGGER: `${TRIGGER.MOUSEENTER} ${TRIGGER.FOCUSIN}`,
     OFFSET: 4,
     PLACEMENT: POPOVER_PLACEMENT.TOP,
     SHOW_ARROW: true,