lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/lookupAddress/lookupAddress.js

@@ -1,6 +1,7 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
 import lang from '@salesforce/i18n/lang';
+import labelRequired from '@salesforce/label/LightningControl.required';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { toHighlightParts } from './highlight';
@@ -14,6 +15,7 @@ import {
 } from 'lightning/messageDispatcher';
 import { normalizeBoolean, synchronizeAttrs } from 'lightning/utilsPrivate';
 import { buildMapSourceUrl } from 'lightning/mapUtils';
+import { isCSR } from 'lightning/utilsPrivate';
 import { INTERNAL_GOOGLE_LOGO, POWERED_BY_GOOGLE } from './googleLogo';
 import { getLocation } from './location';
 
@@ -29,10 +31,17 @@ const EVENT_NAME = {
     PLACE_API_READY: 'place-api-ready',
 };
 
+const i18n = {
+    required: labelRequired,
+};
+
 export default class LightningLookupAddress extends LightningShadowBaseClass {
     @api label;
     @api inputText = '';
     @api placeholder;
+    @api name;
+    @api autocomplete;
+    @api required;
 
     @track _inputIconName = 'utility:search';
     @track _items;
@@ -55,9 +64,11 @@ export default class LightningLookupAddress extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this._items = [];
-        this._dispatchId = registerMessageHandler((event) => {
-            this.handleMessage(event);
-        });
+        this._dispatchId = isCSR
+            ? registerMessageHandler((event) => {
+                  this.handleMessage(event);
+              })
+            : null;
         this._debouncedTextInput = debounce((text) => {
             this._requestSuggestions(text);
         }, DEBOUNCE_PERIOD);
@@ -69,6 +80,19 @@ export default class LightningLookupAddress extends LightningShadowBaseClass {
         }
     }
 
+    get isLoaded() {
+        return this.alwaysRender || this._isLoaded;
+    }
+
+    @api
+    get alwaysRender() {
+        return this._alwaysRender || false;
+    }
+
+    set alwaysRender(value) {
+        this._alwaysRender = normalizeBoolean(value);
+    }
+
     @api
     get variant() {
         return this._variant || VARIANT.STANDARD;
@@ -91,6 +115,10 @@ export default class LightningLookupAddress extends LightningShadowBaseClass {
         }
     }
 
+    get i18n() {
+        return i18n;
+    }
+
     get isLabelHidden() {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
@@ -204,12 +232,14 @@ export default class LightningLookupAddress extends LightningShadowBaseClass {
     }
 
     dispatchChangeEvent(address) {
-        this.dispatchEvent(
-            new CustomEvent('change', {
-                detail: {
-                    address,
-                },
-            })
-        );
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: {
+                        address,
+                    },
+                })
+            );
+        }
     }
 }

package/src/lightning/menuDivider/menu-divider.slds.css

@@ -2,7 +2,6 @@
 /* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) .slds-has-divider_top {
     border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
   }
@@ -12,4 +11,3 @@
     margin-top: var(--slds-g-spacing-2);
     padding-top: var(--slds-g-spacing-2);
   }
-}

package/src/lightning/menuItem/menu-item.slds.css

@@ -2,7 +2,6 @@
 /* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   /**
    * Note: .slds-dropdown__item class used to be on the host element. Moved to
    * new containing element to prevent duplicate styles in mixed-mode.
@@ -11,6 +10,7 @@
   /**
    * Menu Item
    */
+
   :host([data-render-mode="shadow"]) a {
     display: flex;
     justify-content: space-between;
@@ -47,6 +47,7 @@
   }
 
   /* TODO: bring in PostCSS fix and see if it fixes output CSS */
+
   :host([data-render-mode="shadow"]) a[aria-disabled='true']:hover,:host([data-render-mode="shadow"]) 
   a:host([data-render-mode="shadow"]) [aria-disabled='true']:focus {
     background-color: transparent;
@@ -59,6 +60,7 @@
    * "a" and "span" is intended, add prefix and suffix icons to see the
    * generated markup and it'll make sense.
    */
+
   :host([data-render-mode="shadow"]) .slds-truncate {
     display: flex;
     justify-content: space-between;
@@ -71,6 +73,7 @@
    *
    * @TODO: currently not supported by LBC
    */
+
   :host([data-render-mode="shadow"].slds-has-error) a {
     background: var(--slds-g-color-error-container-1);
   }
@@ -80,6 +83,7 @@
    *
    * @TODO: currently not supported by LBC
    */
+
   :host([data-render-mode="shadow"].slds-has-success) a {
     background: var(--slds-g-color-success-container-1);
   }
@@ -93,6 +97,7 @@
    *
    * @TODO: currently not supported by LBC
    */
+
   :host([data-render-mode="shadow"].slds-has-warning) a {
     background: var(--slds-g-color-warning-container-1);
   }
@@ -115,6 +120,7 @@
    * We scope to aria-checked so we don't accidentally toggle prefix icons
    * which are a separate API.
    */
+
   :host([data-render-mode="shadow"]) [aria-checked='false'] lightning-primitive-icon::part(icon) {
     opacity: 0;
   }
@@ -128,6 +134,7 @@
    *
    * @TODO: Look into viability of refactoring into utility
    */
+
   :host([data-render-mode="shadow"]) .slds-indicator_unsaved,:host([data-render-mode="shadow"]) 
   .slds-indicator--unsaved {
     color: var(--slds-g-color-accent-2);
@@ -137,4 +144,3 @@
     /* Unsaved indicator does not have gap spacing, everything else does */
     margin-inline-end: calc(var(--slds-g-spacing-2) * -1);
   }
-}

package/src/lightning/menuSubheader/menu-subheader.slds.css

@@ -2,7 +2,6 @@
 /* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) .slds-dropdown__header {
     font-size: var(--slds-g-font-scale-neg-1);
     font-weight: var(--slds-g-font-weight-7);
@@ -13,10 +12,10 @@
   /**
    * @TODO: refactor when utility is available
    */
+
   :host([data-render-mode="shadow"]) .slds-truncate {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-}

package/src/lightning/modal/__docs__/modal.md

@@ -1,4 +1,4 @@
-A `LightningModal` component overlays a message modal on top of the current app window. A modal interrupts a user’s workflow and draws attention to the message.
+The `lightning/modal` module provides the `LightningModal` component to create a modal window on top of the current app window. A modal interrupts a user’s workflow.
 
 `LightningModal` implements the SLDS [modals](https://www.lightningdesignsystem.com/components/modals/) blueprint.
 
@@ -628,6 +628,15 @@ Customizing the styling on the white modal frame and background, close button, o
 
 #### Accessibility
 
+Upon opening, the modal determines where to place focus as follows.
+
+* When the modal header is present, the modal component places the focus on the title text in the header.
+* When a modal header isn’t present, the modal component places the focus on the first interactive element in the modal body, such as a link, button, or input field.
+* When the modal body doesn’t have interactive elements, or the only interactive element is a tooltip, the modal component places focus on the close button.
+
+The focus is determined according to
+the [Global Focus Guidelines](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#dialogs) for Lightning Design System.
+
 The `lightning-modal-header` component renders the `label` value in an `<h1>` element. If your modal uses the header, begin any additional heading levels in the modal with `<h2>` for accessibility. Provide accessible structure by using heading levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
 
 To include tagline text or link content for the header section, add it between the `<lightning-modal-header>` tags.

package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js

@@ -54,10 +54,8 @@ const MODAL_FOOTER = 'lightning-modal-footer';
 // inner modal specific details ===========================
 
 // close button variants
-const MODAL_CLOSE_BUTTON_FULL_VARIANT = 'bare';
-const MODAL_CLOSE_BUTTON_NORMAL_VARIANT = 'bare-inverse';
+const MODAL_CLOSE_BUTTON_VARIANT = 'bare';
 const MODAL_CLOSE_BTN_CLASS = 'slds-modal__close';
-const MODAL_CLOSE_BTN_SELECTOR = `.${MODAL_CLOSE_BTN_CLASS}`;
 const MODAL_CLOSE_BTN_FULL_CLASS = 'slds-modal_full-close-button';
 // modal screen size testing
 // utilized by full screen modal tests
@@ -160,7 +158,7 @@ const NAME_TO_SIZE = {
 // suites for modal utilize this map
 const SPEC_TO_TABS_TO_CLOSE_BTN = {
     accessibility: {
-        footless: -1,
+        footless: 1,
         headless: -3,
     },
 };
@@ -249,11 +247,9 @@ module.exports = {
     FOCUS_TRAP,
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
-    MODAL_CLOSE_BTN_SELECTOR,
     MODAL_CLOSE_BTN_FULL_CLASS,
     MODAL_DATA_SELECTOR,
-    MODAL_CLOSE_BUTTON_FULL_VARIANT,
-    MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
+    MODAL_CLOSE_BUTTON_VARIANT,
     SCREEN_SIZE_SMALL,
     SCREEN_SIZE_SMALL_MID,
     SCREEN_SIZE_MEDIUM,

package/src/lightning/modal/__modalUtils__/modalContainerTestMethods.js

@@ -3,7 +3,7 @@
  *  is in scope: $, $$, browser, element
  */
 
-import {
+const {
     OVERLAY_CONTAINER,
     MODAL_BASE,
     MODAL,
@@ -19,8 +19,7 @@ import {
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
     MODAL_CLOSE_BTN_FULL_CLASS,
-    MODAL_CLOSE_BUTTON_FULL_VARIANT,
-    MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
+    MODAL_CLOSE_BUTTON_VARIANT,
     SCREEN_SIZE_LARGE,
     MODAL_SIZE_FULL,
     MODAL_FULL_SCREEN_SMALL_BREAKPOINT,
@@ -41,7 +40,7 @@ import {
     KEY,
     MODAL_DESCRIPTION_SELECTOR,
     MODAL_ARIALIVE_SELECTOR,
-} from './modalContainerTestConstants.js';
+} = require('./modalContainerTestConstants.js');
 
 let wrapper = null;
 
@@ -143,7 +142,6 @@ async function getModalInternals(config, modalIndex = 0) {
         // get focus trap element
         focusTrapElem = await modalBaseElem.shadow$(FOCUS_TRAP);
         focusTrapSlotElem = await focusTrapElem.shadow$('slot');
-
         // get modal's <section> element just inside focus trap
         // eslint-disable-next-line
         modalSectionElem = await browser.custom$(
@@ -160,9 +158,6 @@ async function getModalInternals(config, modalIndex = 0) {
             MODAL_ARIALIVE_SELECTOR
         );
 
-        // get modal close button
-        modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
-
         // get modal div slot (not an actual slot)
         modalDataSlot = await modalSectionElem.$(MODAL_DIV_SLOT);
         // get div[data-container].slds-modal__container
@@ -170,22 +165,28 @@ async function getModalInternals(config, modalIndex = 0) {
         // get lightning-modal element
         modalElem = await modalSectionElem.$(MODAL);
 
-        // skip looking for modalHeader when type of modal is 'headless'
-        if (!isModalOfVariantType(modalVariantType, 'headless')) {
-            // get lightning-modal-header, it doesn't always exist
-            modalHeaderElem = await modalElem.shadow$(MODAL_HEADER);
-        }
-
         // get lightning-modal-body, it doesn't always exist
         // but in our examples it's always present
         modalBodyElem = await modalElem.shadow$(MODAL_BODY);
+
+        // Headless modal variant has the close button inside modalBase
+        if (isModalOfVariantType(modalVariantType, 'headless')) {
+            // get modal close button
+            modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
+        } else {
+            // get lightning-modal-header and modal close lightning-button
+            modalHeaderElem = await modalElem.shadow$(MODAL_HEADER);
+            modalCloseButton = await modalHeaderElem.shadow$(MODAL_CLOSE_BTN);
+        }
+
         // skip looking for modalHeader when type of modal is 'footless'
         if (!isModalOfVariantType(modalVariantType, 'footless')) {
             // get lightning-modal-footer, it doesn't always exist
             modalFooterElem = await modalElem.shadow$(MODAL_FOOTER);
         }
     }
-    const modalDetails = {
+    return {
+        modalBaseExists,
         modalBaseElem,
         modalBaseBackdropElem,
         modalSectionElem,
@@ -201,8 +202,6 @@ async function getModalInternals(config, modalIndex = 0) {
         focusTrapElem,
         focusTrapSlotElem,
     };
-    console.log('100 getModalInternals :: modalDetails: ', modalDetails);
-    return modalDetails;
 }
 
 /*
@@ -219,8 +218,8 @@ async function getModalHeaderInternals(headerElem) {
 
     if (headerElem) {
         headerOuterDiv = await headerElem.shadow$('.slds-modal__header');
-        headerHeading = await headerOuterDiv.$('[data-label]');
-        headerSlot = await headerOuterDiv.$('[data-default-slot]');
+        headerHeading = await headerElem.shadow$('[data-label]');
+        headerSlot = await headerElem.shadow$('[data-default-slot]');
     }
     return {
         headerOuterDiv,
@@ -241,7 +240,7 @@ async function getModalBodyInternals(bodyElem) {
     let bodySlotContents = null;
     if (bodyElem) {
         bodyOuterDiv = await bodyElem.shadow$(MODAL_BODY_DIV);
-        const bodySlot = await bodyOuterDiv.shadow$(MODAL_BODY_SLOT);
+        const bodySlot = await bodyElem.shadow$(MODAL_BODY_SLOT);
         // eslint-disable-next-line no-undef
         bodySlotContents = await browser.custom$('getSlotElements', bodySlot);
     }
@@ -263,7 +262,7 @@ async function getModalFooterInternals(footerElem) {
     let footerSlotContents = null;
     if (footerElem) {
         footerOuterDiv = await footerElem.shadow$('.slds-modal__footer');
-        const footerSlot = await footerOuterDiv.$('[data-footer-slot]');
+        const footerSlot = await footerElem.shadow$('[data-footer-slot]');
         // eslint-disable-next-line no-undef
         footerSlotContents = await browser.custom$(
             'getSlotElements',
@@ -332,6 +331,7 @@ async function validateModalCloseButtonAttributes(config) {
     // screen behavior occur below
     expect(modalCloseButtonVariant).not.toBeNull();
     expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_CLASS);
+    expect(modalCloseButtonVariant).toEqual(MODAL_CLOSE_BUTTON_VARIANT);
 
     // the only time size='full' actual renders full page width and height
     // is when windowWidth is set <= 480px (30em)
@@ -339,21 +339,14 @@ async function validateModalCloseButtonAttributes(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        expect(modalCloseButtonVariant).toEqual(
-            MODAL_CLOSE_BUTTON_FULL_VARIANT
-        );
-
         expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_FULL_CLASS);
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px (30em)) are normal modal behavior
-        expect(modalCloseButtonVariant).toEqual(
-            MODAL_CLOSE_BUTTON_NORMAL_VARIANT
-        );
         expect(modalCloseButtonCssClass).not.toContain(
             MODAL_CLOSE_BTN_FULL_CLASS
         );
     }
 }
+
 /*
  * get some of the modal internals element details
  * including offset values and classes
@@ -427,19 +420,6 @@ async function validateModalHeightBehavior(config) {
     const { height: windowHeight, width: windowWidth } =
         // eslint-disable-next-line no-undef
         await browser.getWindowSize();
-    console.log('00 validateModalHeightBehavior :: config: ', config);
-    console.log(
-        '01 validateModalHeightBehavior :: modalSize: ',
-        modalSize,
-        '; modalVariantType: ',
-        modalVariantType
-    );
-    console.log(
-        '02 validateModalHeightBehavior :: windowWidth: ',
-        windowWidth,
-        '; windowHeight: ',
-        windowHeight
-    );
 
     // get child elements element for min and max height values
     const { modalHeaderElem, modalBodyElem, modalFooterElem } =
@@ -447,14 +427,6 @@ async function validateModalHeightBehavior(config) {
     const { bodyOuterDiv } = await getModalBodyInternals(modalBodyElem);
     const modalBodyOuterDivStyle = await bodyOuterDiv.getAttribute('style');
     const modalBodyStyleProps = parseStyleAttributes(modalBodyOuterDivStyle);
-    console.log(
-        '03 validateModalHeightBehavior :: modalBodyOuterDivStyle: ',
-        modalBodyOuterDivStyle
-    );
-    console.log(
-        '04 validateModalHeightBehavior :: modalBodyStyleProps: ',
-        modalBodyStyleProps
-    );
 
     // based on variant, determine which types of tests will run
     const isVariantHeadless = isModalOfVariantType(
@@ -466,19 +438,11 @@ async function validateModalHeightBehavior(config) {
         'footless'
     );
 
-    console.log(
-        '05 validateModalHeightBehavior :: isVariantHeadless: ',
-        isVariantHeadless,
-        '; isVariantFootless: ',
-        isVariantFootless
-    );
-
     // modalBody is always present in the examples
     const heightBody = (await bodyOuterDiv.getSize('height')) || 0;
 
     // calculate the total height of the child elements present
     let totalModalElemHeight = heightBody;
-    console.log('10 validateModalHeightBehavior :: heightBody: ', heightBody);
 
     // modalHeader is not always present in the examples
     if (!isVariantHeadless) {
@@ -488,10 +452,6 @@ async function validateModalHeightBehavior(config) {
         const heightHdr = await headerOuterDiv.getSize('height');
         if (heightHdr > 0) {
             totalModalElemHeight += heightHdr;
-            console.log(
-                '10 validateModalHeightBehavior :: heightHdr: ',
-                heightHdr
-            );
         }
     }
 
@@ -503,23 +463,11 @@ async function validateModalHeightBehavior(config) {
         const heightFtr = await footerOuterDiv.getSize('height');
         if (heightFtr > 0) {
             totalModalElemHeight += heightFtr;
-            console.log(
-                '10 validateModalHeightBehavior :: heightFtr: ',
-                heightFtr
-            );
         }
     }
 
     // calculate the percentage of the browser
     const percentPageHeightUtilized = totalModalElemHeight / windowHeight;
-    console.log(
-        '10 validateModalHeightBehavior :: totalModalElemHeight: ',
-        totalModalElemHeight
-    );
-    console.log(
-        '10 validateModalHeightBehavior :: windowHeight: ',
-        windowHeight
-    );
 
     // modalFooter is not always present in the examples
     if (!isVariantFootless) {
@@ -542,18 +490,6 @@ async function validateModalHeightBehavior(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        console.log(
-            '10 validateModalHeightBehavior :: FULL SCREEN :: percentPageHeightUtilized: ',
-            percentPageHeightUtilized
-        );
-        console.log(
-            '11 validateModalHeightBehavior :: FULL SCREEN :: MODAL_FULL_SCREEN_USE_PERCENT: ',
-            MODAL_FULL_SCREEN_USE_PERCENT
-        );
-        console.log(
-            '12 validateModalHeightBehavior :: FULL SCREEN :: percentPageHeightUtilized > MODAL_FULL_SCREEN_USE_PERCENT: ',
-            percentPageHeightUtilized > MODAL_FULL_SCREEN_USE_PERCENT
-        );
         // in full screen mode, the modal utilzes more than 92%
         // of the screen height
         expect(percentPageHeightUtilized).toBeGreaterThan(
@@ -564,31 +500,11 @@ async function validateModalHeightBehavior(config) {
         // to make the modal go full height
         // these values are not set after the SLDS based
         // CSS grid implementation was implemented
-        console.log(
-            '15 validateModalHeightBehavior :: FULL SCREEN :: modalBodyStyleProps[MAX_HEIGHT]: ',
-            modalBodyStyleProps[MAX_HEIGHT]
-        );
-        console.log(
-            '16 validateModalHeightBehavior :: FULL SCREEN :: modalBodyStyleProps[MIN_HEIGHT]: ',
-            modalBodyStyleProps[MIN_HEIGHT]
-        );
         expect(modalBodyStyleProps[MAX_HEIGHT]).toBeUndefined();
         expect(modalBodyStyleProps[MIN_HEIGHT]).toBeUndefined();
 
         // default modal behavior scenario
     } else {
-        console.log(
-            '20 validateModalHeightBehavior :: NOT FULL SCREEN :: percentPageHeightUtilized: ',
-            percentPageHeightUtilized
-        );
-        console.log(
-            '21 validateModalHeightBehavior :: NOT FULL SCREEN :: MODAL_DEFAULT_SCREEN_USE_PERCENT: ',
-            MODAL_DEFAULT_SCREEN_USE_PERCENT
-        );
-        console.log(
-            '22 validateModalHeightBehavior :: NOT FULL SCREEN :: percentPageHeightUtilized < MODAL_DEFAULT_SCREEN_USE_PERCENT: ',
-            percentPageHeightUtilized < MODAL_DEFAULT_SCREEN_USE_PERCENT
-        );
         // in default modal behavior, the modal utilzes less than 88%
         // of the screen height
         expect(percentPageHeightUtilized).toBeLessThan(
@@ -597,23 +513,6 @@ async function validateModalHeightBehavior(config) {
         // these next two sets of tests are proxy behavior indicating
         // that the event listeners, and rendering has updated
         // to make the modal exhibit normal height behavior (not full screen)
-        console.log(
-            '23 validateModalHeightBehavior :: NOT FULL SCREEN :: modalBodyStyleProps[MAX_HEIGHT]: ',
-            modalBodyStyleProps[MAX_HEIGHT]
-        );
-        console.log(
-            '24 validateModalHeightBehavior :: NOT FULL SCREEN :: modalBodyStyleProps[MIN_HEIGHT] (to be defined, min height not equal max height): ',
-            modalBodyStyleProps[MIN_HEIGHT]
-        );
-        console.log(
-            '25 validateModalHeightBehavior :: NOT FULL SCREEN :: MODAL_BODY_MIN_HEIGHT_PX: ',
-            MODAL_BODY_MIN_HEIGHT_PX
-        );
-        console.log(
-            '26 validateModalHeightBehavior :: NOT FULL SCREEN :: modalBodyStyleProps[MIN_HEIGHT] === MODAL_BODY_MIN_HEIGHT_PX: ',
-            modalBodyStyleProps[MIN_HEIGHT] === MODAL_BODY_MIN_HEIGHT_PX
-        );
-
         expect(modalBodyStyleProps[MAX_HEIGHT]).toBeDefined();
         expect(modalBodyStyleProps[MIN_HEIGHT]).toBeDefined();
         expect(modalBodyStyleProps[MAX_HEIGHT]).not.toEqual(
@@ -647,6 +546,7 @@ async function validateModalWidthBehavior(config) {
     // get child elements element for min and max height values
     const { modalHeaderElem, modalBodyElem, modalFooterElem } =
         await getModalInternals(config);
+
     const { bodyOuterDiv } = await getModalBodyInternals(modalBodyElem);
 
     // based on variant, determine which types of tests will run
@@ -702,7 +602,6 @@ async function validateModalWidthBehavior(config) {
         // locHeader:  { x: 0, y: 48 }
         // locBody:  { x: 0, y: 167.625 }
         // locFooter:  { x: 0, y: 792 }
-
         // only evaluate modalFooter, when present
         if (!isVariantFootless) {
             expect(locFooterX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
@@ -885,13 +784,16 @@ async function checkBackgroundElemForInertness(elems, expectedValue = true) {
             const initAriaHiddenValue = await elem.getAttribute('aria-hidden');
             const ariaHiddenValue =
                 initAriaHiddenValue === 'true' ? true : null;
-            // if the element isn't in the approved group, make sure it's hidden
+            // these shouldn't have aria-hidden applied
             if (
-                elemType !== 'lightning-overlay-container' &&
-                elemType !== 'lightning-primitive-bubble'
+                elemType === 'lightning-overlay-container' ||
+                elemType === 'lightning-primitive-bubble'
             ) {
-                expect(ariaHiddenValue).toEqual(expectedValue);
+                return;
             }
+            // if the element isn't in the approved group, make sure it aria-hidden value is set correctly
+            const messageIfFails = `${elemType} should have aria-hidden set ${expectedValue}, but was ${ariaHiddenValue}`;
+            expect(ariaHiddenValue).toEqual(expectedValue, messageIfFails);
         })
     );
 }
@@ -907,7 +809,11 @@ async function validateInertness(bgInert = true) {
     // get elements
     // eslint-disable-next-line no-undef
     const htmlElem = await $('html');
-    const allRootElemsToCheck = await htmlElem.$$('body > *');
+    const rootElemsToCheck = await htmlElem.$$('body > *');
+    // clear undefined elements
+    const rootElemsCleaned = await rootElemsToCheck.filter((elem) =>
+        Boolean(elem)
+    );
 
     // get HEAD aria-hidden value
     // eslint-disable-next-line no-undef
@@ -916,7 +822,7 @@ async function validateInertness(bgInert = true) {
     // HEAD element should NEVER have inert applied
     expect(headAriaHiddenValueCheck).toBeNull();
     // check body elements to verify they have been set inert
-    await checkBackgroundElemForInertness(allRootElemsToCheck, ariaHiddenValue);
+    await checkBackgroundElemForInertness(rootElemsCleaned, ariaHiddenValue);
 }
 
 // function to enable forward and reverse tab navigation
@@ -1393,13 +1299,13 @@ async function validateModalOpenTabNavFocusBehavior(
     config,
     expectedAfterOpen,
     expectedAfterTab,
-    tabAction
+    numOfTabsToNext
 ) {
     // make sure values are passed in
     expect(config).not.toBeFalsy();
     expect(expectedAfterOpen).not.toBeFalsy();
     expect(expectedAfterTab).not.toBeFalsy();
-    expect(tabAction).not.toBeFalsy();
+    expect(numOfTabsToNext).not.toBeFalsy();
 
     // open modal with config
     await openModal(config);
@@ -1409,7 +1315,7 @@ async function validateModalOpenTabNavFocusBehavior(
 
     // tab navigate backwards
     // should end up on 'Option 1' button
-    await repeatTab(tabAction);
+    await repeatTab(numOfTabsToNext);
 
     // AFTER tab navigation complete, retest what has focus
     await validateModalFocus(expectedAfterTab);

package/src/lightning/modal/__modalUtils__/modalContainerTestMockData.js

@@ -5,7 +5,7 @@ const formData = [
         name: null,
         value: null,
         type: 'heading',
-        numTabsToNext: 1,
+        numTabsToNext: 2,
     },
     {
         name: 'assignedTo',

package/src/lightning/modal/modal.js

@@ -5,7 +5,7 @@ import LightningModalBase from 'lightning/modalBase';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 
 /**
- * Extend this component to create a message modal overlayed on the current app window.
+ * Extend this component to create a modal window overlayed on the current app window.
  */
 export default class LightningModal extends LightningOverlay {
     static [parent] = LightningModalBase;