lightning-base-components 1.14.1-alpha → 1.14.2-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.14.1-alpha",
+    "version": "1.14.2-alpha",
     "engines": {
         "node": ">=12.18.3"
     },

package/src/lightning/ariaObserver/__component__/ariaObserver.spec.js

@@ -0,0 +1,103 @@
+import { createElement } from 'lwc';
+import AriaObserverContainer from 'lightningtest/ariaObserverContainer';
+
+function createTestElement(props = {}) {
+    const element = createElement('lightningtest-aria-observer-container', {
+        is: AriaObserverContainer,
+    });
+    Object.assign(element, props);
+    document.body.appendChild(element);
+
+    return element;
+}
+
+describe('AriaObserver', () => {
+    if (process.env.NATIVE_SHADOW) {
+        describe('native shadow', () => {
+            it('should copy the label content over and set aria-labelledby to be the internal label element', () => {
+                const container = createTestElement();
+                const testElement = container.testElement;
+
+                expect(container.labelContent).toEqual(
+                    testElement.labelContent
+                );
+            });
+
+            it('should react to label id changes', async () => {
+                const container = createTestElement();
+                const oldLabelContent = container.labelContent;
+
+                container.updateAriaLabelledby('alt-label-id');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+
+                expect(container.labelContent).not.toEqual(oldLabelContent);
+                expect(container.labelContent).toEqual(
+                    testElement.labelContent
+                );
+            });
+
+            it('should work with multiple label ids', async () => {
+                const container = createTestElement();
+                container.updateAriaLabelledby('id-label alt-label-id');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(testElement.labelContent).toEqual('Foo\nBar');
+            });
+
+            it('should update the internal label content when external content changes', async () => {
+                const container = createTestElement();
+                container.updateLabelContent();
+
+                // wait for component rehydration
+                await Promise.resolve();
+                // wait for mutation observer callback
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(container.labelContent).toEqual(
+                    testElement.labelContent
+                );
+            });
+        });
+    } else {
+        describe('synthetic shadow', () => {
+            it('should set aria-labelledby to be the external label id', () => {
+                const container = createTestElement();
+                const testElement = container.testElement;
+
+                expect(container.labelId).toEqual(testElement.labelId);
+            });
+
+            it('should react to label id changes', async () => {
+                const container = createTestElement();
+                const oldLabelId = container.labelId;
+
+                container.updateAriaLabelledby('alt-label-id');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+
+                expect(container.labelId).not.toEqual(oldLabelId);
+                expect(container.labelId).toEqual(testElement.labelId);
+            });
+
+            it('should keep the label id unchanged when the label content changes', async () => {
+                const container = createTestElement();
+                container.updateLabelContent();
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(container.labelId).toEqual(testElement.labelId);
+            });
+
+            it('should keep track of the live id', () => {
+                const container = createTestElement();
+                const testElement = container.testElement;
+                expect(testElement.labelId).toEqual(testElement.liveId);
+            });
+        });
+    }
+});

package/src/lightning/ariaObserver/ariaObserver.js

@@ -0,0 +1,268 @@
+import {
+    guid,
+    synchronizeAttrs,
+    isNativeComponent,
+} from 'lightning/utilsPrivate';
+
+const CONTENT_SEPARATOR = '\n';
+
+function getAttr(elm, attr) {
+    if (elm.tagName.match(/lightning/i)) {
+        return elm[attr];
+    }
+    return elm.getAttribute(attr);
+}
+
+function extractElements(root, selector) {
+    if (typeof selector !== 'string' || selector === '') {
+        return [];
+    }
+    return [].slice.call(root.querySelectorAll(selector));
+}
+
+function extractContent(elements) {
+    return elements
+        .map((element) => element.textContent)
+        .filter((text) => text.length)
+        .join(CONTENT_SEPARATOR);
+}
+
+function splitIds(ids) {
+    return (ids + '').trim().split(/\s+/);
+}
+
+function hashIds(ids) {
+    return (ids + '')
+        .trim()
+        .split(/\s+/)
+        .reduce((r, v) => {
+            r[v] = 1;
+            return r;
+        }, {});
+}
+
+// this method should check each individual id from computedIds
+// against the existing value of the attrName on elm, and dupe
+// them, and add the new ones.
+function addAriaRefWhenNeeded(elm, attrName, computedIds) {
+    const newIds = splitIds(computedIds);
+    const oldIds = getAttr(elm, attrName) || '';
+    const oldIdsHash = hashIds(oldIds);
+    const suffix = [];
+    for (let i = 0; i < newIds.length; i += 1) {
+        if (!oldIdsHash[newIds[i]]) {
+            suffix.push(newIds[i]);
+        }
+    }
+
+    if (suffix.length !== 0) {
+        synchronizeAttrs(elm, {
+            [attrName]:
+                oldIds + (oldIds.length === 0 ? '' : ' ') + suffix.join(' '),
+        });
+    }
+}
+
+// this method should check each individual id from computedIds
+// against the existing value of the attrName on elm, and remove
+// them when possible in preparation for some new values.
+function removeAriaRefWhenPossible(elm, attrName, computedIds) {
+    const newIds = splitIds(computedIds);
+    const oldIds = getAttr(elm, attrName) || '';
+    const oldIdsHash = hashIds(oldIds);
+    const newValues = [];
+    for (let i = 0; i < newIds.length; i += 1) {
+        if (!oldIdsHash[newIds[i]]) {
+            newValues.push(newIds[i]);
+        }
+    }
+
+    synchronizeAttrs(elm, {
+        [attrName]: newValues.join(' '),
+    });
+}
+
+function createPlaceholderContainer() {
+    const container = document.createElement('span');
+    container.style.display = 'none';
+    container.setAttribute('placeholder-container', '');
+    return container;
+}
+
+export default class AriaObserver {
+    constructor(component) {
+        this.component = component;
+        this.template = component.template;
+        this.isNative = isNativeComponent(component);
+        this.state = {};
+        this.liveIds = {};
+        this.guid = guid();
+        this.placeholderContainer = null;
+    }
+
+    connectLiveIdRef(refs, callback) {
+        const selector = (refs + '')
+            .trim()
+            .split(/\s+/)
+            .map((ref) => `[id*="${ref}"]`)
+            .join(',');
+        const liveId = { selector, callback };
+        this.liveIds[refs] = liveId;
+    }
+
+    connect({ targetSelector, attribute, id, ids }) {
+        ids = ids || id;
+
+        let attrState = this.state[attribute];
+        if (attrState) {
+            // note: we don't support linking to a different targetSelector, attribute
+            if (!this.isNative) {
+                const elm = this.template.querySelector(
+                    attrState.innerSelector
+                );
+                if (elm) {
+                    // removing the old ids if possible before setting the new ones
+                    removeAriaRefWhenPossible(elm, attribute, attrState.ids);
+                }
+                attrState.ids = ids;
+            }
+        } else {
+            attrState = this.state[attribute] = {
+                ids,
+                innerSelector: targetSelector,
+            };
+        }
+        if (this.isNative) {
+            attrState.outerSelector = (ids + '')
+                .trim()
+                .split(/\s+/)
+                .map((ref) => `#${ref}`)
+                .join(',');
+
+            // create placeholder element for copied content
+            if (!attrState.placeholder) {
+                attrState.placeholder = document.createElement('span');
+                attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
+            }
+        }
+        if (this.component.isConnected) {
+            this.privateUpdate(attribute);
+        }
+    }
+
+    sync() {
+        if (!this.component.isConnected) {
+            throw new Error(
+                `Invalid sync invocation. It can only be invoked during renderedCallback().`
+            );
+        }
+        if (this.isNative && !this.mo) {
+            this.privateConnect();
+        }
+        for (const attrName in this.state) {
+            if (Object.prototype.hasOwnProperty.call(this.state, attrName)) {
+                this.privateUpdate(attrName);
+            }
+        }
+
+        // live idRef feature is a no-op in native
+        if (!this.isNative) {
+            this.privateUpdateLiveIds();
+        }
+    }
+
+    privateExtractIds(elements) {
+        return elements
+            .map((el) => {
+                return el.getAttribute('id');
+            })
+            .join(' ');
+    }
+
+    privateUpdateLiveIds() {
+        const root = this.template.host.getRootNode();
+
+        // if not connected do nothing
+        if (!root) {
+            return;
+        }
+        for (const liveId in this.liveIds) {
+            if (Object.prototype.hasOwnProperty.call(this.liveIds, liveId)) {
+                const thisId = this.liveIds[liveId];
+                if (!thisId.elements) {
+                    // element refs are cached
+                    thisId.elements = Array.prototype.slice.call(
+                        root.querySelectorAll(thisId.selector)
+                    );
+                }
+                const newIds = this.privateExtractIds(thisId.elements);
+                // only fire calback if the value changed
+                if (newIds !== thisId.ids) {
+                    thisId.callback(newIds);
+                    thisId.ids = newIds;
+                }
+            }
+        }
+    }
+
+    privateUpdate(attrName) {
+        const { innerSelector } = this.state[attrName];
+        const elm = this.template.querySelector(innerSelector);
+        if (!elm) {
+            return; // nothing to update
+        }
+        let computedIds;
+        if (this.isNative) {
+            const { outerSelector, content, placeholder } =
+                this.state[attrName];
+
+            const newContent = extractContent(
+                extractElements(this.root, outerSelector)
+            );
+            if (content !== newContent) {
+                this.state[attrName].content = placeholder.textContent =
+                    newContent;
+            }
+            if (!placeholder.parentNode) {
+                // create placeholder container at template root, if not already exist
+                if (!this.placeholderContainer) {
+                    this.placeholderContainer = createPlaceholderContainer();
+                    this.template.appendChild(this.placeholderContainer);
+                }
+
+                // inserting the placeholder once
+                this.placeholderContainer.appendChild(placeholder);
+            }
+            computedIds = placeholder.id;
+        } else {
+            computedIds = this.state[attrName].ids;
+        }
+        addAriaRefWhenNeeded(elm, attrName, computedIds);
+    }
+
+    privateConnect() {
+        // caching root ref
+        this.root = this.template.host.getRootNode();
+        // creating the observer once
+        this.mo = new MutationObserver(() => {
+            if (!this.component.isConnected) {
+                return; // do nothing when the template is not connected
+            }
+            this.sync();
+        });
+        this.mo.observe(this.root, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+
+    disconnect() {
+        // MutationObservers must be disconnected manually when using @lwc/synthetic-shadow
+        // https://lwc.dev/guide/composition#:~:text=memory%20leak
+        if (this.mo) {
+            this.mo.disconnect();
+            this.mo = undefined;
+        }
+    }
+}

package/src/lightning/input/input.js

@@ -77,7 +77,7 @@ const i18n = {
 
 const ARIA_CONTROLS = 'aria-controls';
 const ARIA_LABEL = 'aria-label';
-const ARIA_LABELEDBY = 'aria-labelledby';
+const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 
 /*
@@ -524,7 +524,7 @@ export default class LightningInput extends LightningElement {
         this._ariaControls = references;
         this.ariaObserver.connect({
             targetSelector: 'input',
-            attribute: 'aria-controls',
+            attribute: ARIA_CONTROLS,
             ids: references,
         });
     }
@@ -537,8 +537,7 @@ export default class LightningInput extends LightningElement {
     get ariaLabelledBy() {
         // native version returns the auto linked value
         if (this.isNative) {
-            const ariaValues =
-                this._inputElement.getAttribute('aria-labelledby');
+            const ariaValues = this._inputElement.getAttribute(ARIA_LABELLEDBY);
             return filterNonAutoLink(ariaValues);
         }
         return this._ariaLabelledBy;
@@ -548,7 +547,7 @@ export default class LightningInput extends LightningElement {
         this._ariaLabelledBy = references;
         this.ariaObserver.connect({
             targetSelector: 'input',
-            attribute: 'aria-labelledby',
+            attribute: ARIA_LABELLEDBY,
             ids: references,
         });
     }
@@ -562,7 +561,7 @@ export default class LightningInput extends LightningElement {
         if (this.isNative) {
             // in native case return the linked value
             const ariaValues =
-                this._inputElement.getAttribute('aria-describedby');
+                this._inputElement.getAttribute(ARIA_DESCRIBEDBY);
             return filterNonAutoLink(ariaValues);
         }
         return this._ariaDescribedBy;
@@ -572,7 +571,7 @@ export default class LightningInput extends LightningElement {
         this._ariaDescribedBy = references;
         this.ariaObserver.connect({
             targetSelector: 'input',
-            attribute: 'aria-describedby',
+            attribute: ARIA_DESCRIBEDBY,
             ids: references,
         });
     }
@@ -2033,32 +2032,58 @@ export default class LightningInput extends LightningElement {
         return result;
     }
 
+    _updateInputA11y(elem) {
+        synchronizeAttrs(elem, {
+            [ARIA_LABELLEDBY]: this.computedAriaLabelledBy,
+            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
+            [ARIA_CONTROLS]: this.computedAriaControls,
+            [ARIA_LABEL]: this.computedAriaLabel,
+        });
+    }
+
+    _updateDateOrTimePickerA11y(elem) {
+        synchronizeAttrs(elem, {
+            ariaLabelledByElement: this.ariaLabelledBy,
+            ariaDescribedByElements: this.ariaDescribedBy,
+            ariaControlsElement: this.ariaControls,
+            [ARIA_LABEL]: this.computedAriaLabel,
+        });
+    }
+
+    _updateDateTimePickerA11y(elem) {
+        synchronizeAttrs(elem, {
+            // datepicker aria attributes
+            dateAriaLabelledBy: this.dateAriaLabelledBy,
+            dateAriaDescribedBy: this.dateAriaDescribedBy,
+            dateAriaControls: this.dateAriaControls,
+            dateAriaLabel: this.dateAriaLabel,
+            // timepicker aria attributes
+            timeAriaLabelledBy: this.timeAriaLabelledBy,
+            timeAriaDescribedBy: this.timeAriaDescribedBy,
+            timeAriaControls: this.timeAriaControls,
+            timeAriaLabel: this.timeAriaLabel,
+        });
+    }
+
     _synchronizeA11y() {
+        // each of these templates are mutually exclusive and are selected
+        // depending on the [type] of input.
         const input = this.template.querySelector('input');
         const datepicker = this.template.querySelector('lightning-datepicker');
         const timepicker = this.template.querySelector('lightning-timepicker');
-
+        const datetimepicker = this.template.querySelector(
+            'lightning-datetimepicker'
+        );
+        // determine which template type is present,
+        // and update a11y props accordingly
         if (input) {
-            synchronizeAttrs(input, {
-                [ARIA_LABELEDBY]: this.computedAriaLabelledBy,
-                [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
-                [ARIA_CONTROLS]: this.computedAriaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateInputA11y(input);
         } else if (datepicker) {
-            synchronizeAttrs(datepicker, {
-                ariaLabelledByElement: this.ariaLabelledBy,
-                ariaDescribedByElements: this.ariaDescribedBy,
-                ariaControlsElement: this.ariaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateDateOrTimePickerA11y(datepicker);
         } else if (timepicker) {
-            synchronizeAttrs(timepicker, {
-                ariaLabelledByElement: this.ariaLabelledBy,
-                ariaDescribedByElements: this.ariaDescribedBy,
-                ariaControlsElement: this.ariaControls,
-                [ARIA_LABEL]: this.computedAriaLabel,
-            });
+            this._updateDateOrTimePickerA11y(timepicker);
+        } else if (datetimepicker) {
+            this._updateDateTimePickerA11y(datetimepicker);
         }
     }
 }

package/src/lightning/positionLibrary/positionLibrary.js

@@ -131,38 +131,50 @@ function createRelationship(
     );
 
     const autoShrink = config.autoShrink.height || config.autoShrink.width;
-    if (config.scrollableParentBound && scrollableParent) {
-        const parent = normalizeElement(scrollableParent);
-        const boxConfig = {
-            element: config.element,
-            enabled: config.enabled,
-            target: createProxy(parent),
-            align: {},
-            targetAlign: {},
-            pad: 3,
-            boxDirections: {
-                top: true,
-                bottom: true,
-                left: true,
-                right: true,
-            },
-        };
-        if (autoShrink) {
-            const style = boxConfig.element.getNode().style;
-            if (!style.minHeight) {
-                style.minHeight = config.minHeight;
-                boxConfig.element._removeMinHeight = true;
-            }
-
-            boxConfig.boxDirections = {
-                top: !!config.autoShrink.height,
-                bottom: !!config.autoShrink.height,
-                left: !!config.autoShrink.width,
-                right: !!config.autoShrink.width,
+    const modal = new OverlayDetector(originalConfig.target);
+    if (
+        (config.scrollableParentBound && scrollableParent) ||
+        (modal.isInsideModal && modal.overlay && autoShrink)
+    ) {
+        let parent;
+        if (config.scrollableParentBound && scrollableParent) {
+            parent = normalizeElement(scrollableParent);
+        } else if (modal.isInsideModal && modal.overlay) {
+            parent = normalizeElement(modal.overlay);
+        }
+        if (parent) {
+            const boxConfig = {
+                element: config.element,
+                enabled: config.enabled,
+                target: createProxy(parent),
+                align: {},
+                targetAlign: {},
+                pad: 3,
+                boxDirections: {
+                    top: true,
+                    bottom: true,
+                    left: true,
+                    right: true,
+                },
             };
-            constraintList.push(new Constraint('shrinking box', boxConfig));
-        } else {
-            constraintList.push(new Constraint('bounding box', boxConfig));
+
+            if (autoShrink) {
+                const style = boxConfig.element.getNode().style;
+                if (!style.minHeight) {
+                    style.minHeight = config.minHeight;
+                    boxConfig.element._removeMinHeight = true;
+                }
+
+                boxConfig.boxDirections = {
+                    top: !!config.autoShrink.height,
+                    bottom: !!config.autoShrink.height,
+                    left: !!config.autoShrink.width,
+                    right: !!config.autoShrink.width,
+                };
+                constraintList.push(new Constraint('shrinking box', boxConfig));
+            } else {
+                constraintList.push(new Constraint('bounding box', boxConfig));
+            }
         }
     }
 

package/src/lightning/progressStep/progressStep.js

@@ -31,6 +31,8 @@ export default class LightningProgressStep extends LightningElement {
      */
     @api value;
 
+    _privateLabel;
+
     @track state = {};
 
     updateInternal(newStatus, newType, newIndex, newActive, shouldFocus) {
@@ -47,6 +49,7 @@ export default class LightningProgressStep extends LightningElement {
         this.state.type = newType;
         this.state.index = newIndex;
         this.state.active = newActive;
+        this.initializeTooltip();
     }
     /**
      * Text to display as the name or tooltip for the step.
@@ -54,30 +57,12 @@ export default class LightningProgressStep extends LightningElement {
      */
     @api
     set label(value) {
-        if (this._tooltip) {
-            this._tooltip.value = value;
-        } else if (value && !this.isPath) {
-            // Note that because the tooltip target is a child element it may not be present in the
-            // dom during initial rendering.
-            this._tooltip = new Tooltip(value, {
-                root: this,
-                target: () => this.template.querySelector('button'),
-                type: TooltipType.Toggle,
-                align: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Bottom,
-                },
-                targetAlign: {
-                    horizontal: Direction.Center,
-                    vertical: Direction.Top,
-                },
-            });
-            this._tooltip.initialize();
-        }
+        this._privateLabel = value;
+        this.initializeTooltip();
     }
 
     get label() {
-        return this._tooltip ? this._tooltip.value : undefined;
+        return this._privateLabel;
     }
 
     computeClassSet(type, status, isActive) {
@@ -240,4 +225,27 @@ export default class LightningProgressStep extends LightningElement {
         }
         return base;
     }
+
+    initializeTooltip() {
+        if (this._tooltip) {
+            this._tooltip.value = this._privateLabel;
+        } else if (this._privateLabel && this.state.type && !this.isPath) {
+            // Note that because the tooltip target is a child element it may not be present in the
+            // dom during initial rendering.
+            this._tooltip = new Tooltip(this._privateLabel, {
+                root: this,
+                target: () => this.template.querySelector('button'),
+                type: TooltipType.Toggle,
+                align: {
+                    horizontal: Direction.Center,
+                    vertical: Direction.Bottom,
+                },
+                targetAlign: {
+                    horizontal: Direction.Center,
+                    vertical: Direction.Top,
+                },
+            });
+            this._tooltip.initialize();
+        }
+    }
 }

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -218,7 +218,8 @@ export function buttonGroupOrderClass(groupOrder) {
  * @returns {Boolean} Whether the component is native
  */
 export function isNativeComponent(cmp) {
-    return !String(cmp?.template?.constructor).includes(
-        'function SyntheticShadowRoot'
-    );
+    if (cmp && cmp.template && cmp.template.constructor) {
+        return !!String(cmp.template.constructor).match(/\[native code\]/);
+    }
+    return false;
 }