lightning-base-components 1.19.6-alpha → 1.19.8-alpha

package/src/lightning/input/input.js

@@ -520,7 +520,6 @@ export default class LightningInput extends LightningElement {
         if (this._rendered) {
             this.connectAriaControls();
         }
-        reflectAttribute(this, ARIA_CONTROLS, references);
     }
 
     /**
@@ -630,6 +629,36 @@ export default class LightningInput extends LightningElement {
      */
     @api ariaHasPopup;
 
+    /**
+     * Specifies the value of the aria-keyshortcuts attribute
+     * @type {string}
+     */
+    @api ariaKeyShortcuts;
+
+    /**
+     * Specifies the value of the aria-disabled attribute
+     * @type {boolean}
+     */
+    @api ariaDisabled;
+
+    /**
+     * Specifies the value of the aria-roledescription attribute
+     * @type {string}
+     */
+    @api ariaRoleDescription;
+
+    /**
+     * Specifies the value of the aria-expanded attribute, only valid on type simple
+     * @type {string}
+     */
+    @api ariaExpanded;
+
+    /**
+     * Specifies the value of the aria-autocomplete, only valid on type simple
+     * @type {string}
+     */
+    @api ariaAutoComplete;
+
     /**
      * String value with the formatter to be used for number input. Valid values include
      * decimal, percent, percent-fixed, and currency.
@@ -920,7 +949,9 @@ export default class LightningInput extends LightningElement {
                 if (subcomponent) {
                     subcomponent.value = this._value;
                 }
-            } else if (
+            }
+
+            if (
                 this._rendered &&
                 this._inputElement.value !== this._displayedValue
             ) {
@@ -1118,6 +1149,26 @@ export default class LightningInput extends LightningElement {
         }
     }
 
+    /**
+     * The role set on lightning-primitive-input-simple to allow external developers to have a type="text"
+     * and role="combobox" if lightning-combobox does not meet their requirements.
+     * @type {string}
+     */
+    @api
+    get role() {
+        return this._role;
+    }
+
+    set role(value) {
+        if (value === 'combobox') {
+            this._role = 'combobox';
+        } else {
+            console.warn(
+                "<lightning-input> The role attribute value is invalid. Options are: 'combobox'"
+            );
+        }
+    }
+
     /**
      * Checks if the input is valid.
      * @returns {boolean} Indicates whether the element meets all constraint validations.
@@ -1725,7 +1776,7 @@ export default class LightningInput extends LightningElement {
         );
     }
 
-    handlePrimitiveInputSimpleChange(event) {
+    handlePrimitiveInputChange(event) {
         this.interactingState.enter();
         this._updateValueAndValidityAttribute(event.detail.value);
     }

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

@@ -86,10 +86,12 @@ const BODY_FOOTLESS_SELECTOR = 'slds-modal__content_footless';
 const MODAL_FULL_SCREEN_SMALL_BREAKPOINT = 480;
 // <lightning-modal> element location, medium+ screen
 const MODAL_DEFAULT_PX_OFFSET_X = 25;
-const MODAL_DEFAULT_PX_OFFSET_Y = 50;
 // <lightning-modal> element location, full screen
 const MODAL_ELEM_FULL_PX_OFFSET_X = 0;
-const MODAL_ELEM_FULL_PX_OFFSET_Y = 0;
+// used to validate modal height and screen utilization
+const MODAL_DEFAULT_SCREEN_USE_PERCENT = 0.88;
+const MODAL_FULL_SCREEN_USE_PERCENT = 0.92;
+
 const MAX_HEIGHT = 'max-height';
 const MIN_HEIGHT = 'min-height';
 const MODAL_BODY_MIN_HEIGHT_PX = 80;
@@ -251,9 +253,9 @@ module.exports = {
     MODAL_SIZE_RANDO,
     MODAL_FULL_SCREEN_SMALL_BREAKPOINT,
     MODAL_DEFAULT_PX_OFFSET_X,
-    MODAL_DEFAULT_PX_OFFSET_Y,
     MODAL_ELEM_FULL_PX_OFFSET_X,
-    MODAL_ELEM_FULL_PX_OFFSET_Y,
+    MODAL_DEFAULT_SCREEN_USE_PERCENT,
+    MODAL_FULL_SCREEN_USE_PERCENT,
     MAX_HEIGHT,
     MIN_HEIGHT,
     MODAL_BODY_MIN_HEIGHT_PX,

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

@@ -25,9 +25,9 @@ import {
     MODAL_SIZE_FULL,
     MODAL_FULL_SCREEN_SMALL_BREAKPOINT,
     MODAL_DEFAULT_PX_OFFSET_X,
-    MODAL_DEFAULT_PX_OFFSET_Y,
     MODAL_ELEM_FULL_PX_OFFSET_X,
-    MODAL_ELEM_FULL_PX_OFFSET_Y,
+    MODAL_DEFAULT_SCREEN_USE_PERCENT,
+    MODAL_FULL_SCREEN_USE_PERCENT,
     MAX_HEIGHT,
     MIN_HEIGHT,
     MODAL_BODY_MIN_HEIGHT_PX,
@@ -397,34 +397,83 @@ async function getModalInternalsDomBased() {
 /* Function includes expect tests to validate the expected
  * modal HEIGHT behavior based on screen size, size attribute,
  * and modalVariant, and actual screen size that was set.
+ * Validating height: use wdio getSize('height') to determine
+ * height of modal child elements and calculate % of screen height
+ * utilization
  */
 // eslint-disable-next-line @lwc/lwc/no-async-await
 async function validateModalHeightBehavior(config) {
-    const { modalSize } = config;
-    // first, get sizes of elements
-    const { modalSectionElem, window, modalElem } =
-        await getModalInternalsDomBased();
-    const { height: modalSectionElemHeight } = modalSectionElem.offset;
-    const { height: windowHeight, width: windowWidth } = window;
-
-    // get <lightning-modal-body> element for min and max height values
-    const { modalBodyElem } = await getModalInternals(config);
+    const { modalSize, modalVariantType } = config;
+    // first, get size of browser window
+    // typically openModal has already been called, so the
+    // window has been resized
+    const { height: windowHeight, width: windowWidth } =
+        // eslint-disable-next-line no-undef
+        await browser.getWindowSize();
+
+    // get child elements element for min and max height values
+    const { modalHeaderElem, modalBodyElem, modalFooterElem } =
+        await getModalInternals(config);
     const { bodyOuterDiv } = await getModalBodyInternals(modalBodyElem);
     const modalBodyOuterDivStyle = await bodyOuterDiv.getAttribute('style');
     const modalBodyStyleProps = parseStyleAttributes(modalBodyOuterDivStyle);
-    const { x: modalElemX, y: modalElemY } = modalElem.offset;
+
+    // based on variant, determine which types of tests will run
+    const isVariantHeadless = isModalOfVariantType(
+        modalVariantType,
+        'headless'
+    );
+    const isVariantFootless = isModalOfVariantType(
+        modalVariantType,
+        'footless'
+    );
+
+    // 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;
+
+    // modalHeader is not always present in the examples
+    if (!isVariantHeadless) {
+        const { headerOuterDiv } = await getModalHeaderInternals(
+            modalHeaderElem
+        );
+        const heightHdr = await headerOuterDiv.getSize('height');
+        if (heightHdr > 0) {
+            totalModalElemHeight += heightHdr;
+        }
+    }
+
+    // modalFooter is not always present in the examples
+    if (!isVariantFootless) {
+        const { footerOuterDiv } = await getModalFooterInternals(
+            modalFooterElem
+        );
+        const heightFtr = await footerOuterDiv.getSize('height');
+        if (heightFtr > 0) {
+            totalModalElemHeight += heightFtr;
+        }
+    }
+
+    // calculate the percentage of the browser
+    const percentPageHeightUtilized = totalModalElemHeight / windowHeight;
+
     // the only time size='full' actual renders full page width and height
     // is when windowWidth is set <= 480px (30em)
-    // note: reliably testing outer div element was not possible as
-    // webdriver getSize didn't provide correct values for comparison
-    // the tests below verify that the code path for setting full height are invoked
+    // note: testing total browser pixel height utilized by the three child
+    // components tends to be the most reliable means of testing height
+    // instead of using location, which the validateModalWidthBehavior
+    // function utilizes
     if (
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        expect(modalSectionElemHeight).toEqual(windowHeight);
-        expect(modalElemX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
-        expect(modalElemY).toEqual(MODAL_ELEM_FULL_PX_OFFSET_Y);
+        // in full screen mode, the modal utilzes more than 92%
+        // of the screen height
+        expect(percentPageHeightUtilized).toBeGreaterThan(
+            MODAL_FULL_SCREEN_USE_PERCENT
+        );
         // these next two tests are proxy behavior indicating
         // that the event listeners, and rendering has updated
         // to make the modal go full height
@@ -432,14 +481,14 @@ async function validateModalHeightBehavior(config) {
         // CSS grid implementation was implemented
         expect(modalBodyStyleProps[MAX_HEIGHT]).toBeUndefined();
         expect(modalBodyStyleProps[MIN_HEIGHT]).toBeUndefined();
+
+        // default modal behavior scenario
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px (30em)) are normal modal behavior
-        // the div.slds-modal__container element is consistently accurate for
-        // location measurment in the CI
-        // location values vary based on screen and size value
-        // typical value are: { x: > 25 },
-        expect(modalElemX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
-        expect(modalElemY).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_Y);
+        // in default modal behavior, the modal utilzes less than 88%
+        // of the screen height
+        expect(percentPageHeightUtilized).toBeLessThan(
+            MODAL_DEFAULT_SCREEN_USE_PERCENT
+        );
         // 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)
@@ -457,20 +506,64 @@ async function validateModalHeightBehavior(config) {
 /* Function includes expect tests to validate the expected
  * modal WIDTH behavior based on screen size, size attribute,
  * and modalVariant, and actual screen size that was set.
+ * The mechanism utilized to validate modal width behavior
+ * is using wdio getLocation() to get and measure X location
+ * for the child elements of modal
+ * Validating width: use wdio getLocation() on modal child
+ * elements to measure X location (ie x,y coordinates in viewport)
  */
 // eslint-disable-next-line @lwc/lwc/no-async-await
-async function validateModalWidthBehavior(config, modalIndex = 0) {
-    const { modalSize } = config;
-    // first, get outer window size
+async function validateModalWidthBehavior(config) {
+    const { modalSize, modalVariantType } = config;
+    // first, get size of browser window
+    // typically openModal has already been called, so the
+    // window has been resized
+
     // eslint-disable-next-line no-undef
-    const { width: windowWidth } =
-        // eslint-disable-next-line no-undef
-        await browser.getWindowSize();
+    const { width: windowWidth } = await browser.getWindowSize();
+
+    // 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
+    const isVariantHeadless = isModalOfVariantType(
+        modalVariantType,
+        'headless'
+    );
+    const isVariantFootless = isModalOfVariantType(
+        modalVariantType,
+        'footless'
+    );
 
-    // second, find modal elem, then get width
-    const { modalContainerElem } = await getModalInternals(config, modalIndex);
-    const { width: modalContainerElemWidth } =
-        await modalContainerElem.getSize();
+    // setup conditional test values for modalHeader, modalFooter
+    let locHeaderX = null,
+        locFooterX = null;
+
+    // modalBody is always present in the examples
+    const { x: locBodyX } = await bodyOuterDiv.getLocation();
+
+    // modalHeader is not always present in the examples
+    if (!isVariantHeadless) {
+        const { headerOuterDiv } = await getModalHeaderInternals(
+            modalHeaderElem
+        );
+        const locHeader = await headerOuterDiv.getLocation();
+        if (locHeader) {
+            locHeaderX = locHeader.x;
+        }
+    }
+    // modalFooter is not always present in the examples
+    if (!isVariantFootless) {
+        const { footerOuterDiv } = await getModalFooterInternals(
+            modalFooterElem
+        );
+        const locFooter = await footerOuterDiv.getLocation();
+        if (locFooter) {
+            locFooterX = locFooter.x;
+        }
+    }
 
     // the only time size='full' actual renders full page width and height
     // is when windowWidth is set <= 480px
@@ -478,10 +571,49 @@ async function validateModalWidthBehavior(config, modalIndex = 0) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        expect(modalContainerElemWidth).toEqual(windowWidth);
+        // some example values when in full screen modal behavior
+        // consistently the X position represents the left edge of the element
+        // within the UI.  in the case of full screen behavior,
+        // the x value should be 0, and something greater than zero when in
+        // default modal screen behavior (typically 38px)
+        // typical values for child elements
+        // 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);
+        }
+
+        // only evaluate modalHeader, when present
+        if (!isVariantHeadless) {
+            expect(locHeaderX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
+        }
+
+        // always evaluate modalBody location (always present in examples)
+        expect(locBodyX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px) are normal modal behavior
-        expect(modalContainerElemWidth).toBeLessThan(windowWidth);
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px (30em))
+        // are normal modal behavior.  typically the element's
+        // X location value is ~38px
+        // location values vary based on screen and size value
+        // some typical values when in default screen behavior
+        // locHeader:  { x: 38.40625, y: 338.46875 }
+        // locBody:  { x: 38.40625, y: 437.53125 }
+        // locFooter:  { x: 38.40625, y: 338.46875 }
+
+        // modalFooter is NOT always present in the examples
+        if (!isVariantFootless) {
+            expect(locFooterX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
+        }
+        // modalHeader is NOT always present in the examples
+        if (!isVariantHeadless) {
+            expect(locHeaderX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
+        }
+
+        // modalBody is always present in the examples
+        expect(locBodyX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
     }
 }
 
@@ -510,6 +642,7 @@ const getModalSizeFromName = (name = 'all') => {
 async function setWindowSize(screenSizeToSet) {
     // set screen size for testing modal behavior
     const { width, height } = getScreenSizeValues(screenSizeToSet);
+
     // eslint-disable-next-line no-undef
     await browser.setWindowSize(width, height);
     // eslint-disable-next-line no-undef
@@ -533,11 +666,13 @@ async function openModal({
     if (runMockMatchMedia) {
         await mockMatchMedia();
     }
+
     // set a specific window size based on sizing descriptor (SMALL, MEDIUM)
     await setWindowSize(screenSizeToSet);
 
     // find the button that launches the modal, and click
     const modalBtnSelector = SELECTORS[modalVariantType];
+
     await clickButton(modalBtnSelector);
     // eslint-disable-next-line no-undef
     await browser.pause(MODAL_RENDER_PAUSE);

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -1,6 +1,6 @@
 import PrimitiveDatatableCell from 'lightning/primitiveDatatableCell';
 import { api } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSetToString } from 'lightning/utilsPrivate';
 import { toDate } from 'lightning/internationalizationLibrary';
 import cellWithStandardLayout from './cellWithStandardLayout.html';
 import bareCustomCell from './bareCustomCell.html';
@@ -19,18 +19,14 @@ const i18n = {
     false: labelFalse,
 };
 
-function isNumberedBasedType(cellType) {
+function isSpreadComputedAlignment(computedAlignment) {
     return (
-        cellType === 'currency' ||
-        cellType === 'number' ||
-        cellType === 'percent'
+        !computedAlignment ||
+        computedAlignment === 'left' ||
+        (computedAlignment !== 'center' && computedAlignment !== 'right')
     );
 }
 
-function isTypeCenteredByDefault(cellType) {
-    return cellType === 'button-icon';
-}
-
 export default class PrivateCellFactory extends PrimitiveDatatableCell {
     @api types;
     @api alignment;
@@ -93,7 +89,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     getActionableElements() {
-        const result = Array.prototype.slice.call(
+        const result = Array.from(
             this.template.querySelectorAll('[data-navigation="enable"]')
         );
 
@@ -161,7 +157,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     get isRowNumber() {
         if (this.isType('rowNumber')) {
             const error = this.typeAttribute0;
-            this._rowHasError = error && error.title && error.messages;
+            this._rowHasError =
+                error && error.title && error.messages ? true : false;
             return true;
         }
 
@@ -189,10 +186,11 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     isLtrType() {
+        const { columnType } = this;
         return (
-            this.columnType === 'url' ||
-            this.columnType === 'email' ||
-            this.columnType === 'phone'
+            columnType === 'url' ||
+            columnType === 'email' ||
+            columnType === 'phone'
         );
     }
 
@@ -201,7 +199,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get isCustomType() {
-        return this.types && this.types.isCustomType(this.columnType);
+        const { types } = this;
+        return types ? types.isCustomType(this.columnType) : false;
     }
 
     /**
@@ -210,13 +209,19 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
      * but is also using a standard cell layout
      */
     get isEditable() {
-        return this.editable && this.types.isEditableType(this.columnType);
+        const { types } = this;
+        if (types) {
+            return this.editable && types.isEditableType(this.columnType);
+        }
+        return false;
     }
 
     render() {
+        const { columnType, types } = this;
         if (
-            this.isCustomType &&
-            !this.types.isStandardCellLayoutForCustomType(this.columnType)
+            types &&
+            types.isCustomType(columnType) &&
+            !types.isStandardCellLayoutForCustomType(columnType)
         ) {
             return bareCustomCell;
         }
@@ -228,38 +233,42 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
      */
 
     get isSpreadAlignment() {
-        const alignment = this.computedAlignment;
-
-        return (
-            !alignment ||
-            alignment === 'left' ||
-            (alignment !== 'center' && alignment !== 'right')
-        );
+        return isSpreadComputedAlignment(this.computedAlignment);
     }
 
     // Note: this should be passed from above, but we dont have a defined architecture that lets customize / provide defaults
     // on cell attributes per type.
     get computedAlignment() {
-        if (!this.alignment && isNumberedBasedType(this.columnType)) {
-            return 'right';
+        const { alignment } = this;
+        if (alignment) {
+            return alignment;
         }
-
-        if (!this.alignment && isTypeCenteredByDefault(this.columnType)) {
+        const { columnType } = this;
+        // is centered by default type
+        if (columnType === 'button-icon') {
             return 'center';
         }
-
-        return this.alignment;
+        // is numbered based type
+        if (
+            columnType === 'currency' ||
+            columnType === 'number' ||
+            columnType === 'percent'
+        ) {
+            return 'right';
+        }
+        return alignment;
     }
 
     get hasLeftIcon() {
-        return (
-            this.iconName &&
-            (!this.iconPosition || this.iconPosition === 'left')
-        );
+        if (this.iconName) {
+            const { iconPosition } = this;
+            return !iconPosition || iconPosition === 'left';
+        }
+        return false;
     }
 
     get hasRightIcon() {
-        return this.iconName && this.iconPosition === 'right';
+        return this.iconName ? this.iconPosition === 'right' : false;
     }
 
     get shouldDisplayReadOnlyIcon() {
@@ -267,20 +276,16 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedCellDivClass() {
-        return classSet()
-            .add({
-                'slds-truncate':
-                    !this.isAction &&
-                    this.columnType !== 'button-icon' &&
-                    !this.wrapText,
-            })
-            .add({ 'slds-hyphenate': this.wrapText })
-            .add({ 'slds-line-clamp': this.wrapText && this.wrapTextMaxLines })
-            .add({
-                'ltr-content-in-rtl':
-                    document.dir === 'rtl' && this.isLtrType(),
-            })
-            .toString();
+        const { columnType, _wrapText } = this;
+        const isActionType =
+            'action' === columnType || 'action' === this.columnSubType;
+        return classSetToString({
+            'slds-truncate':
+                columnType !== 'button-icon' && !isActionType && !_wrapText,
+            'slds-hyphenate': _wrapText,
+            'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
+            'ltr-content-in-rtl': document.dir === 'rtl' && this.isLtrType(),
+        });
     }
 
     get computedMarginClassWhenLeftIconExists() {
@@ -288,17 +293,18 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedWrapperClass() {
-        const alignment = this.computedAlignment;
-
-        return classSet('slds-grid')
-            .add({
-                'slds-no-space': this.hasTreeData,
-                'slds-align_absolute-center': this.isAction,
-                'slds-grid_align-end': alignment === 'right',
-                'slds-grid_align-center': alignment === 'center',
-                'slds-grid_align-spread': this.isSpreadAlignment,
-            })
-            .toString();
+        const { columnType, computedAlignment } = this;
+        const isActionType =
+            'action' === columnType || 'action' === this.columnSubType;
+        return classSetToString({
+            'slds-grid': true,
+            'slds-no-space': columnType === 'tree',
+            'slds-align_absolute-center': isActionType,
+            'slds-grid_align-end': computedAlignment === 'right',
+            'slds-grid_align-center': computedAlignment === 'center',
+            'slds-grid_align-spread':
+                isSpreadComputedAlignment(computedAlignment),
+        });
     }
 
     get computedRowNumberStyle() {
@@ -351,14 +357,14 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedCssStyles() {
-        if (this.wrapText && this.wrapTextMaxLines) {
+        if (this._wrapText && this.wrapTextMaxLines) {
             return `${'--lwc-lineClamp'}: ${this.wrapTextMaxLines}`;
         }
         return null;
     }
 
     get booleanCellAssistiveText() {
-        return this.isChecked ? i18n.true : i18n.false;
+        return this.value ? i18n.true : i18n.false;
     }
 
     /**
@@ -390,16 +396,15 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
 
     fireCellFocusByClickEvent() {
         let needsRefocusOnCellElement = false;
-        const wrapperDiv = this.template.querySelector('div:first-child');
-        const wrapperSpan = this.template.querySelector(
-            'span.slds-grid:first-child'
-        );
-        const activeElement = this.template.activeElement;
+        const { template } = this;
+        const { activeElement } = this.template;
         // pass a flag for IE11 to refocus on the cell element if the activeElement is not
         // something focusable in the cell or the cell td/th itself
         if (
             activeElement &&
-            (activeElement === wrapperDiv || activeElement === wrapperSpan)
+            (activeElement === template.querySelector('div:first-child') ||
+                activeElement ===
+                    template.querySelector('span.slds-grid:first-child'))
         ) {
             needsRefocusOnCellElement = true;
         }