lightning-base-components 1.13.9-alpha → 1.14.3-alpha

package/metadata/raptor.json

@@ -1352,6 +1352,7 @@
   "industriesCibApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesExplainabilityApi": {},
+  "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.13.9-alpha",
+    "version": "1.14.3-alpha",
     "engines": {
         "node": ">=12.18.3"
     },
@@ -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"
@@ -793,6 +805,10 @@
                 "name": "@salesforce/label/LightningLookup.recentObject",
                 "path": "scopedImports/@salesforce-label-LightningLookup.recentObject.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.recentItems",
+                "path": "scopedImports/@salesforce-label-LightningLookup.recentItems.js"
+            },
             {
                 "name": "@salesforce/label/LightningLookup.resultsListHeaderMobile",
                 "path": "scopedImports/@salesforce-label-LightningLookup.resultsListHeaderMobile.js"
@@ -857,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"

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-LightningLookup.recentItems.js

@@ -0,0 +1 @@
+export default 'Recent Items';

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

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

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/__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];
@@ -95,11 +56,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 +76,28 @@ function removeAriaRefWhenPossible(elm, attrName, computedIds) {
             newValues.push(newIds[i]);
         }
     }
-    smartSetAttribute(elm, attrName, newValues.join(' '));
+
+    synchronizeAttrs(elm, {
+        [attrName]: newValues.join(' '),
+    });
 }
 
-export class ContentMutation {
+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 = 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,24 +110,26 @@ export class ContentMutation {
         this.liveIds[refs] = liveId;
     }
 
-    link(innerSelector, attrName, ids, placeholderContainerSelector) {
-        let attrState = this.state[attrName];
+    connect({ targetSelector, attribute, id, ids }) {
+        ids = ids || id;
+
+        let attrState = this.state[attribute];
         if (attrState) {
-            // note: we don't support linking to a different innerSelector,
-            // attrName, or placeholderContainerSelector
+            // note: we don't support linking to a different targetSelector, attribute
             if (!this.isNative) {
-                const elm = this.template.querySelector(innerSelector);
+                const elm = this.template.querySelector(
+                    attrState.innerSelector
+                );
                 if (elm) {
                     // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attrName, attrState.ids);
+                    removeAriaRefWhenPossible(elm, attribute, attrState.ids);
                 }
                 attrState.ids = ids;
             }
         } else {
-            attrState = this.state[attrName] = {
+            attrState = this.state[attribute] = {
                 ids,
-                innerSelector,
-                placeholderContainerSelector,
+                innerSelector: targetSelector,
             };
         }
         if (this.isNative) {
@@ -167,11 +138,15 @@ export class ContentMutation {
                 .split(/\s+/)
                 .map((ref) => `#${ref}`)
                 .join(',');
-            attrState.placeholder = document.createElement('span');
-            attrState.placeholder.id = `auto-link-${attrName}-${this.guid}`;
+
+            // 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(attrName);
+            this.privateUpdate(attribute);
         }
     }
 
@@ -238,12 +213,9 @@ export class ContentMutation {
         }
         let computedIds;
         if (this.isNative) {
-            const {
-                outerSelector,
-                content,
-                placeholder,
-                placeholderContainerSelector,
-            } = this.state[attrName];
+            const { outerSelector, content, placeholder } =
+                this.state[attrName];
+
             const newContent = extractContent(
                 extractElements(this.root, outerSelector)
             );
@@ -252,13 +224,14 @@ export class ContentMutation {
                     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/baseCombobox/baseCombobox.html

@@ -46,6 +46,7 @@
                     name={name}
                     data-value={computedInputValue}
                     disabled={disabled}
+                    aria-label={computedButtonTriggerAriaLabel}
                     onfocus={handleFocus}
                     onkeydown={handleInputKeyDown}
                     onblur={handleBlur}>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -328,7 +328,9 @@ export default class LightningBaseCombobox extends LightningElement {
             [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
             [ARIA_ACTIVEDESCENDANT]: this._activeElementDomId,
             [ARIA_CONTROLS]: this.computedInputControls,
-            [ARIA_LABEL]: this.inputLabel,
+            [ARIA_LABEL]: this.isUserInputDisabled
+                ? this.computedButtonTriggerAriaLabel
+                : this.inputLabel,
         });
     }
 
@@ -441,6 +443,17 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.hasInputPill ? this.inputPill.label : this.inputText;
     }
 
+    get computedButtonTriggerAriaLabel() {
+        const label = this.inputLabel;
+        const value = this.computedInputValue || this.computedPlaceholder;
+
+        if (!label) {
+            return value;
+        }
+
+        return `${label}, ${value}`;
+    }
+
     handleListboxScroll(event) {
         // We don't want this to bubble up to the modal which due to event retargeting wouldn't be able
         // to know what is actually being scrolled and thus may lead to the scrolling of the modal

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);
+    }
 }

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -8,6 +8,7 @@ import labelHexLabel from '@salesforce/label/LightningColorPicker.hexLabel';
 import labelHueInput from '@salesforce/label/LightningColorPicker.hueInput';
 import labelRInput from '@salesforce/label/LightningColorPicker.rInput';
 import labelRedAbbr from '@salesforce/label/LightningColorPicker.redAbbr';
+import formFactorPropertyName from '@salesforce/client/formFactor';
 import { LightningElement, api, track } from 'lwc';
 import { keyCodes } from 'lightning/utilsPrivate';
 import { generateUniqueId, getErrorMessage } from 'lightning/inputUtils';
@@ -58,7 +59,25 @@ export default class LightningColorPickerCustom extends LightningElement {
         if (!this._initialized) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
-                this.focus();
+                // (*1*)
+                if (formFactorPropertyName !== 'Large') {
+                    /**
+                     * We need to wait for one more animation frame and invoke .focus()
+                     * in iOS. This is because the positionLibray.js initially sets the position
+                     * of this color-picker element to "top: 0px" and then later repositions it asynchronously
+                     * it the next animation frames. The first (*1*) rAF callback is fired between
+                     * setting "top: 0px" and then later repositioning it. Calling .focus() in this callback
+                     * triggers a re-paint step and the page is scrolled to the top due to "top: 0px" being
+                     * present in the styles. To avoid this, we can delay the next re-paint after color-picker
+                     * is repositioned correctly by positionLibrary.js. Hence we wait for next animation frame
+                     * and then call .focus() to trigger the next re-paint after the color-picker is repositioned correctly
+                     * which was initially positioned with "top: 0px" by positionLibrary.js
+                     */
+                    // eslint-disable-next-line @lwc/lwc/no-async-operation
+                    requestAnimationFrame(() => this.focus());
+                } else {
+                    this.focus();
+                }
             });
             this.gradient();
             this.handleUpdateAnchor();