lightning-base-components 1.13.10-alpha → 1.14.4-alpha

package/metadata/raptor.json

@@ -1352,9 +1352,11 @@
   "industriesCibApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesExplainabilityApi": {},
+  "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
   "industriesSustainabilityRecalculateApi": {},
@@ -3412,6 +3414,28 @@
   "uiRelatedListApi": {
     "minVersion": "53.0"
   },
+  "unstable_analyticsDataServiceApi": {},
+  "unstable_analyticsWaveApi": {},
+  "unstable_cmsAuthoringApi": {},
+  "unstable_cmsDeliveryApi": {},
+  "unstable_cmsTypeApi": {},
+  "unstable_commerceApi": {},
+  "unstable_communityNavigationMenuApi": {},
+  "unstable_communityRecordSeoPropertiesApi": {},
+  "unstable_communitySitesSearchApi": {},
+  "unstable_experienceMarketingIntegrationApi": {},
+  "unstable_industriesCibApi": {},
+  "unstable_industriesDecisionMatrixDesignerApi": {},
+  "unstable_industriesExplainabilityApi": {},
+  "unstable_industriesHealthcloudHpiApi": {},
+  "unstable_industriesInterestTaggingApi": {},
+  "unstable_industriesLoyaltyEngineApi": {},
+  "unstable_industriesPublicSectorApi": {},
+  "unstable_industriesRcgTenantmanagementApi": {},
+  "unstable_industriesRuleBuilderApi": {},
+  "unstable_platformAdminSuccessGuidanceApi": {},
+  "unstable_platformInteractionOrchestratorApi": {},
+  "unstable_platformScaleCenterApi": {},
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "lightning-base-components",
-    "version": "1.13.10-alpha",
+    "version": "1.14.4-alpha",
     "engines": {
-        "node": ">=12.18.3"
+        "node": ">=14.16.0"
     },
     "files": [
         "external",
@@ -57,6 +57,10 @@
                 "name": "@salesforce/label/LightningErrorMessage.validityTooShort",
                 "path": "scopedImports/@salesforce-label-LightningErrorMessage.validityTooShort.js"
             },
+            {
+                "name": "@salesforce/label/LightningErrorMessage.validitySelectAtleastOne",
+                "path": "scopedImports/@salesforce-label-LightningErrorMessage.validitySelectAtleastOne.js"
+            },
             {
                 "name": "@salesforce/label/LightningCarousel.tabString",
                 "path": "scopedImports/@salesforce-label-LightningCarousel.tabString.js"
@@ -369,6 +373,14 @@
                 "name": "@salesforce/label/LightningDualListbox.requiredOptionError",
                 "path": "scopedImports/@salesforce-label-LightningDualListbox.requiredOptionError.js"
             },
+            {
+                "name": "@salesforce/label/LightningDualListbox.movedOptionsSingular",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsSingular.js"
+            },
+            {
+                "name": "@salesforce/label/LightningDualListbox.movedOptionsPlural",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js"
+            },
             {
                 "name": "@salesforce/label/LightningProgressIndicator.stageComplete",
                 "path": "scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js"
@@ -861,6 +873,10 @@
                 "name": "@salesforce/label/LightningMap.iframeTitle",
                 "path": "scopedImports/@salesforce-label-LightningMap.iframeTitle.js"
             },
+            {
+                "name": "@salesforce/label/LightningMap.titleWithAddress",
+                "path": "scopedImports/@salesforce-label-LightningMap.titleWithAddress.js"
+            },
             {
                 "name": "@salesforce/label/LightningPrimitiveCoordinate.selected",
                 "path": "scopedImports/@salesforce-label-LightningPrimitiveCoordinate.selected.js"
@@ -942,8 +958,8 @@
                 "path": "scopedImports/@salesforce-label-LightningRating.nStars.js"
             },
             {
-                "name": "@salesforce/label/LightningModalBase.close",
-                "path": "scopedImports/@salesforce-label-LightningModalBase.close.js"
+                "name": "@salesforce/label/LightningModalBase.cancelandclose",
+                "path": "scopedImports/@salesforce-label-LightningModalBase.cancelandclose.js"
             },
             {
                 "name": "@salesforce/label/LightningModalBase.waitstate",

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '234';
+export default '236';

package/scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js

@@ -0,0 +1 @@
+export default 'Items {0} moved to the list {1}';

package/scopedImports/@salesforce-label-LightningDualListbox.movedOptionsSingular.js

@@ -0,0 +1 @@
+export default 'Item {0} moved to the list {1}';

package/scopedImports/@salesforce-label-LightningErrorMessage.validitySelectAtleastOne.js

@@ -0,0 +1 @@
+export default 'You must select at least one choice from this set.';

package/scopedImports/@salesforce-label-LightningMap.titleWithAddress.js

@@ -0,0 +1 @@
+export default 'Map of {0}';

package/scopedImports/@salesforce-label-LightningModalBase.cancelandclose.js

@@ -0,0 +1 @@
+export default 'Cancel and close';

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

@@ -0,0 +1,112 @@
+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 work with label ids appearing in the opposite of document order', async () => {
+                const container = createTestElement();
+                container.updateAriaLabelledby('alt-label-id id-label');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(testElement.labelContent).toEqual('Bar\nFoo');
+            });
+
+            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/__docs__/ariaObserver.md

@@ -0,0 +1,142 @@
+The `lightning/ariaObserver` module provides an easy way for users to write accessible component that works in both synthetic and native shadow.
+
+## Aria ID referencing in native shadow
+Use the` AriaObserver` library to write accessible component that works where `ariaLabelledBy` would break native shadow. 
+
+Here's an example that won't work with native shadow. In the following code, we support attribute `ariaLabelledBy` in our component `c-foo`, so the `input` element is labelled by external elements.
+
+``` html
+<template>
+    <input aria-labelledby={ariaLabelledBy}>
+</template>
+```
+
+```
+class Foo extends LightningElement {
+    @api ariaLabelledBy;
+}
+```
+
+This example uses the `aria-labelledby` attribute to use the internal input as an external label in `c-foo`.
+
+``` html
+<span id="my-label">Input field</span>
+<c-foo aria-labelledby="my-label"></c-foo>
+```
+
+The above example works fine in synthetic shadow, but in native shadow mode, the `aria-labelledby` ID reference is broken. The `input` element is isolated in its own shadow DOM, so the label with id `my-label` isn't in the same shadow boundary.
+
+## Creating AriaObserver
+
+To use `AriaObserver` in your component, first import it from `lightning/ariaObserver`. Then, instantiate the `AriaObserver` within your component.
+
+The `AriaObserver` constructor takes one parameter:
+- `cmpReference` The reference of the current component (`this`).
+
+``` js
+import AriaObserver from 'lightning/ariaObserver';
+
+class Foo extends LightningElement {
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+}
+```
+
+Next, use the `connect(options)` method to connect between the internal element and the external reference. It takes an options object with the following keys:
+- `targetSelector` The selector to the internal element where the aria attribute should be attached.
+- `attribute` The name of the aria attribute. Two supported options: `aria-labelledby`and `aria-describedby`.
+- `id` The ID of the external element. Alternatively, you can use `ids` for multiple IDs.
+
+This example uses `connect(options)` to display an aria label for the internal `input` element.
+``` js
+@api
+get ariaLabelledBy() {
+    return this._ariaLabelledBy;
+}
+set ariaLabelledBy(refs) {
+    this._ariaLabelledBy = refs;
+
+    this.ariaObserver.connect({
+        targetSelector: 'input',
+        attribute: 'aria-labelledby',
+        id: refs
+    });
+}
+```
+
+Then use the `sync()` method to synchronize the ID references when the template is re-rendered.
+
+``` js
+renderedCallback() {
+    this.ariaObserver.sync();
+}
+```
+
+Finally, disconnect the aria observer and free the resources at the end of the component lifecycle.
+
+``` js
+disconnectedCallback() {
+    if (this.ariaObserver) {
+        this.ariaObserver.disconnect();
+        this.ariaObserver = undefined;
+    }
+}
+```
+
+Here is all these steps combined into a complete example of a component using `AriaObserver`.
+
+``` html
+<template>
+    <!-- element where the aria attribute is attached -->
+    <input>
+</template>
+```
+
+``` js
+import {api, LightningElement} from 'lwc';
+import AriaObserver from 'lightning/ariaObserver';
+
+export default class Foo extends LightningElement {
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+
+    _ariaLabelledBy = '';
+
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+    set ariaLabelledBy(refs) {
+        this._ariaLabelledBy = refs;
+
+        /* Establish the connection between input and the external label */
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: 'aria-labelledby',
+            id: refs
+        });
+    }
+
+    renderedCallback() {
+        this.ariaObserver.sync();
+    }
+
+    disconnectedCallback() {
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+}
+```
+
+## Limitations
+`AriaObserver` only works with text-only aria ID references.
+
+Supported attributes:
+- `aria-labelledby`
+- `aria-describedby`

package/src/lightning/{utilsPrivate/contentMutation.js → ariaObserver/ariaObserver.js}

@@ -1,50 +1,11 @@
-import { guid } from './guid';
-import { smartSetAttribute } from './smartSetAttribute';
+import {
+    guid,
+    synchronizeAttrs,
+    isNativeComponent,
+} from 'lightning/utilsPrivate';
 
 const CONTENT_SEPARATOR = '\n';
 
-/**
-<template>
-    <span lwc:dom="manual" class="visually-hidden"></span>
-    <input>
-</template>
-
-class Foo extends LightningElement {
-    constructor() {
-        super();
-        this.ariaObserver = new ContentMutation(this);
-    }
-
-    connectedCallback() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new ContentMutation(this);
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
-    }
-
-    @track ariaLabeledbyValue = '';
-
-    @api
-    get ariaLabeledby() {
-        return this.ariaLabeledbyValue; // whatever they set, is what they get back.
-    }
-    set ariaLabeledby(refs) {
-        this.ariaLabeledbyValue = refs;
-        this.ariaObserver.link('input', 'aria-labeledby', refs, 'span.visually-hidden');
-    }
-
-    renderedCallback() {
-        this.ariaObserver.sync();
-    }
-}
-**/
-
 function getAttr(elm, attr) {
     if (elm.tagName.match(/lightning/i)) {
         return elm[attr];
@@ -52,11 +13,13 @@ function getAttr(elm, attr) {
     return elm.getAttribute(attr);
 }
 
-function extractElements(root, selector) {
-    if (typeof selector !== 'string' || selector === '') {
+function extractElements(root, ids) {
+    if (typeof ids !== 'string' || ids === '') {
         return [];
     }
-    return [].slice.call(root.querySelectorAll(selector));
+    // We must query the elements in the order of ids, so that
+    // the content will be extracted in the correct order.
+    return splitIds(ids).map((id) => root.querySelector(`#${id}`));
 }
 
 function extractContent(elements) {
@@ -95,11 +58,10 @@ function addAriaRefWhenNeeded(elm, attrName, computedIds) {
     }
 
     if (suffix.length !== 0) {
-        smartSetAttribute(
-            elm,
-            attrName,
-            oldIds + (oldIds.length === 0 ? '' : ' ') + suffix.join(' ')
-        );
+        synchronizeAttrs(elm, {
+            [attrName]:
+                oldIds + (oldIds.length === 0 ? '' : ' ') + suffix.join(' '),
+        });
     }
 }
 
@@ -116,19 +78,28 @@ function removeAriaRefWhenPossible(elm, attrName, computedIds) {
             newValues.push(newIds[i]);
         }
     }
-    smartSetAttribute(elm, attrName, newValues.join(' '));
+
+    synchronizeAttrs(elm, {
+        [attrName]: newValues.join(' '),
+    });
+}
+
+function createPlaceholderContainer() {
+    const container = document.createElement('span');
+    container.style.display = 'none';
+    container.setAttribute('placeholder-container', '');
+    return container;
 }
 
-export class ContentMutation {
+export default class AriaObserver {
     constructor(component) {
         this.component = component;
         this.template = component.template;
-        this.isNative = this.template.constructor
-            .toString()
-            .match(/\[native code\]/);
+        this.isNative = isNativeComponent(component);
         this.state = {};
         this.liveIds = {};
         this.guid = guid();
+        this.placeholderContainer = null;
     }
 
     connectLiveIdRef(refs, callback) {
@@ -141,37 +112,33 @@ export class ContentMutation {
         this.liveIds[refs] = liveId;
     }
 
-    link(innerSelector, attrName, ids, placeholderContainerSelector) {
-        let attrState = this.state[attrName];
-        if (attrState) {
-            // note: we don't support linking to a different innerSelector,
-            // attrName, or placeholderContainerSelector
-            if (!this.isNative) {
-                const elm = this.template.querySelector(innerSelector);
-                if (elm) {
-                    // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attrName, attrState.ids);
-                }
-                attrState.ids = ids;
+    connect({ targetSelector, attribute, id, ids }) {
+        ids = ids || id;
+
+        this.state[attribute] = this.state[attribute] || {};
+        const attrState = this.state[attribute];
+
+        // note: we don't support linking to a different targetSelector
+        attrState.innerSelector = attrState.innerSelector || targetSelector;
+
+        // removing the old ids if possible before setting the new ones
+        if (!this.isNative && attrState.ids) {
+            const elm = this.template.querySelector(attrState.innerSelector);
+            if (elm) {
+                removeAriaRefWhenPossible(elm, attribute, attrState.ids);
             }
-        } else {
-            attrState = this.state[attrName] = {
-                ids,
-                innerSelector,
-                placeholderContainerSelector,
-            };
         }
-        if (this.isNative) {
-            attrState.outerSelector = (ids + '')
-                .trim()
-                .split(/\s+/)
-                .map((ref) => `#${ref}`)
-                .join(',');
+
+        attrState.ids = ids;
+
+        if (this.isNative && !attrState.placeholder) {
+            // create placeholder element for copied content
             attrState.placeholder = document.createElement('span');
-            attrState.placeholder.id = `auto-link-${attrName}-${this.guid}`;
+            attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
         }
+
         if (this.component.isConnected) {
-            this.privateUpdate(attrName);
+            this.privateUpdate(attribute);
         }
     }
 
@@ -238,27 +205,22 @@ export class ContentMutation {
         }
         let computedIds;
         if (this.isNative) {
-            const {
-                outerSelector,
-                content,
-                placeholder,
-                placeholderContainerSelector,
-            } = this.state[attrName];
-            const newContent = extractContent(
-                extractElements(this.root, outerSelector)
-            );
+            const { ids, content, placeholder } = this.state[attrName];
+
+            const newContent = extractContent(extractElements(this.root, ids));
             if (content !== newContent) {
                 this.state[attrName].content = placeholder.textContent =
                     newContent;
             }
             if (!placeholder.parentNode) {
-                // inserting the placeholder once
-                const container = this.template.querySelector(
-                    placeholderContainerSelector
-                );
-                if (container) {
-                    container.appendChild(placeholder);
+                // 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 {

package/src/lightning/buttonMenu/keyboard.js

@@ -113,16 +113,6 @@ export function handleKeyDownOnMenuTrigger(event, menuInterface) {
                 menuInterface.toggleMenuVisibility();
             }
             break;
-        // W3: Home and End: If arrow key wrapping is not supported, move focus to first and last item
-        // Note: We do support wrapping, but it doesn't hurt to support these keys anyway.
-        case keyCodes.home:
-            preventDefaultAndStopPropagation(event);
-            menuInterface.focusOnIndex(0);
-            break;
-        case keyCodes.end:
-            preventDefaultAndStopPropagation(event);
-            menuInterface.focusOnIndex(menuInterface.getTotalMenuItems() - 1);
-            break;
         // W3: Escape: Close the menu and return focus to the element or context, e.g., menu button or
         // parent menu item, from which the menu was opened
         case keyCodes.escape:

package/src/lightning/card/card.html

@@ -40,5 +40,11 @@
                 <slot name="footer"></slot>
             </div>
         </template>
+        <!-- This dummy placeholder slot is required because
+            a slot's presence is verified by assignedElements count
+            and not whether the slot itself is present or not -->
+        <template if:false={showFooter}>
+            <slot name="footer" class="slds-hide"></slot>
+        </template>
     </article>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.html

@@ -1,5 +1,5 @@
 <template>
-    <fieldset aria-required={required}>
+    <fieldset aria-describedby={computearaiDescriedBy}>
 
         <legend class={computedLegendClass}>
             <template if:true={required}>
@@ -32,6 +32,6 @@
         <template if:true={_helpMessage}>
             <div id="helptext" data-helptext class="slds-form-element__help">{_helpMessage}</div>
         </template>
-
+        
     </fieldset>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.js

@@ -295,7 +295,7 @@ export default class LightningCheckboxGroup extends LightningElement {
     get _constraint() {
         if (!this._constraintApi) {
             this._constraintApi = new FieldConstraintApi(() => this, {
-                valueMissing: () =>
+                validitySelectAtleastOneValue: () =>
                     !this.disabled && this.required && this.value.length === 0,
             });
         }
@@ -313,4 +313,9 @@ export default class LightningCheckboxGroup extends LightningElement {
             })
             .toString();
     }
+
+    computearaiDescriedBy() {
+        const helpMessage = this.template.querySelector('[data-helptext]');
+        return getRealDOMId(helpMessage);
+    }
 }