lightning-base-components 1.19.7-alpha → 1.19.8-alpha

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js

@@ -12,6 +12,9 @@ export default class LightningPrimitiveInputColor extends LightningElement {
     @api required;
     @api readOnly;
     @api label;
+    @api ariaKeyShortcuts;
+    @api ariaDisabled;
+    @api ariaRoleDescription;
 
     _checked = false;
     _disabled = false;

package/src/lightning/primitiveInputFile/primitiveInputFile.html

@@ -10,6 +10,9 @@
             <lightning-primitive-file-droppable-zone multiple={multiple} disabled={disabled}>
                 <input type="file" id="input-file"
                     aria-label={ariaLabel}
+                    aria-keyshortcuts={ariaKeyShortcuts}
+                    aria-disabled={ariaDisabled}
+                    aria-roledescription={ariaRoleDescription}
                     aria-invalid={ariaInvalid}
                     accesskey={accessKey}
                     class="slds-file-selector__input slds-assistive-text"

package/src/lightning/primitiveInputFile/primitiveInputFile.js

@@ -27,6 +27,9 @@ export default class LightningPrimitiveInputFile extends LightningElement {
     @api readOnly;
     @api required;
     @api ariaLabel;
+    @api ariaKeyShortcuts;
+    @api ariaDisabled;
+    @api ariaRoleDescription;
 
     @api
     get files() {

package/src/lightning/primitiveInputRadio/primitiveInputRadio.html

@@ -2,6 +2,9 @@
     <div class="slds-form-element__control">
         <span class="slds-radio">
             <input type="radio" id="radio"
+                aria-keyshortcuts={ariaKeyShortcuts}
+                aria-disabled={ariaDisabled}
+                aria-roledescription={ariaRoleDescription}
                 aria-invalid={ariaInvalid}
                 accesskey={accessKey}
                 onblur={handleBlur}

package/src/lightning/primitiveInputRadio/primitiveInputRadio.js

@@ -6,6 +6,9 @@ import { isNativeComponent } from 'lightning/utilsPrivate';
 export default class LightningPrimitiveInputRadio extends LightningElement {
     @api variant;
     @api ariaInvalid;
+    @api ariaKeyShortcuts;
+    @api ariaDisabled;
+    @api ariaRoleDescription;
     @api accessKey;
     @api name;
     @api required;

package/src/lightning/primitiveInputSimple/primitiveInputSimple.html

@@ -16,6 +16,11 @@
                 aria-haspopup={ariaHasPopup}
                 aria-invalid={ariaInvalid}
                 aria-label={ariaLabel}
+                aria-keyshortcuts={ariaKeyShortcuts}
+                aria-disabled={ariaDisabled}
+                aria-roledescription={ariaRoleDescription}
+                aria-autocomplete={ariaAutoComplete}
+                aria-expanded={ariaExpanded}
                 autocomplete={autocomplete}
                 class="slds-input"
                 disabled={disabled}
@@ -31,6 +36,7 @@
                 onfocus={handleFocus}
                 oninput={handleInput}
                 onkeydown={handleKeyDown}
+                role={role}
                 part="input"
                 pattern={pattern}
                 placeholder={placeholder}

package/src/lightning/primitiveInputSimple/primitiveInputSimple.js

@@ -80,6 +80,13 @@ export default class LightningPrimitiveInputSimple extends LightningElement {
     @api ariaInvalid;
     @api timezone;
 
+    @api ariaKeyShortcuts;
+    @api ariaDisabled;
+    @api ariaRoleDescription;
+    @api ariaExpanded;
+    @api ariaAutoComplete;
+    @api role;
+
     @api
     get ariaDescribedByElements() {
         return this.template.querySelector('[data-help-message]');
@@ -189,29 +196,10 @@ export default class LightningPrimitiveInputSimple extends LightningElement {
                 if (this._value !== previousValue) {
                     this.updateNumberValue(value);
                 }
-
-                // If updated value is invalid or not null, it should be updated
-                // Invalid numeric values should stay as-is to avoid programatically wiping a user-provided invalid
-                // value, such as '2e' from the input element. See @W-14121203
-                if (!badInput || !!value) {
-                    this.setInputValueIfNeeded();
-                }
-            } else {
-                this.setInputValueIfNeeded();
             }
         }
     }
 
-    setInputValueIfNeeded() {
-        // Again, due to the interop layer we need to check whether the value being set
-        // is different, otherwise we're duplicating the sets on the input, which result
-        // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
-        // character position re-set in IE11.
-        if (this.inputElement.value !== this.displayedValue) {
-            this.setInputValue(this.getDisplayedValue());
-        }
-    }
-
     @api
     get inputElement() {
         if (!this.cachedInputElement) {

package/src/lightning/primitiveInputToggle/primitiveInputToggle.html

@@ -11,6 +11,9 @@
                 part="checkbox"
                 accesskey={accessKey}
                 aria-label={ariaLabel}
+                aria-keyshortcuts={ariaKeyShortcuts}
+                aria-disabled={ariaDisabled}
+                aria-roledescription={ariaRoleDescription}
                 aria-invalid={ariaInvalid}
                 disabled={disabled}
                 name={name}
@@ -21,7 +24,7 @@
                 readonly={readOnly}
                 required={required}
             >
-            <span id="toggle-description" data-toggle-description  class="slds-checkbox_faux_container" aria-live="assertive">
+            <span id="toggle-description" data-toggle-description  class="slds-checkbox_faux_container">
                 <span class="slds-checkbox_faux" part="indicator"></span>
                 <span class="slds-checkbox_on">{messageToggleActive}</span>
                 <span class="slds-checkbox_off">{messageToggleInactive}</span>

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js

@@ -30,6 +30,9 @@ export default class LightningPrimitiveInputToggle extends LightningElement {
     @api readOnly;
     @api required;
     @api ariaInvalid;
+    @api ariaKeyShortcuts;
+    @api ariaDisabled;
+    @api ariaRoleDescription;
 
     /**
      * Text shown for the active state of a toggle. The default is "Active".

package/src/lightning/progressRing/progressRing.html

@@ -6,13 +6,10 @@
             aria-valuemin="0"
             aria-valuemax="100"
             aria-valuenow={value}
+            aria-label={computeAriaLabel}
         >
             <svg viewBox="-1 -1 2 2">
-                <path
-                    if:true={d}
-                    class="slds-progress-ring__path"
-                    d={d}
-                ></path>
+                <path if:true={d} class="slds-progress-ring__path" d={d}></path>
             </svg>
         </div>
         <div class="slds-progress-ring__content">
@@ -31,8 +28,13 @@
         </div>
         <div class="slds-progress-ring__progress-head">
             <svg viewBox="-1 -1 2 2">
-                <circle if:true={isProgressHeadVisible} class="slds-progress-ring__path" cx={progressHeadCenter.x} cy={progressHeadCenter.y} r="0.2">
-                </circle>
+                <circle
+                    if:true={isProgressHeadVisible}
+                    class="slds-progress-ring__path"
+                    cx={progressHeadCenter.x}
+                    cy={progressHeadCenter.y}
+                    r="0.2"
+                ></circle>
             </svg>
         </div>
     </div>

package/src/lightning/progressRing/progressRing.js

@@ -1,10 +1,13 @@
 import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
+import { isUndefinedOrNull } from 'lightning/utilsPrivate';
+import labelProgressRing from '@salesforce/label/LightningProgressRing.progressRing';
 import labelWarningAltText from '@salesforce/label/LightningProgressRing.warning';
 import labelExpiredAltText from '@salesforce/label/LightningProgressRing.expired';
 import labelCompleteAltText from '@salesforce/label/LightningProgressRing.complete';
 
 const i18n = {
+    progress: labelProgressRing,
     warning: labelWarningAltText,
     expired: labelExpiredAltText,
     complete: labelCompleteAltText,
@@ -48,6 +51,12 @@ export default class progressRing extends LightningElement {
      */
     @api direction = 'fill';
 
+    /**
+     * Descriptive label provided for assistive technologies.
+     * @type {string}
+     */
+    @api ariaLabel;
+
     /**
      * The size of the progress ring. Valid values include medium and large.
      *
@@ -213,4 +222,10 @@ export default class progressRing extends LightningElement {
             this.variant === 'base-autocomplete' && Number(this.value) === 100
         );
     }
+
+    get computeAriaLabel() {
+        return isUndefinedOrNull(this.ariaLabel)
+            ? i18n.progress
+            : this.ariaLabel;
+    }
 }

package/src/lightning/tabBar/tabBar.html

@@ -49,7 +49,11 @@
                     onselect={handleOverflowSelect}
                     icon-name="utility:chevrondown"
                     label={i18n.more}
-                    menu-alignment="right">
+                    menu-alignment="right"
+                    onfocus={reflectOverflowFocusState}
+                    onblur={reflectOverflowFocusState}
+                    >
+
                     <template for:each={_allTabs} for:item="tab">
                         <template if:false={tab.visible}>
                             <lightning-menu-item key={tab.value} label={tab.label} value={tab.value} data-target-selection-name={tab.targetSelectionName}></lightning-menu-item>

package/src/lightning/tabBar/tabBar.js

@@ -70,6 +70,12 @@ export default class LightningTabBar extends LightningElement {
         }
     }
 
+    overflowFocused = false;
+
+    reflectOverflowFocusState(e) {
+        this.overflowFocused = e.type === 'focus';
+    }
+
     @api
     get variant() {
         return this._variant;
@@ -329,22 +335,32 @@ export default class LightningTabBar extends LightningElement {
     handleKeyDown(event) {
         let currentFocusedIndex = 0;
 
-        if (this._selectedTab) {
+        if (this._hasOverflow && this.overflowFocused) {
+            currentFocusedIndex = this._visibleTabs.length;
+        } else {
             currentFocusedIndex = this._visibleTabs.findIndex(
-                (tab) => tab.value === this._selectedTab.value
+                (tab) => tab.value === this._selectedTab?.value
             );
         }
         handleKeyDownOnTabList(event, currentFocusedIndex, {
             isVerticalOrientation: () => this.isVerticalVariant,
-            totalTabs: () => this._visibleTabs.length,
+            // add + 1 to account for the "more" tab
+            totalTabs: () =>
+                this._visibleTabs.length + (this._hasOverflow ? 1 : 0),
             selectTabIndex: (index) => {
                 const tab = this._visibleTabs[index];
-                this._selectTabAndFireSelectEvent(tab.value, {
-                    hasFocus: true,
-                });
-                this.template
-                    .querySelector(`a[data-tab-value="${tab.value}"]`)
-                    .focus();
+                if (index === this._visibleTabs.length) {
+                    this.template
+                        .querySelector('lightning-button-menu')
+                        .focus();
+                } else {
+                    this._selectTabAndFireSelectEvent(tab.value, {
+                        hasFocus: true,
+                    });
+                    this.template
+                        .querySelector(`a[data-tab-value="${tab.value}"]`)
+                        .focus();
+                }
             },
         });
     }

package/src/lightning/utils/classSet.js

@@ -1,33 +1,33 @@
-const classNamesHash = (classes) => {
-    return typeof classes === 'string'
-        ? classes
-              .trim()
-              .split(/\s+/)
-              .reduce((acc, cn) => {
-                  acc[cn] = true;
-                  return acc;
-              }, {})
-        : classes;
-};
+import { classSetToString } from 'lightning/utilsPrivate';
+
+function classNamesHash(hash, classes) {
+    if (typeof classes === 'string') {
+        const array = classes.trim().split(/\s+/);
+        for (let i = 0, { length } = array; i < length; i += 1) {
+            hash[array[i]] = true;
+        }
+        return hash;
+    }
+    return Object.assign(hash, classes);
+}
 
 const proto = {
     add(className) {
-        Object.assign(this, classNamesHash(className));
-        return this;
+        return classNamesHash(this, className);
     },
     invert() {
-        Object.keys(this).forEach((key) => {
+        const keys = Object.keys(this);
+        for (let i = 0, { length } = keys; i < length; i += 1) {
+            const key = keys[i];
             this[key] = !this[key];
-        });
+        }
         return this;
     },
     toString() {
-        return Object.keys(this)
-            .filter((key) => this[key])
-            .join(' ');
+        return classSetToString(this);
     },
 };
 
 export function classSet(config) {
-    return Object.assign(Object.create(proto), classNamesHash(config));
+    return classNamesHash({ __proto__: proto }, config);
 }

package/src/lightning/utilsPrivate/aria.js

@@ -65,28 +65,31 @@ const ARIA_PROP_LIST = [
  * @returns {Object} A lookup object for ARIA properties in (modified) kebab-case or camel-case
  */
 const getAriaLookup = (list, type = 'default') => {
-    if (!list || list.length === 0) {
+    const length = list ? list.length : 0;
+    if (length === 0) {
         throw new Error('List of aria properties is required');
     }
     const lookupObj = {};
     if (type === 'default') {
-        list.forEach((name) => {
+        for (let i = 0; i < length; i += 1) {
+            const name = list[i];
             const nameUpperCase = name.toUpperCase();
             if (!lookupObj[nameUpperCase]) {
                 lookupObj[nameUpperCase] = `aria-${name.toLowerCase()}`;
             }
-        });
+        }
         return lookupObj;
     }
-    list.forEach((name) => {
+    for (let i = 0; i < length; i += 1) {
+        const name = list[i];
         const ariaPropertyLowerCase = `aria-${name.toLowerCase()}`;
-        const ariaPropertyCamelCase = `aria${name
-            .charAt(0)
-            .toUpperCase()}${name.slice(1)}`;
         if (!lookupObj[ariaPropertyLowerCase]) {
+            const ariaPropertyCamelCase = `aria${name[0].toUpperCase()}${name.slice(
+                1
+            )}`;
             lookupObj[ariaPropertyLowerCase] = ariaPropertyCamelCase;
         }
-    });
+    }
     return lookupObj;
 };
 

package/src/lightning/utilsPrivate/classListMutation.js

@@ -1,11 +1,13 @@
 export function classListMutation(classList, config) {
-    Object.keys(config).forEach((key) => {
-        if (typeof key === 'string' && key.length) {
+    const keys = Object.keys(config);
+    for (let i = 0, { length } = keys[i]; i < length; i += 1) {
+        const key = keys[i];
+        if (typeof key === 'string' && key.length > 0) {
             if (config[key]) {
                 classList.add(key);
             } else {
                 classList.remove(key);
             }
         }
-    });
+    }
 }

package/src/lightning/utilsPrivate/classSet.js

@@ -0,0 +1,11 @@
+export function classSetToString(classes) {
+    let string = '';
+    const keys = Object.keys(classes);
+    for (let i = 0, { length } = keys; i < length; i += 1) {
+        const key = keys[i];
+        if (classes[key]) {
+            string += (string.length ? ' ' : '') + key;
+        }
+    }
+    return string;
+}

package/src/lightning/utilsPrivate/eventEmitter.js

@@ -43,15 +43,15 @@ export class EventEmitter {
     @return {Boolean} - Returns `true` if the event had listeners, `false` otherwise
     **/
     emit(name) {
-        const args = Array.prototype.slice.call(arguments, 1);
         const listeners = this.registry[name];
         let count = 0;
 
         if (listeners) {
-            listeners.forEach((listener) => {
+            const args = Array.prototype.slice.call(arguments, 1);
+            for (let i = 0, { length } = listeners; i < length; i += 1) {
                 count += 1;
-                listener.apply(null, args);
-            });
+                listeners[i].apply(null, args);
+            }
         }
         return count > 0;
     }

package/src/lightning/utilsPrivate/inert.js

@@ -48,9 +48,11 @@ export function makeEverythingExceptElementInert(blockingElement) {
 }
 
 export function restoreInertness(savedInertElements) {
-    savedInertElements.forEach((element) => {
-        if (element.node) {
-            element.node.ariaHidden = element.ariaHidden;
+    for (let i = 0, { length } = savedInertElements; i < length; i += 1) {
+        const element = savedInertElements[i];
+        const { node } = element;
+        if (node) {
+            node.ariaHidden = element.ariaHidden;
         }
-    });
+    }
 }

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -18,6 +18,7 @@ export {
 export { deepCopy, arraysEqual, ArraySlice } from './utility';
 export { guid } from './guid';
 export { classListMutation } from './classListMutation';
+export { classSetToString } from './classSet';
 export { makeEverythingExceptElementInert, restoreInertness } from './inert';
 export { hasAnimation } from './animation';
 export {
@@ -64,9 +65,10 @@ export function synchronizeAttrs(element, values) {
         return;
     }
     const attributes = Object.keys(values);
-    attributes.forEach((attribute) => {
-        smartSetAttribute(element, attribute, values[attribute]);
-    });
+    for (let i = 0, { length } = attributes; i < length; i += 1) {
+        const attr = attributes[i];
+        smartSetAttribute(element, attr, values[attr]);
+    }
 }
 
 /**
@@ -100,12 +102,10 @@ export function reflectAttribute(element, attrName, value) {
  * @returns {String} The DOM id or null
  */
 export function getRealDOMId(el) {
-    if (el && typeof el === 'string') {
-        return el;
-    } else if (el) {
-        return el.getAttribute('id');
+    if (typeof el === 'string') {
+        return el.length > 0 ? el : null;
     }
-    return null;
+    return typeof el === 'object' && el !== null ? el.getAttribute('id') : null;
 }
 
 /**
@@ -281,3 +281,35 @@ export function isNativeComponent(cmp) {
 export function isDesktopBrowser() {
     return formFactor === 'Large';
 }
+
+const { hasOwn: ObjectHasOwn } = Object;
+const { hasOwnProperty: ObjectProtoHasOwnProperty } = Object.prototype;
+
+/**
+ * Determines if a given object has the specified key as a direct property.
+ *
+ * @param {Object} object The object to check
+ * @param {string} key The property key
+ * @returns {Boolean} Whether the given key is a direct property of the object.
+ */
+export const hasOwn =
+    typeof ObjectHasOwn === 'function'
+        ? ObjectHasOwn
+        : function hasOwn(object, key) {
+              return ObjectProtoHasOwnProperty.call(object, key);
+          };
+
+/**
+ * Determines if a given object has any direct properties.
+ *
+ * @param {Object} object The object to check
+ * @returns {Boolean} Whether the object has direct properties.
+ */
+export function hasOwnProperties(object) {
+    for (let key in object) {
+        if (hasOwn(object, key)) {
+            return true;
+        }
+    }
+    return false;
+}