lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/timepicker/form-element.slds.css

@@ -0,0 +1,281 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+  @supports (--styling-hooks: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* FORM ELEMENT: BASE */
+    :host([data-render-mode="shadow"]) .slds-form-element {
+        position: relative;
+        min-width: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--sds-g-color-neutral-base-30, #444444);
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .slds-form-element__helper {
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        align-self: center;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+        font-weight: var(--sds-g-font-weight-4, 400);
+        color: var(--sds-g-color-neutral-base-10, #181818);
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+        vertical-align: bottom;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+        padding: 0;
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        padding-inline-start: 0;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
+    }
+
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+          float: left;
+          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+          float: left;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          margin-inline-start: 33%;
+          clear: none; /* Reset clear: left when switching to horizontal form layout */
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+            width: auto;
+            max-width: 100%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
+}

package/src/lightning/timepicker/timepicker.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './timepicker.slds.css';
+@import './form-element.slds.css';

package/src/lightning/timepicker/timepicker.html

@@ -10,6 +10,7 @@
     </template>
     <div class="slds-form-element__control">
         <lightning-base-combobox
+            part="input-container"
             onready={handleReady}
             autocomplete={autocomplete}
             dropdown-height="small"
@@ -33,8 +34,11 @@
             onblur={handleBlur}
             onselect={handleTimeSelect}
             data-aria-invalid={computedAriaInvalid}
+            root-aria-node={rootAriaNode}
+            input-described-by-elements={ariaDescribedByElements}
+            aria-error-message-elements={ariaErrorMessageElements}
         >
         </lightning-base-combobox>
     </div>
-        <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{_errorMessage}</div>
+    <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{_errorMessage}</div>
 </template>

package/src/lightning/timepicker/timepicker.js

@@ -1,11 +1,11 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
-
 import labelInvalidDate from '@salesforce/label/LightningDateTimePicker.invalidDate';
 import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeOverflow';
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, track, api } from 'lwc';
+import { track, api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { getTimeToHighlight } from './utils';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -22,6 +22,7 @@ import {
     synchronizeAttrs,
     normalizeString,
     computeAriaInvalid,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import { normalizeVariant, VARIANT } from 'lightning/inputUtils';
 
@@ -40,7 +41,7 @@ const TIME_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningTimePicker extends LightningElement {
+export default class LightningTimePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -57,6 +58,8 @@ export default class LightningTimePicker extends LightningElement {
     @track _readonly = true;
     @track _describedByElements = [];
 
+    @api rootAriaNode;
+
     /**
      * Controls auto-filling of the input. Set the attribute to pass
      * through autocomplete values to be interpreted by the browser.
@@ -72,6 +75,11 @@ export default class LightningTimePicker extends LightningElement {
     @api name;
     @api placeholder = '';
 
+    @api
+    get comboboxComponent() {
+        return this.template.querySelector('lightning-base-combobox');
+    }
+
     @api messageWhenValueMissing;
     _ariaDescribedByElements;
     _timeStyle = TIME_STYLE.SHORT;
@@ -206,6 +214,7 @@ export default class LightningTimePicker extends LightningElement {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     @api
@@ -268,6 +277,7 @@ export default class LightningTimePicker extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
     }
 
@@ -275,24 +285,19 @@ export default class LightningTimePicker extends LightningElement {
         this.connected = false;
     }
 
-    synchronizeA11y() {
-        const label = this.template.querySelector('label');
-        const comboBox = this.template.querySelector('lightning-base-combobox');
-        let describedByElements = [];
-        if (this._ariaDescribedByElements) {
-            describedByElements = describedByElements.concat(
-                this._ariaDescribedByElements
-            );
-        }
+    @api ariaErrorMessageElement;
 
+    get ariaErrorMessageElements() {
+        const elements = [this.ariaErrorMessageElement];
         if (this._errorMessage) {
-            const errorMessage = this.template.querySelector(
-                '[data-error-message]'
-            );
-            describedByElements.push(errorMessage);
+            elements.push(this.template.querySelector('[data-error-message]'));
         }
+        return elements;
+    }
+
+    synchronizeA11y() {
+        const label = this.template.querySelector('label');
 
-        comboBox.inputDescribedByElements = describedByElements;
         synchronizeAttrs(label, {
             for: this._mainInputId,
         });

package/src/lightning/timepicker/timepicker.slds.css

@@ -0,0 +1,18 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+@supports (--styling-hooks: '') {
+  /* ASSISTIVE TEXT */
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }
+}

package/src/lightning/toast/toast.js-meta.xml

@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
+     <minApiVersion>59.0</minApiVersion>
+    <support>BETA</support>
 </LightningComponentBundle>

package/src/lightning/toastContainer/__docs__/toastContainer.md

@@ -1,40 +1,24 @@
-The `lightning-toast-container` component manages a list of toast components and its order. Currently, a single page-level toast container is supported.
+Use the `lightning/toastContainer` module (Beta) to manage a list of toast components and their order. Pages support a single page-level toast container. 
 
-The component uses `LightningToast` as the toast component to display messages.
+This module is available only for LWR Sites for Experience Cloud. For more information, see [Create Components for LWR Sites](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/get_started_components.htm).
 
-Set the maximum of toasts shown at a time with the `maxToasts` attribute, set the position of the component relative to its container component with `containerPosition` attribute and set the toasts position with `toastPosition` attribute.
-
-The following example will create a toast container component. This component will handle and display all the page-level toast messages. Only 1 page-level container exists at a time.
-
-By default, the toast container shows, at most, 3 toast notifications at the same time.  The most recent toast will display visually at the top or first, and the oldest toast notification will be displayed at the bottom of the toast container, or last. The container position is fixed to the viewport and the toast component will display at the top and center of the container.
+This example creates a basic toast container component that handles and displays all the page-level toast messages.
 
 ```javascript
 const toastContainer = ToastContainer.instance();
 ```
 
-### Component attributes
-
-The `maxToasts` attribute sets the maximum number of toasts shown in the container. It accepts any non-zero positive number. Default value is 3.
+#### Customization
 
-The `containerPosition` attribute changes the container position. It supports these values.
+By default, the toast container shows a maximum of 3 toast notifications at the same time. Set the `maxToasts` attribute to change the maximum number of toasts shown at a time.
 
-| Value | Explanation  |
-|-------| ------------ |
-| `fixed` (default) |  positioned relative to the initial containing block established by the viewport |
-| `absolute` | positioned relative to its closest positioned ancestor |
+Toast components display at the top center of the container by default. The most recent toast displays at the top of the container, and the oldest toast notification displays at the bottom. Change the toasts' position in the container with the `toastPosition` attribute.
 
-The `toastPosition` attribute sets the toast components position in the container.
+The container position is fixed to the viewport. Adjust the position of the container relative to its parent element with the `containerPosition` attribute. This attribute has two values. 
+- `fixed` - positions the container relative to the initial containing block established by the viewport.
+- `absolute` - positions the container relative to a positioned parent element.
 
-| Value | Explanation  |
-|-------| ------------ |
-| `top-center` (default) | toasts shown at top-center in the container |
-| `top-left` | toasts shown at top-left in the container |
-| `top-right` | toasts shown at top-right in the container |
-| `bottom-center` | toasts shown at bottom-center in the container |
-| `bottom-left` | toasts shown at bottom-left in the container |
-| `bottom-right` | toasts shown at bottom-right in the container |
-
-The following example changes the page-level toast container to show at most 5 toast messages at one time at the top-right in the viewport (i.e. `containerPosition` is `fixed` by default).
+This example creates a page-level toast container in the top-right in the viewport that shows a maximum of 5 toast messages at one time.
 ```javascript
 // c/myApp.js
 import { LightningElement } from 'lwc';
@@ -49,11 +33,7 @@ export default class MyApp extends LightningElement {
 }
 ```
 
-### Keyboard accessibility
-Toast container is part of the [global focus orchestration](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#global-orchestration) which allows users to use the keyboard shortcut to navigate between toasts:
-- Press `Command` + `F6` for Mac OS or `Control` + `F6` for others to move focus to next toast, if any
-- Press `Shift` + `Command` + `F6` for Mac OS or `Shift` +`Control` + `F6` for others to move focus to the previous toast, if any.
-
-
-### Future support (244+)
-- Local toast container support - allows multiple toast containers in a page. A component can have its own toast container to display toast messages relevant to the component's context.
+#### Accessibility
+Toast container follows the SLDS [Global Focus Orchestration](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#global-orchestration) accessibility guidelines, which allow users to use the keyboard shortcut to navigate between toasts.
+- Press `Control` + `F6` or `Command` + `F6` for Mac OS to move focus to next toast, if any.
+- Press `Shift` + `Control` + `F6` or `Shift` + `Command` + `F6` for Mac OS to move focus to the previous toast, if any.

package/src/lightning/toastContainer/toastContainer.js

@@ -96,11 +96,9 @@ export default class ToastContainer extends LightningOverlay {
     }
 
     /**
-     * toast container position
-     * controls the position of the toast container div related to the containing element
-     * options: 'absolute', 'fixed'
-     * @returns {string}
-     * @default 'fixed'
+     * Controls the position of the toast container <div> related to the containing element. Supported values are 'absolute' and 'fixed'.
+     * @type {string}
+     * @default fixed
      */
     @api get containerPosition() {
         return this._containerPosition;
@@ -117,9 +115,8 @@ export default class ToastContainer extends LightningOverlay {
     }
 
     /**
-     * this attribute controls the maximum number of toast components shown at a given time
-     * if user enters a zero or negative number, the value will default to 3
-     * @returns {number}
+     * Sets the maximum number of toast components shown at a given time.
+     * @type {number}
      * @default 3
      */
     @api get maxToasts() {
@@ -134,7 +131,7 @@ export default class ToastContainer extends LightningOverlay {
     }
 
     /**
-     * return the div element which hosts the toast components
+     * Returns the <div> element that hosts the toast components.
      * @return {HTMLElement}
      */
     get root() {
@@ -142,11 +139,9 @@ export default class ToastContainer extends LightningOverlay {
     }
 
     /**
-     * toast position
-     * controls the final position of toast components shown in the toast container
-     * options: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'
-     * @returns {string}
-     * @default 'top-center'
+     * Controls the position of toast components inside the toast container. Supported values are 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', and 'bottom-right'.
+     * @type {string}
+     * @default top-center
      */
     @api get toastPosition() {
         return this._toastPosition;
@@ -167,7 +162,7 @@ export default class ToastContainer extends LightningOverlay {
     }
 
     /**
-     * override function to "close" the toast container (i.e. remove it from the DOM)
+     * Overrides the "close" function of the toast container.
      */
     @api close() {
         // reset before closing the container

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -1,12 +1,8 @@
 import { createElement } from 'lwc';
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
-import {
-    assert,
-    guid,
-    normalizeAriaAttribute,
-    normalizeString,
-} from 'lightning/utilsPrivate';
+import { assert, guid, normalizeString, isCSR } from 'lightning/utilsPrivate';
 import LightningPrimitiveBubble from 'lightning/primitiveBubble';
+import AriaObserver from 'lightning/ariaObserver';
 export { Direction } from 'lightning/positionLibrary';
 
 export const BUBBLE_PREFIX = `salesforce-lightning-tooltip-bubble`;
@@ -80,6 +76,7 @@ export class Tooltip {
     _visible = false;
     _isFocusEvent = false;
     _initialResize = true;
+    _ariaObserver = null;
 
     _config = {};
 
@@ -108,7 +105,7 @@ export class Tooltip {
 
         // If a tooltip element is not given, fall back on the globally shared instance.
         this._element = config.element;
-        if (!this._element) {
+        if (isCSR && !this._element) {
             this._element = getCachedBubbleElement;
             const bubbleElement = getCachedBubbleElement();
             if (bubbleElement.parentNode === null) {
@@ -150,16 +147,23 @@ export class Tooltip {
                     this.addInfoListeners();
                     break;
             }
-            const ariaDescribedBy = normalizeAriaAttribute([
-                target.getAttribute(ARIA_DESCRIBEDBY),
-                this._element().contentId,
-            ]);
-            target.setAttribute(ARIA_DESCRIBEDBY, ariaDescribedBy);
+
+            this._ariaObserver = new AriaObserver(this._root);
+
+            this._ariaObserver.connect({
+                attribute: ARIA_DESCRIBEDBY,
+                targetNode: this._target(),
+                relatedNodes: this._element(),
+            });
 
             this._initialized = true;
         }
     }
 
+    disconnect() {
+        this._ariaObserver.disconnect();
+    }
+
     addInfoListeners() {
         const target = this._target();
 
@@ -169,9 +173,16 @@ export class Tooltip {
             );
             // Unlike the tooltip in Aura, we want clicks and keys to dismiss the tooltip.
             ['mouseleave', 'blur', 'click', 'keydown'].forEach((name) =>
-                target.addEventListener(name, (event) =>
-                    this.hideIfNotSelfCover(event)
-                )
+                target.addEventListener(name, (event) => {
+                    if (!this._visible) {
+                        return;
+                    }
+                    this.hideIfNotSelfCover(event);
+
+                    if (event.key === 'Escape') {
+                        event.stopPropagation();
+                    }
+                })
             );
         }
     }
@@ -232,6 +243,9 @@ export class Tooltip {
                     this.toggle();
                 } else if (this._visible) {
                     this.hide();
+                    if (event.key === 'Escape') {
+                        event.stopPropagation();
+                    }
                 }
             });
         }
@@ -291,15 +305,10 @@ export class Tooltip {
         this._visible = true;
         this._initialResize = true;
         const tooltip = this._element();
+        tooltip.visible = this._visible;
+        tooltip.content = this._value;
 
-        /*
-            When tabbing, populating the tooltip and making it visible too early can lead to bad interactions
-            when the mouse is hovering over a tooltip. W-12559092
-        */
-        if (!this._isFocusEvent) {
-            tooltip.content = this._value;
-            tooltip.visible = this._visible;
-        }
+        this._ariaObserver.sync();
 
         this.startPositioning();
         document.addEventListener('keydown', this.handleEscape);