lightning-base-components 1.27.2-alpha → 1.28.3-alpha

package/src/lightning/modalBase/modalBase.js

@@ -3,43 +3,28 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { api } from 'lwc';
+import { api, track } from 'lwc';
 import { features } from 'lightning/features';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import {
-    ARIA,
-    hasAnimation,
-    isAriaDescriptionSupported,
-    isCSR,
-    makeEverythingExceptElementInert,
-    normalizeString,
-    restoreInertness,
-    synchronizeAttrs,
-} from 'lightning/utilsPrivate';
+import { ARIA, hasActiveTooltip, hasAnimation, isAriaDescriptionSupported, makeEverythingExceptElementInert, normalizeString, restoreInertness, synchronizeAttrs, } from 'lightning/utilsPrivate';
 import { instanceName, secure } from 'lightning/overlayUtils';
-import {
-    getElementWithFocus,
-    returnFocusToElement,
-} from 'lightning/focusUtils';
+import { getElementWithFocus, returnFocusToElement, } from 'lightning/focusUtils';
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 import AriaObserver from 'lightning/ariaObserver';
 import { modalFocusinEventHandler } from 'lightning/modalUtils';
 import orgHasWCAGResizeReflowSC from '@salesforce/accessCheck/ComponentAccessibility.orgHasWCAGResizeReflowSC';
-
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
 const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
-
+let lwcModalCount = 0;
+let originalBodyOverflow = null;
 export default class LightningModalBase extends LightningShadowBaseClass {
-    // this is visible in DOM, changed from 'lightning-modal-base'
     static [instanceName] = 'lightning-modal-base';
-
-    // private tracked state
     initialRender = true;
     autoFocusCompletedOnce = false;
     timeoutId = 0;
@@ -48,10 +33,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     closeButtonAltText = closeButtonAltText;
     disableCloseBtnMessage = disableCloseBtnMessage;
     isModalClosing = false;
-    // screen size private tracked state
     isSmallScreenSize = null;
-
-    // modalHeader, child
     headerRegistered = false;
     headerHeight = 0;
     headerDefaultSlotIsPopulated = false;
@@ -60,8 +42,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     headerLabelId = null;
     headerLabelIsPopulated = null;
     headerTitleRef = null;
-
-    // modalBody, child
     bodyRegistered = false;
     bodyDefaultSlotIsPopulated = false;
     bodySlotHasRendered = false;
@@ -69,50 +49,34 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     baseUpdateBodyCallback = null;
     bodyResizeScheduled = false;
     bodyTabElemRef = null;
-    // eventing state utilized when modalBody present
     windowResizeEventBound = false;
     windowOrientationEventBound = false;
     portraitMatchMedia = null;
     screenOrientationChangeHandler = null;
-
-    // state utilized when performing keyboard focus trap
     focusinEventBound = false;
     lastFocusedElement = null;
-
-    // modalFooter, child
     footerRegistered = false;
     footerHeight = 0;
     footerSlotHasRendered = false;
     footerDefaultSlotIsPopulated = false;
-
-    // aria attributes
     modalLabel = null;
     modalLabelledBy = null;
     modalDescribedBy = null;
-    // currently used for disableClose
     showAriaLiveMessage = false;
     ariaLiveMessage = '';
-
-    // modal features
     isModalOpen = false;
     isModalTransitioningIn = false;
-    // modal background elements
     savedInertElements = [];
-    // before modal opened, element previously focused
+    @track
     savedActiveElement;
-
-    // accessibility
     ariaObserver = null;
-
+    updateHeaderCallback;
+    updateFooterCallback;
+    _resizing;
     constructor() {
         super();
         this.ariaObserver = new AriaObserver(this);
     }
-
-    /**
-     * <lightning-modal> label value
-     * Text to display as the heading at the top of the modal
-     */
     get label() {
         const modal = this.modal;
         if (!modal) {
@@ -120,12 +84,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
         return modal.label;
     }
-
-    /**
-     * <lightning-modal> description value
-     * Text used for the accessible description of the modal. see updateAriaDescription()
-     * Note: this value is not visible in the UI, and only to screen readers
-     */
     get description() {
         const modal = this.modal;
         if (!modal) {
@@ -133,14 +91,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
         return modal.description;
     }
-
-    /**
-     * Normalize customer set values to api size
-     * Valid values are small, medium, large, and full. The default is medium.
-     * @param sizeValue string representing api size value
-     * @returns {string} string representing normalized api size value
-     * @default medium
-     */
     normalizeSize(sizeValue) {
         const sizeDefault = SIZE_MEDIUM;
         return normalizeString(sizeValue, {
@@ -148,75 +98,17 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             validValues: [SIZE_FULL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE],
         });
     }
-
-    /**
-     * Determine if this._size has been set yet.
-     * @returns {boolean} true means not yet set, false means has been set
-     */
     get isModalSizeNotSet() {
         return this._size === null;
     }
-
-    // we don't set the value of this._size, *until this.modal.size can be assessed*
-    // this.modal is a child element of modalBase, and it doesn't yet exist during
-    // the component's initial render.
     _size = null;
-
-    /**
-     * Get the current modal size.
-     * If modalReducedMotion gate=true, return this._size
-     * If modalReducedMotion gate=true, attempt to get this.modal.size directly
-     * Valid values are small, medium, large, and full. The default is medium.
-     * @type {string}
-     * @default medium
-     */
     get size() {
         const sizeDefault = SIZE_MEDIUM;
-        // if modalReduceMotionFix gate=true, new reactive behavior
-        // added due to local variable use which LWC engine observes changes
-        // while the component attempts to resolve this.modal
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            // if _size set return it, or provide 'medium' which is the default
-            return this._size || sizeDefault;
-        }
-        // if modalReduceMotionFix gate=false, original non-reactive
-        // no bug exists when hasAnimation=true
-        // a bug exists when hasAnimation=false, and !this.modal
-        // where customer api size will always be stuck at sizeDefault, 'medium'
-        // and so SLDS CSS class is also applied incorrectly
-        const { modal } = this;
-        if (!modal) {
-            return sizeDefault;
-        }
-        // get the size value from <lightning-modal>
-        return this.normalizeSize(modal.size);
-    }
-
-    /**
-     * Set the current modal size via this._size.
-     * Currently `set size` exists behind modalReduceMotionFix gate
-     * This new code encapsulates _size setting behavior
-     * Valid values are small, medium, large, and full. The default is medium.
-     * @type {string}
-     * @default medium
-     */
+        return this._size || sizeDefault;
+    }
     set size(value) {
-        // if modalReduceMotionFix gate=true, new reactive behavior
-        // added due to this._size (modalBase local) so LWC engine tracks change
-        // while modalBase (parent) attempts to resolve this.modal.size (child)
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            // when modalBase and its child modal are first rendering,
-            // it is common that this.modal doesn't yet exist.
-            // if modal doesnt yet exist, we keep this._size = null
-            // if modal exists, size value gets normalized, and _size = value
-            this._size = value ? this.normalizeSize(value) : null;
-        }
+        this._size = value ? this.normalizeSize(value) : null;
     }
-
-    /**
-     * <lightning-modal> disableClose value
-     * Get attribute to trigger disabling ability to dismiss modal temporarily
-     */
     get disableClose() {
         const modal = this.modal;
         if (!modal) {
@@ -224,64 +116,25 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
         return modal.disableClose;
     }
-
-    /**
-     * Public method to get the modal slot element
-     * @type {(HTMLElement|null)} The modal slot, currently a div elem
-     */
     @api
     get defaultSlot() {
         return this.template.querySelector('[data-slot]');
     }
-
-    /**
-     * Private method to get the modal section element, the outer wrapper for modal elements
-     * @returns {(HTMLElement|null)} The section element, currently the section[role="dialog"]
-     * @private
-     */
     get modalWrapper() {
         return this.template.querySelector('[data-modal]');
     }
-
-    /**
-     * Private method to get the lightning-modal element inside the div slot
-     * This element has the api for .close, size, label
-     * @returns {(HTMLElement|null)} The modal inside <div data-slot>: <lightning-modal>
-     * @private
-     */
     get modal() {
-        return (
-            (isCSR && this.defaultSlot && this.defaultSlot.childNodes[0]) ||
-            null
-        );
-    }
-
-    /**
-     * Private method to get the modal span description element
-     * This span is present when the accessible 'description' api text is present,
-     * and aria-description isn't supported.  Instead, aria-describedby is utilized
-     * @returns {(HTMLElement|null)} The modal span element for IDRef linkage
-     * @private
-     */
+        return ((!import.meta.env.SSR &&
+            this.defaultSlot &&
+            this.defaultSlot.childNodes[0]) ||
+            null);
+    }
     get modalDescSpan() {
         return this.template.querySelector('[data-aria-description]');
     }
-
-    /**
-     * Get the lightning-button-icon (close button element)
-     * @returns {(HTMLElement|null)}
-     * @private
-     */
     get modalCloseButton() {
         return this.template.querySelector('[data-close-button]');
     }
-
-    /**
-     * Get the lightning-modal element within the modal slot
-     * currently modalBase's slot is a div element, not a slot element
-     * @returns {(HTMLElement|null)}
-     * @private
-     */
     get modalElement() {
         const modalSlot = this.defaultSlot;
         if (!modalSlot) {
@@ -289,23 +142,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
         return modalSlot.querySelector('lightning-modal');
     }
-
-    /**
-     * Get the lightning-modal element's backdrop
-     * @returns {(HTMLElement|null)}
-     * @private
-     */
     get modalBackdrop() {
         return this.template.querySelector('[data-backdrop]');
     }
-
-    /**
-     * Get the background element height
-     * used to calculate max height on the modalBody using
-     * modal -> modalBody callback
-     * @returns {number}
-     * @private
-     */
     get backdropDimensions() {
         const backdropElem = this.modalBackdrop;
         const backdropRect = backdropElem
@@ -317,45 +156,20 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             width: width || 0,
         };
     }
-
-    /**
-     * Gets the CSS classes applicable to the outer modal wrapper element
-     * Modal foreground triggers on this.isModalTransitioningIn to
-     * fade in/out or animate up/down
-     * @returns {string} CSS class string
-     * @private
-     */
     get modalCssClasses() {
-        let classes = classSet('slds-modal fix-slds-modal');
-        // how the value of `size` is calculated is influenced by
-        // by whether modalReduceMotionFix gate is enabled or disabled
-        // if enabled, set size is used to set size value to this._size, along
-        // if disabled, get size handles determing the value from this.modal
-        let modalSize;
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            const sizeDefault = SIZE_MEDIUM;
-            // utilize this._size var to make modalCssClasses reactive
-            modalSize = this._size === null ? sizeDefault : this.size;
-        } else {
-            // set modalSize the original way
-            modalSize = this.size;
-        }
-
+        const classes = classSet('slds-modal fix-slds-modal');
+        const sizeDefault = SIZE_MEDIUM;
+        const modalSize = this._size === null ? sizeDefault : this.size;
         if (hasAnimation()) {
-            // .slds-fade-in-open not present to trigger opacity animation
-            // when later this.isModalTransitioningIn is set to TRUE
-            // animation then occurs
             classes.add({
                 'slds-fade-in-open': this.isModalTransitioningIn,
             });
-        } else {
-            // no animation occurs if the .slds-fade-in-open class
-            // is immediately present in DOM
+        }
+        else {
             classes.add({
                 'slds-fade-in-open': true,
             });
         }
-        // don't add animation related css classes in this group
         classes.add({
             'slds-modal_full': modalSize === SIZE_FULL,
             'slds-modal_medium': modalSize === SIZE_MEDIUM,
@@ -364,116 +178,54 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         });
         return classes.toString();
     }
-
-    /**
-     * Gets the CSS classes applicable to the modal background element
-     * Backdrop triggers on this.isModalOpen to fade/animate in first
-     * @returns {string} CSS class string
-     * @private
-     */
     get modalBackdropCssClasses() {
         let classes = classSet('slds-backdrop fix-slds-backdrop');
         if (hasAnimation()) {
             classes.add({
                 'slds-backdrop_open': this.isModalOpen,
             });
-        } else {
-            // no fading animation occurs when .slds-backdrop_open
-            // is immediately present in the DOM
+        }
+        else {
             classes = classes.add({
                 'slds-backdrop_open': true,
             });
         }
         return classes.toString();
     }
-
     get isDescriptionSet() {
         const { description } = this;
-        // check for being set, as well as not just a description with spaces
-        // avoiding setting aria-describedby on section pointing to
-        // an empty SPAN element
         return !!description?.trim().length;
     }
-
-    /**
-     * Compute the correct lightning-button-icon CSS class to use
-     * for the size="full" behaviors, based upon the screen size
-     * threshold.  Two classes are added for full screen behavior
-     * to handle edge cases where customers change background of the
-     * modal header so the close button maintains visibility for a11y
-     * @private
-     */
-    // slds-button slds-button_icon slds-modal__close
     get computedCloseButtonCssClass() {
-        let classes = classSet(
-            'slds-button slds-button_icon slds-modal__close'
-        );
-        const fullScreenActive =
-            this.isSmallScreenSize && this.size === SIZE_FULL;
+        const classes = classSet('slds-button slds-button_icon slds-modal__close');
+        const fullScreenActive = this.isSmallScreenSize && this.size === SIZE_FULL;
         classes.add({
             'slds-modal_full-close-button': fullScreenActive,
         });
         return classes.toString();
     }
-
-    /**
-     * Determines if aria-describedby should be set, and the span tag shown
-     * occurs only when aria-description is not supported.
-     * ex: when description api is set to '' or '     ',
-     * we don't want to show the span or set aria-describedby
-     * @private
-     */
     get showAriaDescribedBy() {
         return !isAriaDescriptionSupported() && this.isDescriptionSet;
     }
-
-    /**
-     * When window is resizing, need to debounce callback
-     * Track internal variable _resizing
-     * @returns {Boolean}
-     * @private
-     */
     get modalResizing() {
         if (!this._resizing) {
             this._resizing = this.scheduleWindowResizeEvent.bind(this);
         }
         return this._resizing;
     }
-
-    /**
-     * Toggle on and off disable close button feature
-     * typically used very briefly when devs want to save form data to backend
-     * and do not want the form to be closed before the save has
-     * completed successfully
-     * toggleDisableCloseButton sets local state to
-     * (a) toggle display an aria-live message
-     * (b) toggle set disabled on the <lightning-button-icon>
-     * (c) toggle set aria-busy value on
-     * elsewhere in modalBase and modal, ESC key is also disabled, and
-     * calls to this.close() are prevented
-     */
     toggleDisableCloseButton() {
-        // this.disableCloseButton is local modalBase state
-        // this.disableClose is modal.js @api state
-        // we track both in order to handle transition correctly
-        const isSwitchingToDisabled =
-            !this.disableCloseButton && this.disableClose;
-        /* Future enhancement possibility - trigger setInterval to remove and
-           again add back 'Processing' text, as this will indicate to the screen
-           reader user that the interface continues to be busy
-        */
+        const isSwitchingToDisabled = !this.disableCloseButton && this.disableClose;
         const disableCloseButtonMessage = isSwitchingToDisabled
             ? this.disableCloseBtnMessage
             : '';
         if (isSwitchingToDisabled) {
-            // Should disable close button
             this.ariaLiveMessage = disableCloseButtonMessage;
             this.showAriaLiveMessage = true;
             synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: true });
             synchronizeAttrs(this.modalCloseButton, { disabled: 'disabled' });
             this.disableCloseButton = true;
-        } else {
-            // Should enable close button
+        }
+        else {
             this.ariaLiveMessage = disableCloseBtnMessage;
             this.showAriaLiveMessage = false;
             synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: null });
@@ -481,80 +233,54 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             this.disableCloseButton = false;
         }
     }
-
-    /**
-     * Saves the current active focused element on modal creation
-     * in order to be able to set focus back to that previous element
-     * @private
-     */
     saveActiveElement() {
         this.savedActiveElement = getElementWithFocus();
     }
-
-    /**
-     * Renders most background elements inert, while modal active
-     * and saves them for later setting background elements active
-     * @private
-     */
     renderBackgroundInert() {
-        this.savedInertElements = makeEverythingExceptElementInert(
-            this.template.host
-        );
-    }
-
-    /**
-     * Renders most background elements active, as modal closes
-     * @private
-     */
+        this.savedInertElements = makeEverythingExceptElementInert(this.template.host);
+    }
     renderBackgroundActive() {
         restoreInertness(this.savedInertElements);
         this.savedInertElements = [];
     }
-
-    /**
-     * Returns focus to background element previously focused,
-     * before modal existed
-     * @private
-     */
     returnFocusToBackground() {
         const { savedActiveElement } = this;
         const elementWasFocused = returnFocusToElement(savedActiveElement);
         if (!elementWasFocused) {
-            // eslint-disable-next-line no-console
             console.warn('Modal :: Nothing to return focus to');
         }
     }
-
-    /**
-     * Queue the showing of the modal
-     * utilized for triggering fade in modal CSS class additions
-     * @private
-     */
     queueShowModal() {
         if (this.isModalOpen && !this.isModalTransitioningIn) {
             this.isModalTransitioningIn = true;
         }
     }
-
-    /**
-     * Opening the modal involves first performing necessary steps to
-     * prepare for when the modal closes
-     * isModalOpen triggers fade in CSS class on modal background
-     * @private
-     */
     openModal() {
         this.saveActiveElement();
         this.renderBackgroundInert();
         if (!this.isModalOpen) {
             this.isModalOpen = true;
+            if (lwcModalCount === 0) {
+                if (!import.meta.env.SSR) {
+                    originalBodyOverflow = getComputedStyle(document.body).overflow;
+                    document.body.style.overflow = 'hidden';
+                }
+            }
+            lwcModalCount++;
+        }
+    }
+    handleModalCloseState() {
+        if (this.isModalOpen) {
+            this.isModalOpen = false;
+            lwcModalCount--;
+            if (lwcModalCount === 0) {
+                if (!import.meta.env.SSR) {
+                    document.body.style.overflow = originalBodyOverflow;
+                }
+                originalBodyOverflow = null;
+            }
         }
     }
-
-    /**
-     * Closing the modal wraps up the modal lifecycle
-     * before it is fully removed
-     * @private
-     */
     closeModal() {
         this.returnFocusToBackground();
         this.renderBackgroundActive(this.savedInertElements);
@@ -563,67 +289,32 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             this.ariaObserver = undefined;
         }
     }
-
-    /**
-     * Unsets the aria-labelledby or aria-label values
-     * when no label value is provided
-     * modal requires 'label' value either at modalHeader or at modal
-     * @private
-     */
     unsetAriaLabelAndError = () => {
-        // unset any previously set aria values
         synchronizeAttrs(this.modalWrapper, {
             [ARIA.LABELLEDBY]: null,
             [ARIA.LABEL]: null,
         });
-        // console.error when label empty
         this.errorLabelRequired();
         if (this.ariaObserver) {
             this.ariaObserver.disconnect();
         }
     };
-
-    /**
-     * Set either 'aria-describedby' or 'aria-description' value for accessibility
-     * based on the presence of 'description' api value
-     * and support of the newer ARIA 'aria-description'.
-     * At launch, modern browsers Firefox and Safari DO NOT support it. IE11 won't.
-     * @private
-     */
     updateAriaDescription() {
         const { description } = this;
-        // if aria-description is supported && description set, set aria-description
         if (isAriaDescriptionSupported()) {
             const descriptionToSet = this.isDescriptionSet ? description : null;
-            // set aria-description if set, otherwise unset with null
             return synchronizeAttrs(this.modalWrapper, {
                 [ARIA.DESCRIPTION]: descriptionToSet,
             });
         }
-        // if aria-description not supported, and description is set,
-        // and span id exists, or unset aria-describedby with null
         const spanId = (this.isDescriptionSet && this.modalDescSpan.id) || null;
         return synchronizeAttrs(this.modalWrapper, {
             [ARIA.DESCRIBEDBY]: spanId,
         });
     }
-
-    /**
-     * Sets the aria-labelledby or aria-label values for accessibility
-     * based on presence of modalHeader child
-     * modal requires 'label' value either at modalHeader or at modal
-     * @private
-     */
     updateAriaLabel() {
-        const {
-            label,
-            headerRegistered,
-            headerLabelId,
-            headerLabelIsPopulated,
-        } = this;
+        const { label, headerRegistered, headerLabelId, headerLabelIsPopulated, } = this;
         const labelIsEmpty = label === '' || label.trim().length === 0;
-        // when header is present,
-        // headerLabelIsPopulated is equivalent labelIsEmpty, but from modalHeader level
         if (headerRegistered) {
             if (headerLabelId && headerLabelIsPopulated) {
                 if (this.ariaObserver) {
@@ -634,84 +325,49 @@ export default class LightningModalBase extends LightningShadowBaseClass {
                     });
                 }
                 synchronizeAttrs(this.modalWrapper, { [ARIA.LABEL]: null });
-                // if labelId not set OR header label value not set,
-                // must console.error
-            } else {
-                this.unsetAriaLabelAndError();
             }
-            // unset if no header (gets removed dynamically, or never present)
-        } else {
-            // fallback to headless variant
-            // check label is actually set,
-            // and use aria-label instead of aria-labelledby
-            if (!labelIsEmpty) {
-                synchronizeAttrs(this.modalWrapper, {
-                    [ARIA.LABELLEDBY]: null,
-                    [ARIA.LABEL]: label,
-                });
-            } else {
-                // in headless variant, must have label value set, unless the modal
-                // is actively closing
-                if (!this.isModalClosing) {
-                    this.unsetAriaLabelAndError();
-                }
+            else {
+                this.unsetAriaLabelAndError();
             }
         }
+        else if (!labelIsEmpty) {
+            synchronizeAttrs(this.modalWrapper, {
+                [ARIA.LABELLEDBY]: null,
+                [ARIA.LABEL]: label,
+            });
+        }
+        else if (!this.isModalClosing) {
+            this.unsetAriaLabelAndError();
+        }
     }
-
-    /**
-     * Construct and show console.error for missing label value
-     * Modal component requires the label attribute, either via
-     * modalHeader or modal to have accessibility set correctly
-     * @private
-     */
     errorLabelRequired() {
-        let errorMsg =
-            'LightningModal - Templates with <lightning-modal-header> should define the label attribute as an attribute on <lightning-modal-header label="Modal Heading"> .';
+        let errorMsg = 'LightningModal - Templates with <lightning-modal-header> should define the label attribute as an attribute on <lightning-modal-header label="Modal Heading"> .';
         errorMsg +=
             ' Templates without <lightning-modal-header> should define the label attribute in the Modal.open({ label: "Modal Heading" })';
         console.error(errorMsg);
     }
-
-    /**
-     * Handle the close button click, or via ESC key
-     * @private
-     */
     handleCloseClick() {
-        // calls handlePrivateClose
         if (!this.disableCloseButton) {
             this.modal.close();
         }
     }
-
-    /**
-     * Handle privateclose event firing is prevented from occurring
-     * when this.disableClose set true in modal.js
-     * @param e
-     */
     handlePrivateClose(e) {
         if (!(e.detail && e.detail[secure])) {
             console.error('Invalid access to privateclose event');
             return;
         }
-
-        // set isModalClosing boolean, to prevent intentional error
-        // when checking for presence of api 'label' value
+        this.handleModalCloseState();
         this.isModalClosing = true;
         if (hasAnimation()) {
-            /// triggers the disappearance of the foreground modal elements
             this.modalWrapper.classList.remove('slds-fade-in-open');
             this.modalBackdrop.classList.remove('slds-backdrop_open');
-            // wait until modalWrappers animation completes, then proceed
             this.modalBackdrop.addEventListener('transitionend', () => {
                 e.detail.resolve();
             });
-        } else {
-            // skip animation, resolve immediately
+        }
+        else {
             e.detail.resolve();
         }
-        // disconnectedCallback doesn't get called on .close()
-        // unregistering child components
         if (this.headerRegistered && this.unregisterHeader) {
             this.unregisterHeader();
         }
@@ -723,164 +379,72 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
         this.closeModal();
     }
-
     handlePrivateDisableCloseButton(e) {
         if (!(e.detail && e.detail[secure])) {
             console.error('Invalid access to privatedisableclose event');
             return;
         }
-
         this.toggleDisableCloseButton();
     }
-
-    /**
-     * Handle Esc key down events on the modal
-     * @param {Event} e The keyboard event
-     * @private
-     */
     handleModalKeyDown(e) {
         const { ctrlKey, metaKey, shiftKey, key } = e;
         const hasModifier = ctrlKey || metaKey || shiftKey;
-        // 'Esc' is IE11 specific, remove when support is dropped
-        // when disableCloseButton set true, ESC key to close modal is deactivated
-        if (
+        if ((!features.enableTooltipHoverDismiss || !hasActiveTooltip()) &&
             !hasModifier &&
             !this.disableCloseButton &&
-            (key === 'Esc' || key === 'Escape')
-        ) {
+            (key === 'Esc' || key === 'Escape')) {
             e.stopPropagation();
             e.preventDefault();
             this.handleCloseClick();
         }
     }
-
-    /**
-     * Utilized to auto set (autofocus) the browser's focus to-
-     *
-     * 1. title text inside a Modal Header OR
-     * 2. place it on the first interactive element within the modal children (i.e, Headless Modal variant)
-     * 3. place it on Close Icon
-     *
-     * Fires custom cancelable event 'autofocus' as autoFocus should only be done during the modal's creation.
-     * Needs to wait until all elements have rendered in the DOM.
-     * Details on focus decision tree under
-     * ['Opening Dialogs'](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#dialogs) section.
-     * For modal v1, ignore multi-step modal as it is not part of scope
-     * @private
-     */
     focusFirstElement() {
         const { autoFocusCompletedOnce, modalElement } = this;
-        // If any of these is TRUE, exit before proceeding
-        // 1. if modal has already been autofocused once, exit immediately
-        // 2. need to wait for modalElements to be rendered to the DOM
         if (autoFocusCompletedOnce || !modalElement) {
             return;
         }
-
-        const {
-            bodyRegistered,
-            footerRegistered,
-            headerRegistered,
-            headerTitleRef,
-            headerDefaultSlotIsPopulated,
-            headerSlotHasRendered,
-            bodyDefaultSlotIsPopulated,
-            bodySlotHasRendered,
-            bodyTabElemRef,
-            footerDefaultSlotIsPopulated,
-            footerSlotHasRendered,
-        } = this;
-
-        const waitForHeaderSlotRender =
-            headerRegistered &&
+        const { bodyRegistered, footerRegistered, headerRegistered, headerTitleRef, headerDefaultSlotIsPopulated, headerSlotHasRendered, bodyDefaultSlotIsPopulated, bodySlotHasRendered, bodyTabElemRef, footerDefaultSlotIsPopulated, footerSlotHasRendered, } = this;
+        const waitForHeaderSlotRender = headerRegistered &&
             headerDefaultSlotIsPopulated &&
             !headerSlotHasRendered;
-        const waitForBodySlotRender =
-            bodyRegistered &&
+        const waitForBodySlotRender = bodyRegistered &&
             bodyDefaultSlotIsPopulated &&
             !bodySlotHasRendered;
-        const waitForFooterSlotRender =
-            footerRegistered &&
+        const waitForFooterSlotRender = footerRegistered &&
             footerDefaultSlotIsPopulated &&
             !footerSlotHasRendered;
-
-        // 3. Need to make sure registered child components
-        // slots have fully rendered before proceeding
-        if (
-            waitForHeaderSlotRender ||
+        if (waitForHeaderSlotRender ||
             waitForBodySlotRender ||
-            waitForFooterSlotRender
-        ) {
+            waitForFooterSlotRender) {
             return;
         }
-
-        const modalHeadingElem =
-            headerRegistered && headerTitleRef ? headerTitleRef : null;
-
-        // preferred focus be placed, in following order
-        // (1) on title text present inside a Modal Header
-        // (2) on autofocus-able elements (links:NOT(tooltip), inputs, buttons)
-        //     located in lightning-modal-body in case of **Headless Modal variant**
+        const modalHeadingElem = headerRegistered && headerTitleRef ? headerTitleRef : null;
         const preferredFocusElem = modalHeadingElem
             ? modalHeadingElem
             : bodyTabElemRef || null;
-
-        // fallback focus, in order of preference
-        // (1) close button (always present, current version)
-        // (2) outer modal element (always present, here ONLY as a backup,
-        //     for when hide or disable close button becomes available
         const closeButtonElem = this.modalCloseButton;
         const outerModalElem = this.modalWrapper;
-
         const fallbackFocusElem = this.disableCloseButton
             ? outerModalElem
             : closeButtonElem;
-
         const focusElem = preferredFocusElem
             ? preferredFocusElem
             : fallbackFocusElem;
-
         if (focusElem !== null) {
             this.lastFocusedElement = focusElem;
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
                 focusElem.focus();
             });
             this.autoFocusCompletedOnce = true;
-        } else {
-            // Should never happen since outerModalElem always present
-            console.error(
-                'LightningModal - at least one focusable element is required, none found.'
-            );
+        }
+        else {
+            console.error('LightningModal - at least one focusable element is required, none found.');
         }
     }
-
-    /**
-     * When child component modalBody is removed,
-     * sets private tracked state, detaches window.onresize event listeners
-     * @private
-     */
     unregisterBody() {
-        // FUTURE TODO mechanism to support aria-describedby
-        // aria-describedby is optional, without a good reproducible pattern
         this.initBodyState();
     }
-
-    /**
-     * Registers modalBody with its parent modal, when present
-     * Sets private tracked state about modalBody
-     * Called when 'onprivatemodalbodyregister' event gets fired
-     * @param {Object} detail Passed details object from modalBody
-     * @private
-     */
-    registerBody({
-        bodyId,
-        bodyIsPopulated,
-        updateBodyCallback,
-        defaultSlotHasRendered,
-        unRegisterCallback,
-        firstTabbableElemRef,
-    }) {
+    registerBody({ bodyId, bodyIsPopulated, updateBodyCallback, defaultSlotHasRendered, unRegisterCallback, firstTabbableElemRef, }) {
         this.bodyRegistered = true;
         this.bodyDefaultSlotIsPopulated = bodyIsPopulated;
         this.bodySlotHasRendered = defaultSlotHasRendered;
@@ -890,19 +454,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         unRegisterCallback(() => {
             this.unregisterBody();
         });
-        // cover case if modalBody is removed, then added back
-        // required to correctly set the CSS classes on modalBody
         this.updateModalBodyHeight();
-
-        // since modalBody registration occurs async, and only after this.modal exists
-        // using this as a proxy for setting modal.size value to local modalBase state
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            if (this.isModalSizeNotSet) {
-                this.size = this.modal?.size || null;
-            }
+        if (this.isModalSizeNotSet) {
+            this.size = this.modal?.size || null;
         }
-
-        // ModalBody can register 2+ times when initially rendering
         if (!this.windowResizeEventBound) {
             this.addWindowResizeEventListener();
         }
@@ -913,22 +468,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             this.addFocusinEventListener();
         }
     }
-
-    /**
-     * When modalBody present, update private tracked state
-     * @param {Event} e The private custom registration event of modalBody
-     * @private
-     */
     handleBodyRegister(e) {
         const { detail } = e;
         this.registerBody(detail);
         e.stopPropagation();
     }
-
-    /**
-     * When modalBody removed or at startup, initialize private tracked modalBody state
-     * @private
-     */
     initBodyState() {
         this.bodyRegistered = false;
         this.bodyDefaultSlotIsPopulated = false;
@@ -939,41 +483,14 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.bodyTabElemRef = null;
         this.removeModalEventListeners();
     }
-
-    /**
-     * Sets private tracked state related to modalHeader, when removed
-     * @private
-     */
     unregisterHeader() {
         this.initHeaderState();
         this.updateAriaLabel();
     }
-
-    /**
-     * update the modalBase tracked header height value
-     * @private
-     */
     updateHeaderHeight(value) {
         this.headerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
     }
-
-    /**
-     * Registers modalHeader with its parent modal, when present
-     * Sets private tracked state about modalHeader
-     * Called when 'onprivatemodalheaderregister' event gets fired
-     * @param {Object} detail Passed details object from modalHeader
-     * @private
-     */
-    registerHeader({
-        defaultSlotIsPopulated,
-        defaultSlotWrapperId,
-        defaultSlotHasRendered,
-        unRegisterCallback,
-        labelIsPopulated,
-        headerHeight,
-        headerRef,
-        labelId,
-    }) {
+    registerHeader({ defaultSlotIsPopulated, defaultSlotWrapperId, defaultSlotHasRendered, unRegisterCallback, labelIsPopulated, headerHeight, headerRef, labelId, }) {
         this.headerRegistered = true;
         this.updateHeaderHeight(headerHeight);
         this.headerDefaultSlotIsPopulated = defaultSlotIsPopulated;
@@ -985,37 +502,19 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         unRegisterCallback(() => {
             this.unregisterHeader();
         });
-        // update modalBody max-height values
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
-        // since modalHeader registration occurs async, and only after modal exist
-        // using this as a proxy for setting modal.size value to local modalBase state
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            if (this.isModalSizeNotSet) {
-                this.size = this.modal?.size || null;
-            }
+        if (this.isModalSizeNotSet) {
+            this.size = this.modal?.size || null;
         }
     }
-
-    /**
-     * Event handler for private modalHeader registration
-     * When modalHeader present, update private tracked state
-     * @param {Event} e Private custom registration event fired
-     * @private
-     */
     handleHeaderRegister(e) {
         const { detail } = e;
         this.registerHeader(detail);
         this.updateAriaLabel();
         e.stopPropagation();
     }
-
-    /**
-     * When modalHeader removed or at startup, initialize
-     * private tracked modalHeader state
-     * @private
-     */
     initHeaderState() {
         this.headerRegistered = false;
         this.headerHeight = 0;
@@ -1026,36 +525,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
     }
-
-    /**
-     * Sets private tracked state related to modalFooter, when removed
-     * @private
-     */
     unregisterFooter() {
         this.initFooterState();
     }
-
-    /**
-     * update the modalBase tracked footer height value
-     * @private
-     */
     updateFooterHeight(value) {
         this.footerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
     }
-
-    /**
-     * Registers modalFooter with its parent modal, when present
-     * Sets private tracked state about modalFooter
-     * Called when 'onprivatemodalfooterregister' event gets fired
-     * @param {Object} detail Passed details object from modalFooter
-     * @private
-     */
-    registerFooter({
-        defaultSlotIsPopulated,
-        defaultSlotHasRendered,
-        footerHeight,
-        unRegisterCallback,
-    }) {
+    registerFooter({ defaultSlotIsPopulated, defaultSlotHasRendered, footerHeight, unRegisterCallback, }) {
         this.footerRegistered = true;
         this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
         this.footerSlotHasRendered = defaultSlotHasRendered;
@@ -1063,83 +539,46 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         unRegisterCallback(() => {
             this.unregisterFooter();
         });
-        // update modalBody max-height values
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
-        // since modalFooter registration occurs async, and only after modal exist
-        // using this as a proxy for setting modal.size value to local modalBase state
-        if (features.ENABLE_MODAL_REDUCE_MOTION) {
-            if (this.isModalSizeNotSet) {
-                this.size = this.modal?.size || null;
-            }
+        if (this.isModalSizeNotSet) {
+            this.size = this.modal?.size || null;
         }
     }
-
-    /**
-     * Event handler for private modalFooter registration
-     * When modalFooter present, update private tracked state
-     * @param {Event} e Private custom registration event fired
-     * @private
-     */
     handleFooterRegister(e) {
         const { detail } = e;
         this.registerFooter(detail);
         e.stopPropagation();
     }
-
-    /**
-     * When modalFooter removed or at startup, initialize
-     * private tracked modalFooter state
-     * @private
-     */
     initFooterState() {
         this.footerRegistered = false;
         this.footerHeight = 0;
         this.footerSlotHasRendered = false;
         this.footerDefaultSlotIsPopulated = false;
     }
-
-    /**
-     * When the modalBody content height is tall, it requires max-height
-     * to be set in order to prevent overflow of the modal offscreen
-     * Throttling occurs to prevent calling this method every time
-     * the window.onresize event fires
-     * @private
-     */
     updateModalBodyHeight() {
-        // check if org has access to reflow resize CSS, defaults to false
         if (orgHasWCAGResizeReflowSC) {
             this.template
                 .querySelector('[data-container]')
                 .classList.add('slds-modal__container__reflow_resize');
         }
-
         clearTimeout(this.timeoutId);
         this.timeoutId = 0;
-
         if (this.updateHeaderCallback) {
-            // Update the header size
             this.updateHeaderCallback({ size: this.size });
         }
-
         if (this.updateFooterCallback) {
-            // Update the footer size
             this.updateFooterCallback({ size: this.size });
         }
-
         if (this.bodyRegistered && !this.bodyResizeScheduled) {
-            // check, and update isSmallScreenSize before
-            // callback to modalBody
             this.setIsSmallScreenSize();
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
                 this.bodyResizeScheduled = false;
                 if (this.baseUpdateBodyCallback) {
                     const values = {
                         footerHeight: this.footerHeight || 0,
                         headerHeight: this.headerHeight || 0,
-                        // backdrop values can be used as proxies for screen width / height
                         backdropHeight: this.backdropDimensions.height,
                         backdropWidth: this.backdropDimensions.width,
                         sizeSetFull: this.size === SIZE_FULL,
@@ -1152,65 +591,33 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             this.bodyResizeScheduled = true;
         }
     }
-
-    /**
-     * Provide debounce / throttling to prevent modalBody callback
-     * from being fired every time window.onresize event fires
-     * @private
-     */
     scheduleWindowResizeEvent() {
         if (this.timeoutId === 0) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
             this.timeoutId = setTimeout(() => {
                 this.updateModalBodyHeight();
             }, DEBOUNCE_RESIZE);
         }
     }
-
-    /**
-     * Event handler for window.onresize event
-     * @private
-     */
     handleWindowResizeEvent = () => {
         this.scheduleWindowResizeEvent();
     };
-
-    /**
-     * Add window 'resize' event listener when modalBody is present
-     * this only gets used by modalBody, so only gets wired up when
-     * registerBody function called
-     * @private
-     */
     addWindowResizeEventListener() {
-        if (isCSR && !this.windowResizeEventBound) {
+        if (!import.meta.env.SSR && !this.windowResizeEventBound) {
             window.addEventListener('resize', this.handleWindowResizeEvent);
             this.windowResizeEventBound = true;
         }
     }
-
-    /**
-     * Detach window.onresize event listener when modalBody is removed
-     * @private
-     */
     removeWindowResizeEventListener() {
-        if (isCSR && this.windowResizeEventBound) {
+        if (!import.meta.env.SSR && this.windowResizeEventBound) {
             window.removeEventListener('resize', this.handleWindowResizeEvent);
             clearTimeout(this.timeoutId);
             this.timeoutId = 0;
             this.windowResizeEventBound = false;
         }
     }
-
-    /**
-     * Remove screen orientation 'change' listener
-     * @private
-     */
     removeOrientationChangeListener() {
         if (this.windowOrientationEventBound && this.portraitMatchMedia) {
-            this.portraitMatchMedia.removeEventListener(
-                'change',
-                this.screenOrientationChangeHandler
-            );
+            this.portraitMatchMedia.removeEventListener('change', this.screenOrientationChangeHandler);
             this.portraitMatchMedia = null;
             this.windowOrientationEventBound = false;
         }
@@ -1218,84 +625,40 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             this.screenOrientationChangeHandler = null;
         }
     }
-
-    /**
-     * Add screen orientation 'change' listener.
-     * orientation changes: 'portrait' -> 'landscape' -> 'portrait'
-     */
     addOrientationChangeListener() {
-        if (isCSR) {
-            this.portraitMatchMedia = window.matchMedia(
-                '(orientation: portrait)'
-            );
+        if (!import.meta.env.SSR) {
+            this.portraitMatchMedia = window.matchMedia('(orientation: portrait)');
             this.screenOrientationChangeHandler =
                 this.handleWindowResizeEvent.bind(this);
             if (this.portraitMatchMedia) {
-                this.portraitMatchMedia.addEventListener(
-                    'change',
-                    this.screenOrientationChangeHandler
-                );
+                this.portraitMatchMedia.addEventListener('change', this.screenOrientationChangeHandler);
                 this.windowOrientationEventBound = true;
             }
         }
     }
-
-    /**
-     * == W-12654751 P1 a11y bug ==
-     *
-     * Adds an event listener to listen and handle to 'focusin' events.
-     * All Lightning Modals must trap user focus, while they are open.
-     */
     addFocusinEventListener() {
         if (!this.focusinEventBound) {
             this.focusinEventBound = true;
-            window.addEventListener(
-                'focusin',
-                modalFocusinEventHandler.bind(this)
-            );
+            window.addEventListener('focusin', modalFocusinEventHandler.bind(this));
         }
     }
-
-    /**
-     * == W-12654751 P1 a11y bug ==
-     *
-     * Remove event listener for 'focusin' events, only when the base modal is closed.
-     * No-op when modals stacked on top of a base modal are closed.
-     */
     removeFocusinEventListener() {
         if (this.focusinEventBound) {
             this.focusinEventBound = false;
-            window.removeEventListener(
-                'focusin',
-                modalFocusinEventHandler.bind(this)
-            );
+            window.removeEventListener('focusin', modalFocusinEventHandler.bind(this));
         }
     }
-
     handleModalBaseFocusin = modalFocusinEventHandler.bind(this);
-
     handleLastFocusedElem(e) {
         if (!(e.detail && e.detail[secure])) {
-            console.error(
-                'Invalid access to onprivatelightningmodallastfocus event'
-            );
+            console.error('Invalid access to onprivatelightningmodallastfocus event');
             return;
         }
         e.stopPropagation();
-
         this.lastFocusedElement = e.detail.privatelightningmodallastfocus;
     }
-
-    /**
-     * determine if the current screen is less than SMALL_SCREEN_SIZE
-     * for Modal, screen size detection is simplified to what's required
-     * for the size="full" feature addition, which is a single breakpoint
-     * either (a) at or below 480 pixels (small = full screen modal behavior),
-     * or (b) at or above 481 (large = default modal behavior)
-     * @private
-     */
     setIsSmallScreenSize() {
-        if (isCSR) {
+        if (!import.meta.env.SSR) {
             const docElem = (document && document.documentElement) || null;
             const browserWidth = docElem
                 ? docElem.clientWidth
@@ -1306,24 +669,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             }
         }
     }
-
     removeModalEventListeners() {
         this.removeWindowResizeEventListener();
         this.removeOrientationChangeListener();
         this.removeFocusinEventListener();
     }
-
-    /**
-     * When modal is being created, initialize
-     * private tracked modal base/default state
-     * this is a collection of state variables
-     * that are not including modalHeader, modalBody,
-     * modalFooter
-     * @private
-     */
     initBaseState() {
-        // setting initialRender true handles the case where modal
-        // is added / removed/added back to DOM
         this.initialRender = true;
         this.autoFocusCompletedOnce = false;
         this.windowResizeEventBound = false;
@@ -1340,60 +691,41 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.isModalTransitioningIn = false;
         this.isModalClosing = false;
         this._size = null;
-        // browser screen size
         this.isSmallScreenSize = null;
     }
-
-    /**
-     * Reset all modal state
-     * @private
-     */
     initModalState() {
         this.initBaseState();
         this.initHeaderState();
         this.initBodyState();
         this.initFooterState();
     }
-
     connectedCallback() {
         super.connectedCallback();
         this.initModalState();
-        // check for screen size right away
-        // not adding event listeners here,
-        // as 'resize' and 'orientation' events
-        // are utilized by modalBody, see registerBody()
         this.setIsSmallScreenSize();
     }
-
     disconnectedCallback() {
+        this.handleModalCloseState();
         this.removeModalEventListeners();
         this.closeModal();
     }
-
     renderedCallback() {
         if (this.initialRender) {
             this.openModal();
             this.initialRender = false;
-        } else {
-            // wait until lightning-modal is defined
+        }
+        else {
             this.updateAriaLabel();
             this.updateAriaDescription();
-            // queue show only once
             if (!this.isModalTransitioningIn) {
                 this.queueShowModal();
             }
-            // autoFocus once only
             if (!this.autoFocusCompletedOnce) {
-                // check disableClose internal state and relevant DOM changes
                 this.toggleDisableCloseButton();
                 this.focusFirstElement();
             }
-            // after first render, check for this.modal.size
-            // this check exists in register|Body|Header|Footer functions
-            if (features.ENABLE_MODAL_REDUCE_MOTION) {
-                if (this.isModalSizeNotSet) {
-                    this.size = this.modal?.size || null;
-                }
+            if (this.isModalSizeNotSet) {
+                this.size = this.modal?.size || null;
             }
         }
         this.updateModalBodyHeight();