lightning-base-components 1.18.1-alpha → 1.18.2-alpha

package/src/lightning/baseCombobox/baseCombobox.css

@@ -1,3 +1,7 @@
+@import 'lightning/sldsCommon';
+@import './base-combobox.slds.css';
+@import './spinner.slds.css';
+
 .slds-inline-logo {
     height: 1rem;
     margin-top: 1rem;
@@ -5,6 +9,12 @@
 }
 
 /* This is hiding the caret of the input for the read-only combobox, should be moved to SLDS. */
-input[aria-readonly="true"] {
+input[aria-readonly='true'] {
     caret-color: transparent;
 }
+
+/* TODO: This is a temporary fix to prevent a bug with sldsCommon.css bleeding into synthetic */
+button:disabled,
+[type='button']:disabled {
+    cursor: not-allowed;
+}

package/src/lightning/baseCombobox/baseCombobox.html

@@ -1,161 +1,169 @@
 <template>
-    <div class={computedDropdownTriggerClass}
-        onclick={handleTriggerClick}>
-        <div class={computedFormElementClass} role="none">
-            <template if:true={hasInputPill}>
-                <lightning-icon icon-name={inputPill.iconName} alternative-text={inputPill.iconAlternativeText} size="x-small" class="slds-icon_container slds-combobox__input-entity-icon"></lightning-icon>
-            </template>
-            <!--
-                'required' on the input may present hints from the browser when within a form that doesn't have novalidate set,
-                specifically it may be problematic for cases when a selection has already been made say via pills and then the validation hint
-                is no longer correct/relevant
-            -->
-            <template if:false={isUserInputDisabled}>
-                <input id="combobox-input"
-                    class={computedInputClass}
-                    type="text"
-                    role="combobox"
-                    aria-expanded={computedAriaExpanded}
-                    aria-haspopup="listbox"
-                    required={required}
-                    readonly={_inputAriaReadOnly}
-                    autocomplete={autocomplete}
-                    value={computedInputValue}
-                    data-value={computedInputValue}
-                    name={name}
-                    placeholder={computedPlaceholder}
-                    maxlength={inputMaxlength}
-                    disabled={disabled}
-                    aria-readonly={_inputAriaReadOnly}
-                    aria-autocomplete={computedAriaAutocomplete}
-                    aria-owns="dropdown-element"
-                    aria-label={inputLabel}
-                    onfocus={handleFocus}
-                    onselect={handleInputSelect}
-                    onchange={handleTextChange}
-                    oninput={handleInput}
-                    onkeydown={handleInputKeyDown}
-                    onblur={handleBlur}>
-            </template>
-            <template if:true={isUserInputDisabled}>
-                <button id="combobox-button"
-                    type="button"
-                    class={computedInputClass}
-                    aria-expanded={computedAriaExpanded}
-                    aria-haspopup="listbox"
-                    name={name}
-                    role="combobox"
-                    data-value={computedInputValue}
-                    disabled={disabled}
-                    aria-label={computedButtonTriggerAriaLabel}
-                    aria-required={required}
-                    onfocus={handleFocus}
-                    onkeydown={handleInputKeyDown}
-                    onblur={handleBlur}>
-                    <span class="slds-truncate">
-                        <template if:true={computedInputValue}>
-                            {computedInputValue}
-                        </template>
-                        <template if:false={computedInputValue}>
-                            {computedPlaceholder}
-                        </template>
-                    </span>
-                </button>
-            </template>
-            <template if:true={isCloseVisible}>
-                <div class="slds-input__icon-group slds-input__icon-group_right">
-                    <button onclick={handlePillRemove} type="button"
-                        class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"
-                        title={i18n.pillCloseButtonAlternativeText}>
-                        <lightning-primitive-icon icon-name="utility:close" variant="bare" svg-class="slds-button__icon"></lightning-primitive-icon>
-                        <span class="slds-assistive-text">{i18n.pillCloseButtonAlternativeText}</span>
-                    </button>
-                </div>
-            </template>
-            <template if:false={hasInputPill}>
-                <div class="slds-input__icon-group slds-input__icon-group_right">
-                    <template if:true={showInputActivityIndicator}>
-                        <div class="slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner">
-                            <span class="slds-assistive-text">{i18n.loadingText}</span>
-                            <div class="slds-spinner__dot-a"></div>
-                            <div class="slds-spinner__dot-b"></div>
+    <div class="slds-combobox_container">
+        <div class={computedDropdownTriggerClass}
+            onclick={handleTriggerClick}>
+            <div class={computedFormElementClass} role="none">
+                <template if:true={hasInputPill}>
+                    <lightning-icon icon-name={inputPill.iconName} alternative-text={inputPill.iconAlternativeText} size="x-small" class="slds-icon_container slds-combobox__input-entity-icon"></lightning-icon>
+                </template>
+                <!--
+                    'required' on the input may present hints from the browser when within a form that doesn't have novalidate set,
+                    specifically it may be problematic for cases when a selection has already been made say via pills and then the validation hint
+                    is no longer correct/relevant
+                -->
+                <template if:false={isUserInputDisabled}>
+                    <div part="input-text">
+                        <div part="input-container">
+                            <input id="combobox-input"
+                                class={computedInputClass}
+                                type="text"
+                                role="combobox"
+                                aria-expanded={computedAriaExpanded}
+                                aria-haspopup="listbox"
+                                required={required}
+                                readonly={_inputAriaReadOnly}
+                                autocomplete={autocomplete}
+                                value={computedInputValue}
+                                data-value={computedInputValue}
+                                name={name}
+                                placeholder={computedPlaceholder}
+                                maxlength={inputMaxlength}
+                                disabled={disabled}
+                                aria-readonly={_inputAriaReadOnly}
+                                aria-autocomplete={computedAriaAutocomplete}
+                                aria-owns="dropdown-element"
+                                aria-label={inputLabel}
+                                onfocus={handleFocus}
+                                onselect={handleInputSelect}
+                                onchange={handleTextChange}
+                                oninput={handleInput}
+                                onkeydown={handleInputKeyDown}
+                                onblur={handleBlur}
+                                part="input">
                         </div>
-                    </template>
-                    <template if:true={inputIconName}>
-                        <lightning-icon alternative-text={inputIconAlternativeText} icon-name={inputIconName} size={inputIconSize} class="slds-input__icon slds-input__icon_right"></lightning-icon>
-                    </template>
-                </div>
-            </template>
-        </div>
-
-        <div id="dropdown-element"
-            data-dropdown-element
-            class={computedDropdownClass}
-            role="listbox"
-            onscroll={handleListboxScroll}
-            onmousedown={handleDropdownMouseDown}
-            onmouseup={handleDropdownMouseUp}
-            onmouseleave={handleDropdownMouseLeave}
-            onclick={handleOptionClick}
-            >
-            <template if:true={_hasDropdownOpened}>
-                <template for:each={_items} for:item="item">
-                    <template if:false={item.items}>
-                        <lightning-base-combobox-item
-                            role="option"
-                            item={item}
-                            id={item.id}
-                            data-item-id={item.id}
-                            aria-checked={item.checked}
-                            key={item.value}
-                            data-value={item.value}
-                            onmouseenter={handleOptionMouseEnter}
-                            class="slds-media slds-listbox__option slds-media_center">
-                        </lightning-base-combobox-item>
-                    </template>
-                    <template if:true={item.items}>
-                        <ul role="group" aria-label={item.label} key={item.label}>
-                            <template if:true={item.label}>
-                                <li role="presentation" class="slds-listbox__item">
-                                    <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
-                                        <h3 role="presentation" title={item.label}>{item.label}</h3>
-                                    </div>
-                                </li>
+                    </div>
+                </template>
+                <template if:true={isUserInputDisabled}>
+                    <button id="combobox-button"
+                        type="button"
+                        class={computedInputClass}
+                        aria-expanded={computedAriaExpanded}
+                        aria-haspopup="listbox"
+                        name={name}
+                        role="combobox"
+                        data-value={computedInputValue}
+                        disabled={disabled}
+                        aria-label={computedButtonTriggerAriaLabel}
+                        aria-required={required}
+                        onfocus={handleFocus}
+                        onkeydown={handleInputKeyDown}
+                        onblur={handleBlur}>
+                        <span class="slds-truncate">
+                            <template if:true={computedInputValue}>
+                                {computedInputValue}
                             </template>
-                            <template for:each={item.items} for:item="groupItem">
-                                <li role="presentation" class="slds-listbox__item" key={groupItem.value}>
-                                    <lightning-base-combobox-item
-                                        role="option"
-                                        item={groupItem}
-                                        id={groupItem.id}
-                                        data-item-id={groupItem.id}
-                                        aria-checked={groupItem.checked}
-                                        data-value={groupItem.value}
-                                        class="slds-media slds-listbox__option slds-media_center"
-                                        onmouseenter={handleOptionMouseEnter}>
-                                    </lightning-base-combobox-item>
-                                </li>
+                            <template if:false={computedInputValue}>
+                                {computedPlaceholder}
                             </template>
-                        </ul>
-                    </template>
+                        </span>
+                    </button>
+                </template>
+                <template if:true={isCloseVisible}>
+                    <div class="slds-input__icon-group slds-input__icon-group_right">
+                        <button onclick={handlePillRemove} type="button"
+                            class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"
+                            title={i18n.pillCloseButtonAlternativeText}>
+                            <lightning-primitive-icon icon-name="utility:close" variant="bare" svg-class="slds-button__icon"></lightning-primitive-icon>
+                            <span class="slds-assistive-text">{i18n.pillCloseButtonAlternativeText}</span>
+                        </button>
+                    </div>
                 </template>
-                <template if:true={showDropdownActivityIndicator}>
-                    <div role="presentation" class="slds-listbox__item">
-                        <div class="slds-align_absolute-center slds-p-top_medium">
-                            <div role="status" class="slds-spinner slds-spinner_x-small slds-spinner_inline">
+                <template if:false={hasInputPill}>
+                    <div class="slds-input__icon-group slds-input__icon-group_right">
+                        <template if:true={showInputActivityIndicator}>
+                            <div role="status" class="slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner">
                                 <span class="slds-assistive-text">{i18n.loadingText}</span>
                                 <div class="slds-spinner__dot-a"></div>
                                 <div class="slds-spinner__dot-b"></div>
                             </div>
-                        </div>
+                        </template>
+                        <template if:true={inputIconName}>
+                            <lightning-icon alternative-text={inputIconAlternativeText} icon-name={inputIconName} size={inputIconSize} class="slds-input__icon slds-input__icon_right"></lightning-icon>
+                        </template>
                     </div>
                 </template>
-                <template if:true={showAttribution}>
-                    <div class="slds-align_absolute-center">
-                        <img src={attributionLogoUrl} class="slds-inline-logo" alt={attributionLogoAssistiveText} title={attributionLogoAssistiveText}/>
-                    </div>
+            </div>
+
+            <div id="dropdown-element"
+                data-dropdown-element
+                class={computedDropdownClass}
+                role="listbox"
+                onscroll={handleListboxScroll}
+                onmousedown={handleDropdownMouseDown}
+                onmouseup={handleDropdownMouseUp}
+                onmouseleave={handleDropdownMouseLeave}
+                onclick={handleOptionClick}
+                part="dropdown overlay"
+                >
+                <template if:true={_hasDropdownOpened}>
+                    <template for:each={_items} for:item="item">
+                        <template if:false={item.items}>
+                            <lightning-base-combobox-item
+                                role="option"
+                                item={item}
+                                id={item.id}
+                                data-item-id={item.id}
+                                aria-checked={item.checked}
+                                key={item.value}
+                                data-value={item.value}
+                                onmouseenter={handleOptionMouseEnter}
+                                class="slds-media slds-listbox__option slds-media_center">
+                            </lightning-base-combobox-item>
+                        </template>
+                        <template if:true={item.items}>
+                            <ul role="group" aria-label={item.label} key={item.label}>
+                                <template if:true={item.label}>
+                                    <li role="presentation" class="slds-listbox__item">
+                                        <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
+                                            <h3 role="presentation" title={item.label}>{item.label}</h3>
+                                        </div>
+                                    </li>
+                                </template>
+                                <template for:each={item.items} for:item="groupItem">
+                                    <li role="presentation" class="slds-listbox__item" key={groupItem.value}>
+                                        <lightning-base-combobox-item
+                                            role="option"
+                                            item={groupItem}
+                                            id={groupItem.id}
+                                            data-item-id={groupItem.id}
+                                            aria-checked={groupItem.checked}
+                                            data-value={groupItem.value}
+                                            class="slds-media slds-listbox__option slds-media_center"
+                                            onmouseenter={handleOptionMouseEnter}>
+                                        </lightning-base-combobox-item>
+                                    </li>
+                                </template>
+                            </ul>
+                        </template>
+                    </template>
+                    <template if:true={showDropdownActivityIndicator}>
+                        <div role="presentation" class="slds-listbox__item">
+                            <div class="slds-align_absolute-center slds-p-top_medium">
+                                <div role="status" class="slds-spinner slds-spinner_x-small slds-spinner_inline">
+                                    <span class="slds-assistive-text">{i18n.loadingText}</span>
+                                    <div class="slds-spinner__dot-a"></div>
+                                    <div class="slds-spinner__dot-b"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template if:true={showAttribution}>
+                        <div class="slds-align_absolute-center">
+                            <img src={attributionLogoUrl} class="slds-inline-logo" alt={attributionLogoAssistiveText} title={attributionLogoAssistiveText}/>
+                        </div>
+                    </template>
                 </template>
-            </template>
+            </div>
         </div>
     </div>
 

package/src/lightning/baseCombobox/baseCombobox.js

@@ -3,22 +3,24 @@ import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.des
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
-import { api, LightningElement, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
 import { classSet } from 'lightning/utils';
 import {
     assert,
+    computeAriaInvalid,
     getRealDOMId,
-    normalizeAriaAttribute,
     normalizeBoolean,
     normalizeString,
+    reflectAttribute,
     synchronizeAttrs,
-    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { VARIANT } from 'lightning/inputUtils';
+import AriaObserver from 'lightning/ariaObserver';
 
 const i18n = {
     ariaSelectedOptions: labelAriaSelectedOptions,
@@ -30,6 +32,7 @@ const i18n = {
 
 const SMALL_MIN_HEIGHT = '2.25rem';
 const MEDIUM_MIN_HEIGHT = '6.75rem';
+const INPUT_ELEMENT_SELECTOR = '.slds-combobox__input';
 
 /**
  * Breakpoint when viewport height doesn't fit 10 items in the dropdown
@@ -44,7 +47,7 @@ const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
 const ARIA_INVALID = 'aria-invalid';
 
-export default class LightningBaseCombobox extends LightningElement {
+export default class LightningBaseCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     /**
@@ -100,6 +103,7 @@ export default class LightningBaseCombobox extends LightningElement {
     constructor() {
         super();
         this._events = new BaseComboboxEvents(this);
+        this.ariaObserver = new AriaObserver(this);
     }
 
     renderedCallback() {
@@ -111,10 +115,19 @@ export default class LightningBaseCombobox extends LightningElement {
                 },
             })
         );
+
+        if (this.isConnected) {
+            this.ariaObserver.sync();
+        }
+
         this.synchronizeA11y();
     }
 
     connectedCallback() {
+        super.connectedCallback();
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
         this.overrideDropdownAlignment();
         this.classList.add('slds-combobox_container');
         this._connected = true;
@@ -124,6 +137,10 @@ export default class LightningBaseCombobox extends LightningElement {
     disconnectedCallback() {
         this._connected = false;
         this._listBoxElementCache = undefined;
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
     }
 
     @api
@@ -142,7 +159,37 @@ export default class LightningBaseCombobox extends LightningElement {
 
     set inputControlsElement(el) {
         this._inputAriaControls = el;
-        this.synchronizeA11y();
+        this.connectAriaControls();
+    }
+
+    connectAriaControls() {
+        this.connectAriaAttribute({
+            attribute: ARIA_CONTROLS,
+            relatedNodeIds: this._inputAriaControls,
+            relatedNodes: this.dropdownElement,
+        });
+    }
+
+    connectAriaAttribute(params) {
+        const relatedNodeIds = Array.isArray(params.relatedNodeIds)
+            ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
+            : getRealDOMId(params.relatedNodeIds);
+
+        this.ariaObserver.connect({
+            ...params,
+            targetSelector: INPUT_ELEMENT_SELECTOR,
+            relatedNodeIds,
+        });
+    }
+
+    @api
+    get ariaErrorMessageElements() {
+        return this._ariaErrorMessageElements;
+    }
+
+    set ariaErrorMessageElements(elements) {
+        this._ariaErrorMessageElements = elements;
+        this.connectAriaDescribedByElements();
     }
 
     @api
@@ -151,13 +198,16 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     set inputDescribedByElements(elements) {
-        if (Array.isArray(elements)) {
-            this._inputDescribedBy = elements;
-        } else {
-            this._inputDescribedBy = [elements];
-        }
+        this._inputDescribedBy = elements;
+        this.connectAriaDescribedByElements();
+    }
 
-        this.synchronizeA11y();
+    connectAriaDescribedByElements() {
+        this.connectAriaAttribute({
+            attribute: ARIA_DESCRIBEDBY,
+            relatedNodeIds: this._inputDescribedBy,
+            relatedNodes: this.ariaErrorMessageElements,
+        });
     }
 
     @api
@@ -165,31 +215,28 @@ export default class LightningBaseCombobox extends LightningElement {
         return this._inputLabelledBy;
     }
 
-    set inputLabelledByElement(el) {
-        this._inputLabelledBy = el;
-        this.synchronizeA11y();
+    set inputLabelledByElement(element) {
+        this._inputLabelledBy = element;
+
+        this.connectAriaAttribute({
+            attribute: ARIA_LABELLEDBY,
+            relatedNodeIds: element,
+        });
     }
 
-    get inputLabelledById() {
-        return getRealDOMId(this._inputLabelledBy);
+    @api
+    get rootAriaNode() {
+        return this.ariaObserver.root;
     }
 
-    get inputAriaControlsId() {
-        return getRealDOMId(this._inputAriaControls);
+    set rootAriaNode(root) {
+        this.ariaObserver.root = root;
     }
 
     get inputId() {
         return getRealDOMId(this.inputElement);
     }
 
-    get computedAriaDescribedBy() {
-        const ariaValues = [];
-        this._inputDescribedBy.forEach((el) => {
-            ariaValues.push(getRealDOMId(el));
-        });
-        return normalizeAriaAttribute(ariaValues);
-    }
-
     @api
     get dropdownHeight() {
         return this._dropdownHeight;
@@ -228,7 +275,7 @@ export default class LightningBaseCombobox extends LightningElement {
 
     set disabled(value) {
         this._disabled = normalizeBoolean(value);
-
+        reflectAttribute(this, 'disabled', this._disabled);
         if (this._disabled && this._dropdownVisible) {
             this.closeDropdown();
         }
@@ -356,15 +403,16 @@ export default class LightningBaseCombobox extends LightningElement {
             return;
         }
         synchronizeAttrs(input, {
-            [ARIA_LABELLEDBY]: this.inputLabelledById,
-            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
-            [ARIA_CONTROLS]: this.computedInputControls,
             [ARIA_LABEL]: this.isUserInputDisabled
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
             [ARIA_ACTIVEDESCENDANT]: this.computedAriaActiveDescendant,
         });
+
+        if (this.isConnected) {
+            this.connectAriaControls();
+        }
     }
 
     itemId(index) {
@@ -525,20 +573,8 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.inputId;
     }
 
-    get computedUniqueDropdownElementId() {
-        return getRealDOMId(
-            this.template.querySelector('[data-dropdown-element]')
-        );
-    }
-
-    get computedInputControls() {
-        const ariaValues = [this.computedUniqueDropdownElementId];
-
-        if (this.inputControlsElement) {
-            ariaValues.push(this.inputAriaControlsId);
-        }
-
-        return normalizeAriaAttribute(ariaValues);
+    get dropdownElement() {
+        return this.template.querySelector('[data-dropdown-element]');
     }
 
     get i18n() {
@@ -883,7 +919,7 @@ export default class LightningBaseCombobox extends LightningElement {
     }
 
     get inputElement() {
-        return this.template.querySelector('.slds-combobox__input');
+        return this.template.querySelector(INPUT_ELEMENT_SELECTOR);
     }
 
     // remove-next-line-for-c-namespace
@@ -897,7 +933,7 @@ export default class LightningBaseCombobox extends LightningElement {
         }
 
         this._autoPosition.start({
-            target: () => this.inputElement,
+            target: () => this.template.querySelector("[part~='input-text']"),
             element: () => this.template.querySelector('div.slds-dropdown'),
             align: {
                 horizontal: Direction.Left,