lightning-base-components 1.19.6-alpha → 1.19.8-alpha

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.js

@@ -31,12 +31,18 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
 
     get showError() {
         const { error } = this;
-        return error && (error.title || error.messages);
+        if (error && (error.title || error.messages)) {
+            return true;
+        }
+        return false;
     }
 
     get showErrorBubble() {
         const { error } = this;
-        return error && error.showBubble;
+        if (error && error.showBubble) {
+            return true;
+        }
+        return false;
     }
 
     get bubbleOffset() {

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -7,13 +7,18 @@ import labelSortDesc from '@salesforce/label/LightningDatatable.sortDesc';
 import labelSortNone from '@salesforce/label/LightningDatatable.sortNone';
 import PrimitiveDatatableCell from 'lightning/primitiveDatatableCell';
 import { api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
-import { classListMutation, isRTL, getRealDOMId } from 'lightning/utilsPrivate';
+import {
+    classListMutation,
+    classSetToString,
+    getRealDOMId,
+} from 'lightning/utilsPrivate';
 
 import selectable from './selectableHeader.html';
 import sortable from './sortableHeader.html';
 import nonsortable from './nonsortableHeader.html';
 
+const SELECTABLE_HEADER_TYPE = 'SELECTABLE_CHECKBOX';
+
 const i18n = {
     chooseARow: labelChooseARow,
     chooseARowSelectAll: labelChooseARowSelectAll,
@@ -158,14 +163,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {string} The computed inline styles
      */
     get columnStyles() {
-        const outlineStyle = this.isSortable ? '' : 'outline:none;';
+        const { columnWidth } = this;
+        const outlineStyle = this._sortable ? '' : 'outline:none;';
 
         // In RTL, we need to explicitly position the column headers.
         // We do this by setting the offset (in pixels) from the start of the table.
-        const offsetStyle = isRTL() ? `right: ${this.def.offset}px;` : '';
-        const widthStyle = this.columnWidth
-            ? `width: ${this.columnWidth}px;`
-            : '';
+        const offsetStyle =
+            document.dir === 'rtl' ? `right: ${this._def.offset}px;` : '';
+        const widthStyle = columnWidth ? `width: ${columnWidth}px;` : '';
         const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
 
         return `
@@ -176,27 +181,20 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         `;
     }
 
-    /**
-     * Get th Action styles
-     *
-     * @return {string} The computed classes
-     */
-    get thActionStyles() {
-        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
-        return `
-            ${heightStyle}
-        `;
-    }
-
     /**
      * Computes the classes for the column
      *
      * @return {string} The computed classes
      */
     get computedClass() {
-        return classSet('slds-cell-fixed')
-            .add({ 'slds-has-button-menu': this.hasActions })
-            .toString();
+        const { actions } = this;
+        return classSetToString({
+            'slds-cell-fixed': true,
+            'slds-has-button-menu':
+                // inline hasActions
+                actions.customerActions.length > 0 ||
+                actions.internalActions.length > 0,
+        });
     }
 
     /**
@@ -205,11 +203,13 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {string} The computed sort classes
      */
     get computedSortClass() {
-        return classSet('slds-th__action slds-text-link_reset')
-            .add({ 'slds-is-sorted': this.sorted })
-            .add({ 'slds-is-sorted_asc': this.isAscSorted })
-            .add({ 'slds-is-sorted_desc': this.isDescSorted })
-            .toString();
+        const { sortedDirection } = this;
+        return classSetToString({
+            'slds-th__action slds-text-link_reset': true,
+            'slds-is-sorted': this.sorted,
+            'slds-is-sorted_asc': sortedDirection === 'asc',
+            'slds-is-sorted_desc': sortedDirection === 'desc',
+        });
     }
 
     /**
@@ -236,9 +236,10 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {boolean} Whether the header has available actions
      */
     get hasActions() {
+        const { actions } = this;
         return (
-            this.actions.customerActions.length > 0 ||
-            this.actions.internalActions.length > 0
+            actions.customerActions.length > 0 ||
+            actions.internalActions.length > 0
         );
     }
 
@@ -259,25 +260,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {string|boolean} The aria role for the header
      */
     get headerRole() {
-        return this.isResizable || this.sortable ? 'button' : false;
-    }
-
-    /**
-     * Determines if sort direction is set to ascending
-     *
-     * @return {boolean} Whether the sort direction is ascending
-     */
-    get isAscSorted() {
-        return this.sortedDirection === 'asc';
-    }
-
-    /**
-     * Determines if sort direction is set to descending
-     *
-     * @return {boolean} Whether the sort direction is descending
-     */
-    get isDescSorted() {
-        return this.sortedDirection === 'desc';
+        if (
+            this._sortable ||
+            // inline isResizable
+            (this._resizable && this._def.resizable !== false)
+        ) {
+            return 'button';
+        }
+        return false;
     }
 
     /**
@@ -286,7 +276,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {boolean} Whether the header is regular
      */
     get isRegularHeader() {
-        return this.def.type !== 'SELECTABLE_CHECKBOX';
+        return this._def.type !== SELECTABLE_HEADER_TYPE;
     }
 
     /**
@@ -295,25 +285,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * @return {boolean} Whether the header is resizable
      */
     get isResizable() {
-        return this.resizable && this.def.resizable !== false;
-    }
-
-    /**
-     * Determines if the header is selectable
-     *
-     * @return {boolean} Whether the header is selectable
-     */
-    get isSelectableHeader() {
-        return this.def.type === 'SELECTABLE_CHECKBOX';
-    }
-
-    /**
-     * Determines if the header is sortable
-     *
-     * @return {boolean} Whether the header is sortable
-     */
-    get isSortable() {
-        return this.sortable;
+        return this._resizable && this._def.resizable !== false;
     }
 
     /**
@@ -356,29 +328,28 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * By default, nonsortableHeader.html is rendered
      */
     render() {
-        if (this.isSelectableHeader) {
+        if (this._def.type === SELECTABLE_HEADER_TYPE) {
             return selectable;
-        } else if (this.sortable) {
+        } else if (this._sortable) {
             return sortable;
         }
         return nonsortable;
     }
 
     renderedCallback() {
-        if (this.isSelectableHeader && this.showCheckbox) {
-            this.updateBulkSelectionCheckbox();
-        }
-        if (this.isSelectableHeader) {
-            const columnHeaderId = this.computedColumnHeaderId;
+        if (this._def.type === SELECTABLE_HEADER_TYPE) {
+            if (this.showCheckbox) {
+                this.updateBulkSelectionCheckbox();
+            }
             const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
-                detail: columnHeaderId,
+                detail: this.computedColumnHeaderId,
             });
             this.dispatchEvent(columnHeaderEvent);
         }
     }
 
     disconnectedCallback() {
-        if (this.isSelectableHeader) {
+        if (this._def.type === SELECTABLE_HEADER_TYPE) {
             const columnHeaderEvent = new CustomEvent('privatecolumnheaderid', {
                 detail: null,
             });
@@ -396,7 +367,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     handleSortingClick(event) {
         event.preventDefault();
 
-        if (this.isSortable) {
+        if (this._sortable) {
             event.stopPropagation();
             this.fireSortedColumn();
             this.fireCellFocusByClickEvent();
@@ -411,7 +382,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     handleSelectAllRows() {
         const { rowKeyValue, colKeyValue } = this;
         const actionName =
-            this.def.bulkSelection === 'none'
+            this._def.bulkSelection === 'none'
                 ? 'selectallrows'
                 : 'deselectallrows';
         // eslint-disable-next-line lightning-global/no-custom-event-identifier-arguments
@@ -432,12 +403,13 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * the details of the sort action
      */
     fireSortedColumn() {
+        const { columnKey, fieldName } = this._def;
         const event = new CustomEvent('privateupdatecolsort', {
             bubbles: true,
             composed: true,
             detail: {
-                fieldName: this.def.fieldName,
-                columnKey: this.def.columnKey,
+                columnKey,
+                fieldName,
                 sortDirection: this.getTargetSortDirection(),
             },
         });
@@ -452,9 +424,11 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     updateElementClasses() {
         classListMutation(this.classList, {
-            'slds-is-sortable': this.isSortable,
-            'slds-is-resizable': this.isResizable,
-            'slds-assistive-text': this.hideHeader,
+            'slds-is-sortable': this._sortable,
+            // inline isResizable
+            'slds-is-resizable':
+                this._resizable && this._def.resizable !== false,
+            'slds-assistive-text': this._hideHeader,
         });
     }
 
@@ -474,13 +448,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * Determines the state of the header "all" checkbox based on current selections
      */
     updateBulkSelectionCheckbox() {
+        const { bulkSelection } = this._def;
         const allCheckbox = this.template.querySelector(
             '.datatable-select-all'
         );
-        allCheckbox.indeterminate = this.def.bulkSelection === 'some';
+        allCheckbox.indeterminate = bulkSelection === 'some';
 
         // Note: since we have to handle the indeterminate state,
-        //       this is to remove a raptor warning `Unneccessary update of property "checked"`
-        allCheckbox.checked = !(this.def.bulkSelection === 'none');
+        //       this is to remove a raptor warning `Unnecessary update of property "checked"`
+        allCheckbox.checked = !(bulkSelection === 'none');
     }
 }

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.html

@@ -20,6 +20,9 @@
                 part="checkbox"
                 id="checkbox"
                 aria-label={ariaLabel}
+                aria-keyshortcuts={ariaKeyShortcuts}
+                aria-disabled={ariaDisabled}
+                aria-roledescription={ariaRoleDescription}
                 aria-invalid={ariaInvalid}
                 accesskey={accessKey}
                 onblur={handleBlur}

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js

@@ -18,6 +18,9 @@ export default class LightningPrimitiveInputCheckbox extends LightningElement {
     @api name;
     @api disabled;
     @api variant;
+    @api ariaKeyShortcuts;
+    @api ariaDisabled;
+    @api ariaRoleDescription;
 
     @api
     get checked() {

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.html

@@ -2,6 +2,9 @@
     <div class="slds-checkbox_add-button" part="input-checkbox-button">
         <input type="checkbox" id="checkbox-button"
             aria-label={ariaLabel}
+            aria-keyshortcuts={ariaKeyShortcuts}
+            aria-disabled={ariaDisabled}
+            aria-roledescription={ariaRoleDescription}
             aria-invalid={ariaInvalid}
             accesskey={accessKey}
             class="slds-assistive-text"

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