lightning-base-components 1.16.9-alpha → 1.17.2-alpha

package/metadata/raptor.json

@@ -20,6 +20,9 @@
       "actions"
     ],
     "properties": [
+      {
+        "name": "headingLevel"
+      },
       {
         "name": "label"
       },
@@ -352,6 +355,9 @@
     "minVersion": "0.0",
     "slotNames": [],
     "properties": [
+      {
+        "name": "disabled"
+      },
       {
         "name": "groupOrder"
       },
@@ -398,9 +404,15 @@
       {
         "name": "headingLevel"
       },
+      {
+        "name": "hideHeader"
+      },
       {
         "name": "iconName"
       },
+      {
+        "name": "label"
+      },
       {
         "name": "variant"
       }
@@ -860,6 +872,7 @@
     "minVersion": "54.0"
   },
   "experienceModelApi": {},
+  "f6Controller": {},
   "fieldDependencyManager": {},
   "fieldUtils": {},
   "fileDownload": {
@@ -2339,19 +2352,7 @@
     "slotNames": [],
     "properties": [
       {
-        "name": "errorMessage"
-      },
-      {
-        "name": "fieldLevelHelp"
-      },
-      {
-        "name": "label"
-      },
-      {
-        "name": "required"
-      },
-      {
-        "name": "variant"
+        "name": "disabled"
       }
     ],
     "methods": [
@@ -3560,6 +3561,11 @@
       {
         "name": "variant"
       }
+    ],
+    "methods": [
+      {
+        "name": "focus"
+      }
     ]
   },
   "toastContainer": {
@@ -3588,6 +3594,9 @@
       {
         "name": "header"
       },
+      {
+        "name": "headingLevel"
+      },
       {
         "name": "items"
       },
@@ -3808,6 +3817,9 @@
       ""
     ],
     "properties": [
+      {
+        "name": "headingLevel"
+      },
       {
         "name": "label"
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.16.9-alpha",
+    "version": "1.17.2-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -910,6 +910,10 @@
                 "name": "@salesforce/label/LightningLookup.messageWhenMissingInformation",
                 "path": "scopedImports/@salesforce-label-LightningLookup.messageWhenMissingInformation.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.noAccess",
+                "path": "scopedImports/@salesforce-label-LightningLookup.noAccess.js"
+            },
             {
                 "name": "@salesforce/label/LightningPicklist.available",
                 "path": "scopedImports/@salesforce-label-LightningPicklist.available.js"
@@ -1067,16 +1071,8 @@
                 "path": "scopedImports/@salesforce-label-LightningToast.errorLabel.js"
             },
             {
-                "name": "@salesforce/label/LightningToast.missingToastLabel",
-                "path": "scopedImports/@salesforce-label-LightningToast.missingToastLabel.js"
-            },
-            {
-                "name": "@salesforce/label/LightningToastContainer.missingToastProperty",
-                "path": "scopedImports/@salesforce-label-LightningToastContainer.missingToastProperty.js"
-            },
-            {
-                "name": "@salesforce/label/LightningToastContainer.missingToastConfig",
-                "path": "scopedImports/@salesforce-label-LightningToastContainer.missingToastConfig.js"
+                "name": "@salesforce/label/LightningToast.close",
+                "path": "scopedImports/@salesforce-label-LightningToast.close.js"
             },
             {
                 "name": "@salesforce/label/Global_Entity.created_by",

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

@@ -1 +1 @@
-export default '240';
+export default '242';

package/scopedImports/@salesforce-label-LightningLookup.noAccess.js

@@ -0,0 +1 @@
+export default 'No access';

package/scopedImports/@salesforce-label-LightningToast.close.js

@@ -0,0 +1 @@
+export default 'Close';

package/src/lightning/accordionSection/accordionSection.html

@@ -1,7 +1,7 @@
 <template>
     <section class={computedSectionClasses}>
         <div class="slds-accordion__summary">
-            <h3 onkeydown={handleKeyDown} class="slds-accordion__summary-heading">
+            <h2 aria-level={_privateHeadingAriaLevel} onkeydown={handleKeyDown} class="slds-accordion__summary-heading">
                 <button class="section-control slds-button slds-button_reset slds-accordion__summary-action"
                         type="button"
                         aria-expanded={computedAriaExpanded}
@@ -14,7 +14,7 @@
                     </lightning-primitive-icon>
                     <span class="slds-accordion__summary-content" title={label}>{label}</span>
                 </button>
-            </h3>
+            </h2>
             <slot name="actions"></slot>
         </div>
         <div id='lgt-accordion-section' hidden={computedHidden} aria-hidden={computedAriaHidden} class="slds-accordion__content">

package/src/lightning/accordionSection/accordionSection.js

@@ -1,7 +1,7 @@
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
 import { generateUniqueId } from 'lightning/inputUtils';
-import { keyCodes } from 'lightning/utilsPrivate';
+import { keyCodes, isHeadingLevelValid } from 'lightning/utilsPrivate';
+import { classSet } from 'lightning/utils';
 
 /**
  * A single section that is nested in an accordion component.
@@ -30,6 +30,25 @@ export default class LightningAccordionSection extends LightningElement {
 
     @track privateIsOpen = false;
 
+    _privateHeadingAriaLevel;
+
+    /**
+     * Changes the 'aria-level' attribute value for the
+     * <h2> markup tag in the card's title element. Supported values
+     * are (1, 2, 3, 4, 5, 6).
+     * @type {string | number}
+     */
+    @api
+    get headingLevel() {
+        return this._privateHeadingAriaLevel;
+    }
+
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
+
     /**
      * Section should have received focus, but hasn't yet.
      */

package/src/lightning/baseCombobox/baseCombobox.html

@@ -75,7 +75,7 @@
             <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">
+                        <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>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -95,6 +95,7 @@ export default class LightningBaseCombobox extends LightningElement {
     _autocomplete = 'off';
     originDisableDefaultHighlight;
     privateDisableDefaultHighlight;
+    _editingMode = false;
 
     constructor() {
         super();
@@ -347,12 +348,14 @@ export default class LightningBaseCombobox extends LightningElement {
         synchronizeAttrs(input, {
             [ARIA_LABELLEDBY]: this.inputLabelledById,
             [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
-            [ARIA_ACTIVEDESCENDANT]: this._activeElementDomId,
             [ARIA_CONTROLS]: this.computedInputControls,
             [ARIA_LABEL]: this.isUserInputDisabled
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
+            [ARIA_ACTIVEDESCENDANT]: this._editingMode
+                ? undefined
+                : this._activeElementDomId,
         });
     }
 
@@ -605,6 +608,7 @@ export default class LightningBaseCombobox extends LightningElement {
 
     handleOptionMouseEnter(event) {
         if (event.target.hasAttribute('aria-selected')) {
+            this._editingMode = false;
             this.highlightOption(event.target);
         }
     }
@@ -662,6 +666,10 @@ export default class LightningBaseCombobox extends LightningElement {
         if (this.dropdownDisabled) {
             return;
         }
+        // For details: https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
+        if (event.isComposing || event.keyCode === 229) {
+            return;
+        }
         if (this.hasInputPill) {
             this.handlePillKeyDown(event);
         } else {
@@ -953,7 +961,7 @@ export default class LightningBaseCombobox extends LightningElement {
 
     highlightDefaultItem() {
         this.removeHighlight();
-        if (!this.privateDisableDefaultHighlight) {
+        if (!this.privateDisableDefaultHighlight && !this._editingMode) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
                 this.highlightOptionAndScrollIntoView(
@@ -1041,6 +1049,13 @@ export default class LightningBaseCombobox extends LightningElement {
             closeDropdown() {
                 that.closeDropdown();
             },
+            setEditingMode(isEditing) {
+                that._editingMode = isEditing;
+                if (isEditing) {
+                    that._activeElementDomId = null;
+                }
+                that.synchronizeA11y();
+            },
         };
     }
 

package/src/lightning/baseCombobox/keyboard.js

@@ -157,6 +157,31 @@ const eventKeyToHandlerMap = {
     Delete: handleDeletionKeys,
 };
 
+const NON_EDITING_KEYS = [
+    'Enter',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End',
+    'Down',
+    'Up',
+    'ArrowUp',
+    'ArrowDown',
+    'Esc',
+    'Escape',
+    'Tab',
+];
+const isAnEditingKey = (key) => {
+    return !NON_EDITING_KEYS.includes(key);
+};
+const handleEditingMode = ({ event, dropdownInterface }) => {
+    if (isAnEditingKey(event.key)) {
+        dropdownInterface.setEditingMode(true);
+    } else {
+        dropdownInterface.setEditingMode(false);
+    }
+};
+
 export function handleKeyDownOnInput({
     event,
     currentIndex,
@@ -168,4 +193,5 @@ export function handleKeyDownOnInput({
     } else {
         handleTypedCharacters(parameters);
     }
+    handleEditingMode(parameters);
 }

package/src/lightning/buttonGroup/buttonGroup.css

@@ -1,2 +1,11 @@
 /* @import 'lightning/sldsCommon';
 @import './button-group.slds.css'; */
+
+/* Fix for lihgtning-button-icon not being flush with lightning-button, for details see: W-11658757
+ *
+ * :host:not([data-render-mode]) - specifies that this style will only be applied in synthetic shadow mode
+ */
+
+ :host:not([data-render-mode]) .fix_button-group-flexbox {
+    display: inline-flex;
+ }

package/src/lightning/buttonGroup/buttonGroup.html

@@ -1,5 +1,5 @@
 <template>
-    <div part="button-group">
+    <div part="button-group" class="fix_button-group-flexbox">
         <slot onslotchange={handleSlotChange}></slot>
     </div>
 </template>

package/src/lightning/buttonMenu/buttonMenu.html

@@ -11,8 +11,6 @@
         onblur={handleBlur}
         onfocus={handleFocus}
         type="button"
-        aria-controls="lgt-button-menu-dropdown"
-        id="lgt-button-menu"
         onmousedown={handleButtonMouseDown}
         tabindex={tabIndex}
         part="button button-icon">
@@ -40,10 +38,9 @@
                 <lightning-spinner size="small" alternative-text={computedLoadingStateAlternativeText}></lightning-spinner>
             </template>
             <template if:false={isLoading}>
-                <div class="slds-dropdown__list slds-dropdown_length-with-icon-10"
-                    id="lgt-button-menu-dropdown"
+                <div
+                    class="slds-dropdown__list slds-dropdown_length-with-icon-10"
                     role="menu"
-                    aria-labelledby="lgt-button-menu"
                     onprivateselect={handleMenuItemPrivateSelect}
                     onprivateblur={handlePrivateBlur}
                     onprivatefocus={handlePrivateFocus}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -772,10 +772,7 @@ export default class LightningButtonMenu extends LightningElement {
             // prevent blur during a non-blurring focus change
             // set lock so that while focusing on menutitem, menu doesnt close
             this.cancelBlur();
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            requestAnimationFrame(() => {
-                menuItem.focus();
-            });
+            menuItem.focus();
         }
         // allowBlur is called when the menu items receives focus
     }

package/src/lightning/buttonStateful/buttonStateful.html

@@ -4,7 +4,8 @@
             onblur={handleButtonBlur}
             onclick={handleButtonClick}
             aria-live="polite"
-            part="button">
+            part="button"
+            disabled={disabled}>
 
             <span class="slds-text-not-selected">
                 <template if:true={iconNameWhenOff}>

package/src/lightning/buttonStateful/buttonStateful.js

@@ -22,6 +22,11 @@ export default class LightningButtonStateful extends LightningElement {
         isClicked: false,
     };
 
+    /**
+     * Passthrough to pass disabled attribute onto button
+     */
+    @api disabled;
+
     /**
      * The name of the icon to be used in the format 'utility:check' when the state is true.
      *
@@ -104,6 +109,11 @@ export default class LightningButtonStateful extends LightningElement {
         this.state.selected = normalizeBoolean(value);
     }
 
+    renderedCallback() {
+        // change host style to disable pointer event.
+        this.template.host.style.pointerEvents = this.disabled ? 'none' : '';
+    }
+
     /**
      * Sets focus on the button.
      */

package/src/lightning/card/__docs__/card.md

@@ -111,4 +111,4 @@ This component has usage differences from its Aura counterpart. See [Base Compon
 
 #### Source Code
 
-`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.
+`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/card/card.html

@@ -1,5 +1,6 @@
 <template>
-    <article class={computedWrapperClassNames} part="card">
+    <article class={computedWrapperClassNames} aria-label={label} part="card">
+        <template if:true={computedHidden}>
         <div class="slds-card__header slds-grid">
             <header class="slds-media slds-media_center slds-has-flexi-truncate" part="header">
                 <template if:true={hasIcon}>
@@ -32,6 +33,7 @@
                 </div>
             </header>
         </div>
+        </template>
         <div class="slds-card__body" part="body">
             <slot></slot>
         </div>

package/src/lightning/card/card.js

@@ -1,11 +1,7 @@
 import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import {
-    isNarrow,
-    isBase,
-    isHeadingLevelValid,
-    DEFAULT_HEADING_LEVEL,
-} from './utils';
+import { isNarrow, isBase } from './utils';
+import { isHeadingLevelValid } from 'lightning/utilsPrivate';
 
 /**
  * Cards apply a container around a related grouping of information.
@@ -81,15 +77,7 @@ export default class LightningCard extends LightningElement {
         }
     }
 
-    _privateHeadingAriaLevel = DEFAULT_HEADING_LEVEL;
-
-    set headingLevel(value) {
-        if (isHeadingLevelValid(value)) {
-            this._privateHeadingAriaLevel = value;
-        } else {
-            this._privateHeadingAriaLevel = DEFAULT_HEADING_LEVEL;
-        }
-    }
+    _privateHeadingAriaLevel;
 
     /**
      * The headingLevel changes the 'aria-level' attribute value of
@@ -104,6 +92,12 @@ export default class LightningCard extends LightningElement {
         return this._privateHeadingAriaLevel;
     }
 
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
+
     get titleSlot() {
         return this.template.querySelector('slot[name=title]');
     }
@@ -125,4 +119,46 @@ export default class LightningCard extends LightningElement {
     get hasStringTitle() {
         return !!this.title;
     }
+
+    privateHeaderLabel;
+
+    /**
+     * Assistive label for the card header. Only shown if `hideHeader` attribute is set to `true`.
+     * @type {string}
+     */
+    @api
+    get label() {
+        if (!this._hasTitle || this.hideHeader) {
+            return this.privateHeaderLabel;
+        }
+        return null;
+    }
+    set label(value) {
+        this.privateHeaderLabel = value;
+    }
+
+    get computedHidden() {
+        if (!this.label && this.hideHeader) {
+            console.warn(
+                'Setting header without a label can cause accessibility issues'
+            );
+        }
+        return !this.hideHeader;
+    }
+
+    hiddenHeader = false;
+
+    /**
+     * Hides the header chunk of the card when set to `true`.
+     * Requires you to set the `label` attribute to supplement a non-rendered header. If `label` isn't set, you get a `console.warn` error.
+     * @type {boolean}
+     * @default {false}
+     */
+    @api
+    get hideHeader() {
+        return this.hiddenHeader;
+    }
+    set hideHeader(value) {
+        this.hiddenHeader = value;
+    }
 }

package/src/lightning/card/utils.js

@@ -1,10 +1,3 @@
-/**
- * These are all values that can be set to "aria-level" attribute of h2 tag for the card's title.
- */
-export const VALID_HEADING_LEVELS = ['1', '2', '3', '4', '5', '6'];
-
-export const DEFAULT_HEADING_LEVEL = '2';
-
 export function isNarrow(variant) {
     return typeof variant === 'string' && variant.toLowerCase() === 'narrow';
 }
@@ -12,10 +5,3 @@ export function isNarrow(variant) {
 export function isBase(variant) {
     return typeof variant === 'string' && variant.toLowerCase() === 'base';
 }
-
-export function isHeadingLevelValid(level) {
-    return (
-        (typeof level === 'string' || typeof level === 'number') &&
-        VALID_HEADING_LEVELS.includes(String(level))
-    );
-}

package/src/lightning/checkboxGroup/checkboxGroup.html

@@ -30,7 +30,7 @@
         </div>
 
         <template if:true={_helpMessage}>
-            <div id="helptext" data-helptext class="slds-form-element__help">{_helpMessage}</div>
+            <div id="helptext" data-helptext role="alert" class="slds-form-element__help">{_helpMessage}</div>
         </template>
 
     </fieldset>

package/src/lightning/datatable/renderManager.js

@@ -83,9 +83,11 @@ export class RenderManager {
         if (normalizeBoolean(viewportRendering) || state.virtualize) {
             this.initializeResizeObserver(state, getWrapperHeight);
         }
+        let computedBufferSize =
+            typeof bufferSize != 'undefined' ? bufferSize : DEFAULT_BUFFER_SIZE;
         state.bufferSize = normalizeNumberAttribute(
             'bufferSize',
-            bufferSize || DEFAULT_BUFFER_SIZE,
+            computedBufferSize,
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
@@ -213,10 +215,17 @@ export class RenderManager {
         const normalizedRowCount = rowCount
             ? Math.min(rowCount, totalRows)
             : totalRows;
-        state.renderedRowCount = normalizedRowCount;
-
-        // Update our internal cache
-        this.previousCache.renderedRowCount = normalizedRowCount;
+        if (isViewportRenderingEnabled(state)) {
+            if (state.renderedRowCount < normalizedRowCount) {
+                state.renderedRowCount = normalizedRowCount;
+                // Update our internal cache
+                this.previousCache.renderedRowCount = normalizedRowCount;
+            }
+        } else {
+            state.renderedRowCount = normalizedRowCount;
+            // Update our internal cache
+            this.previousCache.renderedRowCount = normalizedRowCount;
+        }
         this.previousCache.totalRowCount = totalRows;
 
         if (rows.length > 0) {

package/src/lightning/datatable/rowSelection.js

@@ -51,7 +51,7 @@ export function handleSelectAllRows(event) {
     event.stopPropagation();
     markAllRowsSelected(this.state);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.SELECT_ALL_ROWS,
+        action: ROWS_ACTION.SELECT_ALL_ROWS,
     });
 }
 
@@ -64,7 +64,7 @@ export function handleDeselectAllRows(event) {
     event.stopPropagation();
     markAllRowsDeselected(this.state);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.DESELECT_ALL_ROWS,
+        action: ROWS_ACTION.DESELECT_ALL_ROWS,
     });
 }
 
@@ -89,7 +89,7 @@ export function handleSelectRow(event) {
     markSelectedRowsInterval(this.state, fromRowKey, rowKeyValue);
     setLastRowSelection(this.state, rowKeyValue);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.ROW_SELECT,
+        action: ROWS_ACTION.ROW_SELECT,
         value: rowKeyValue,
     });
 }
@@ -115,7 +115,7 @@ export function handleDeselectRow(event) {
     markDeselectedRowsInterval(this.state, fromRowKey, rowKeyValue);
     setLastRowSelection(this.state, rowKeyValue);
     this.fireSelectedRowsChange(this.getSelectedRows(), {
-        selection: ROWS_ACTION.ROW_DESELECT,
+        action: ROWS_ACTION.ROW_DESELECT,
         value: rowKeyValue,
     });
 }

package/src/lightning/datatable/rows.js

@@ -173,6 +173,7 @@ export function updateRowsAndCellIndexes() {
                     : undefined,
                 dataLabel: colData.label,
                 value: computedCellValue, // value based on the fieldName
+                displayValue: rowData.displayValue ? rowData.displayValue : '',
                 rowKeyValue: row.key, // unique row key value
                 colKeyValue, // unique column key value
                 tabIndex: -1, // tabindex

package/src/lightning/datatable/templates/table/table.html

@@ -167,6 +167,7 @@
                                                     row-key-value={row.key}
                                                     col-key-value={cell.colKeyValue}
                                                     value={cell.value}
+                                                    display-value={cell.displayValue}
                                                     icon-name={cell.iconName}
                                                     icon-label={cell.iconLabel}
                                                     icon-position={cell.iconPosition}
@@ -216,6 +217,7 @@
                                                     row-key-value={row.key}
                                                     col-key-value={cell.colKeyValue}
                                                     value={cell.value}
+                                                    display-value={cell.displayValue}
                                                     icon-name={cell.iconName}
                                                     icon-label={cell.iconLabel}
                                                     icon-position={cell.iconPosition}

package/src/lightning/focusUtils/focus.js

@@ -81,6 +81,48 @@ export function getElementWithFocus() {
     return undefined;
 }
 
+/**
+ * Return the focus to an element if it is still attached to the DOM.
+ * @param {Element} element - element which will receive the focus.
+ * @returns {boolean} - true if the element is focused.
+ */
+export function returnFocusToElement(element) {
+    const isSavedElemInDOM = document.body.contains(element);
+    if (element) {
+        if (isSavedElemInDOM) {
+            element.focus();
+            return true;
+        }
+        const isElementInDOM = isElementInDocument(element);
+        if (isElementInDOM) {
+            element.focus();
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * Return true if the given element is in document (rather it is in shadow or not)
+ * @param {Element} element - element to be inspected
+ * @returns {boolean} - true if the element is in document, otherwise false
+ */
+function isElementInDocument(element) {
+    let currentElement = element;
+    // traverse all the way up to the document, to make sure
+    // the element is inside of the document.
+    while (currentElement && currentElement.parentNode) {
+        if (currentElement.parentNode === document) {
+            return true;
+        } else if (currentElement.parentNode instanceof DocumentFragment) {
+            currentElement = currentElement.parentNode.host;
+        } else {
+            currentElement = currentElement.parentNode;
+        }
+    }
+    return false;
+}
+
 /**
  * Recursively traverse an active tree and run callback on each non-inert node element.
  *

package/src/lightning/focusUtils/focusUtils.js

@@ -3,4 +3,5 @@ export {
     findAllFocusableNodes,
     getElementWithFocus,
     filterTooltips,
+    returnFocusToElement,
 } from './focus';

package/src/lightning/formattedAddress/formattedAddress.js

@@ -220,7 +220,7 @@ export default class LightningFormattedAddress extends LightningElement {
     }
 
     get mapUrl() {
-        return encodeURI(MAP_HOST + this.mapQuery);
+        return encodeURI(MAP_HOST) + encodeURIComponent(this.mapQuery);
     }
 
     get addressLink() {

package/src/lightning/input/input.html

@@ -75,6 +75,7 @@
                     onblur={handleBlur}
                     onfocus={handleFocus}
                     onchange={handleChange}
+                    onclick={handleCheckboxClick}
                     name={name}
                     required={required}
                     readonly={readOnly}
@@ -105,7 +106,7 @@
                             <abbr class="slds-required" title={i18n.required}>*</abbr>
                         </template>
                     </template>
-                    <input type="checkbox" 
+                    <input type="checkbox"
                         part="checkbox"
                         id="checkbox"
                         aria-label={computedAriaLabel}
@@ -114,6 +115,7 @@
                         onblur={handleBlur}
                         onfocus={handleFocus}
                         onchange={handleChange}
+                        onclick={handleCheckboxClick}
                         name={name}
                         required={required}
                         readonly={readOnly}
@@ -142,6 +144,7 @@
                 onblur={handleBlur}
                 onfocus={handleFocus}
                 onchange={handleChange}
+                onclick={handleCheckboxClick}
                 name={name}
                 required={required}
                 readonly={readOnly}
@@ -341,6 +344,6 @@
     </template>
 
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
+        <div id="help-message" class={computedHelpMessageClass} data-help-message role="alert" part="help-text">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/input/input.js

@@ -533,7 +533,7 @@ export default class LightningInput extends LightningElement {
     @api
     get ariaLabelledBy() {
         // native version returns the auto linked value
-        if (this.isNative) {
+        if (this.isNative && this._rendered) {
             const ariaValues = this._inputElement.getAttribute(ARIA_LABELLEDBY);
             return filterNonAutoLink(ariaValues);
         }
@@ -1306,6 +1306,12 @@ export default class LightningInput extends LightningElement {
             .toString();
     }
 
+    get computedHelpMessageClass() {
+        return classSet('slds-form-element__help')
+            .add({ 'slds-m-left_none': this.variant !== VARIANT.LABEL_INLINE })
+            .toString();
+    }
+
     get normalizedMax() {
         return this._normalizeDateTimeString(this.max);
     }
@@ -1750,6 +1756,12 @@ export default class LightningInput extends LightningElement {
         }
     }
 
+    handleCheckboxClick() {
+        if (this.template.activeElement === null) {
+            this.template.querySelector("[type='checkbox']").focus();
+        }
+    }
+
     handleChange(event) {
         event.stopPropagation();
 

package/src/lightning/modalBase/modalBase.js

@@ -10,7 +10,10 @@ import {
     isAriaDescriptionSupported,
 } from 'lightning/utilsPrivate';
 import { instanceName, secure } from 'lightning/overlayUtils';
-import { getElementWithFocus } from 'lightning/focusUtils';
+import {
+    getElementWithFocus,
+    returnFocusToElement,
+} from 'lightning/focusUtils';
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 
@@ -147,7 +150,7 @@ export default class LightningModalBase extends LightningElement {
         // we track both in order to handle transition correctly
         const isSwitchingToDisabled =
             !this.disableCloseButton && this.disableClose;
-        /* Future enhancement possibility - trigger setInterval to remove and 
+        /* Future enhancement possibility - trigger setInterval to remove and
            again add back 'Processing' text, as this will indicate to the screen
            reader user that the interface continues to be busy
         */
@@ -349,10 +352,8 @@ export default class LightningModalBase extends LightningElement {
      */
     returnFocusToBackground() {
         const { savedActiveElement } = this;
-        const isSavedElemInDOM = document.body.contains(savedActiveElement);
-        if (savedActiveElement && isSavedElemInDOM) {
-            savedActiveElement.focus();
-        } else {
+        const elementWasFocused = returnFocusToElement(savedActiveElement);
+        if (!elementWasFocused) {
             // eslint-disable-next-line no-console
             console.warn('Modal :: Nothing to return focus to');
         }

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,2 +1,11 @@
 /* @import 'lightning/sldsCommon';
 @import './tooltip.slds.css'; */
+
+/* Fix for tooltip alignment issue, for details see: W-11677142
+ *
+ * fix-tooltip_alignment - the custom class that edits min-width
+ */
+
+.fix-popover_tooltip_alignment {
+    min-width: inherit;
+}

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -102,7 +102,9 @@ export default class LightningPrimitiveBubble extends LightningElement {
 
     // compute class value for this bubble
     get computedPopoverClass() {
-        const classes = classSet('slds-popover').add('slds-popover_tooltip');
+        const classes = classSet('slds-popover')
+            .add('slds-popover_tooltip')
+            .add('fix-popover_tooltip_alignment'); // fix for W-11677142
 
         // show or hide bubble
         classes.add({

package/src/lightning/primitiveCellActions/primitiveCellActions.html

@@ -7,6 +7,7 @@
         onopen={handleMenuOpen}
         is-loading={_isLoadingActions}
         loading-state-alternative-text={spinnerAlternateText}
+        tab-index={internalTabIndex}
     >
         <template for:each={_actions} for:item="action">
             <lightning-menu-item

package/src/lightning/primitiveCellActions/primitiveCellActions.js

@@ -33,13 +33,13 @@ export default class PrimitiveCellActions extends LightningElement {
     static delegatesFocus = true;
     _isLoadingActions;
     _menuAlignment = DEFAULT_MENU_ALIGNMENT;
-    _internalTabIndex = false;
 
     /************************** PUBLIC ATTRIBUTES ***************************/
 
     @api rowKeyValue;
     @api colKeyValue;
     @api rowActions;
+    @api internalTabIndex;
 
     /**
      * Defines the current menu alignment

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html

@@ -8,6 +8,7 @@
             <template if:true={hasTreeData}>
                 <lightning-primitive-treegrid-cell-toggle row-key-value={rowKeyValue}
                                                           col-key-value={colKeyValue}
+                                                          display-value={displayValue}
                                                           value={value}
                                                           has-children={typeAttribute21}
                                                           is-expanded={typeAttribute22}
@@ -33,6 +34,7 @@
                                                   row-key-value={rowKeyValue}
                                                   col-key-value={colKeyValue}
                                                   tabindex={internalTabIndex}
+                                                  internal-tab-index={internalTabIndex}
                                                   menu-alignment={typeAttribute0}
                                                   row-actions={typeAttribute1}>
                 </lightning-primitive-cell-actions>
@@ -278,7 +280,7 @@
             </button>
         </template>
         <!-- TODO: displayReadOnlyIcon is true only when the cell's "editable" property is false and its "displayReadOnlyIcon"
-        property is true. The markup in this template therefore cannot be rendered concurrently with the template above that checks 
+        property is true. The markup in this template therefore cannot be rendered concurrently with the template above that checks
         the editable property. -->
         <template if:true={shouldDisplayReadOnlyIcon}>
             <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -35,6 +35,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     @api types;
     @api alignment;
     @api value;
+    @api displayValue;
     @api iconName;
     @api iconLabel;
     @api iconPosition;

package/src/lightning/primitiveTreegridCellToggle/primitiveTreegridCellToggle.js

@@ -2,7 +2,7 @@ import labelCollapseBranch from '@salesforce/label/LightningPrimitiveCellTree.co
 import labelExpandBranch from '@salesforce/label/LightningPrimitiveCellTree.expandBranch';
 import { LightningElement, api } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
-import { normalizeBoolean } from 'lightning/utilsPrivate';
+import { normalizeString, normalizeBoolean } from 'lightning/utilsPrivate';
 
 const i18n = {
     collapseBranch: labelCollapseBranch,
@@ -13,6 +13,7 @@ export default class PrivateTreeGridCellToggle extends LightningElement {
     @api rowKeyValue;
     @api colKeyValue;
     @api value;
+    @api displayValue;
 
     _expanded = false;
     _hasChildren = false;
@@ -60,10 +61,14 @@ export default class PrivateTreeGridCellToggle extends LightningElement {
     }
 
     get buttonTitle() {
+        let title =
+            normalizeString(this.displayValue) !== ''
+                ? this.displayValue
+                : this.value;
         if (this.isExpanded) {
-            return formatLabel(i18n.collapseBranch, this.value);
+            return formatLabel(i18n.collapseBranch, title);
         }
-        return formatLabel(i18n.expandBranch, this.value);
+        return formatLabel(i18n.expandBranch, title);
     }
 
     handleChevronClick() {

package/src/lightning/radioGroup/radioGroup.html

@@ -58,7 +58,7 @@
         </div>
 
         <template if:true={_helpMessage}>
-            <div data-help-message id="help-message" class="slds-form-element__help">{_helpMessage}</div>
+            <div data-help-message id="help-message" role="alert" class="slds-form-element__help">{_helpMessage}</div>
         </template>
 
     </fieldset>

package/src/lightning/textarea/textarea.js

@@ -102,6 +102,12 @@ export default class LightningTextarea extends LightningElement {
     @track _helpMessage;
     @track _fieldLevelHelp;
 
+    /**
+     * Aria Described by value on parent lighting-textarea
+     * @type {string}
+     */
+    @api ariaDescribedBy;
+
     connectedCallback() {
         this.classList.add('slds-form-element');
         this.updateClassList();
@@ -433,7 +439,13 @@ export default class LightningTextarea extends LightningElement {
 
     get computedUniqueHelpElementId() {
         const helpMessage = this.template.querySelector('[data-help-message]');
-        return getRealDOMId(helpMessage);
+        let spaceSeperatedDescribedByIds = getRealDOMId(helpMessage);
+        if (this.ariaDescribedBy && spaceSeperatedDescribedByIds) {
+            spaceSeperatedDescribedByIds += ` ${this.ariaDescribedBy}`;
+        } else if (this.ariaDescribedBy) {
+            spaceSeperatedDescribedByIds = this.ariaDescribedBy;
+        }
+        return spaceSeperatedDescribedByIds;
     }
 
     _setInputValue(value) {

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -222,6 +222,13 @@ export class Tooltip {
                     this.hideIfNotSelfCover(event)
                 )
             );
+            target.addEventListener('keydown', (event) => {
+                if (event.keyCode === 13 && !this._visible) {
+                    this.toggle();
+                } else {
+                    this.hide();
+                }
+            });
         }
     }
     handleEscape(e) {

package/src/lightning/tree/tree.html

@@ -1,7 +1,7 @@
 <template>
     <div class="slds-tree_container">
         <template if:true={header}>
-            <h4 class="slds-tree__group-header" id="treeheading">{header}</h4>
+            <h4 class="slds-tree__group-header" id="treeheading" aria-level={_privateHeadingAriaLevel}>{header}</h4>
         </template>
 
         <lightning-tree-item if:true={hasChildren} class="slds-tree" role="tree" aria-labelledby={computedLabelledBy}

package/src/lightning/tree/tree.js

@@ -1,6 +1,10 @@
 import { LightningElement, api, track } from 'lwc';
 import { TreeData } from './treeData';
-import { keyCodes, deepCopy } from 'lightning/utilsPrivate';
+import {
+    keyCodes,
+    deepCopy,
+    isHeadingLevelValid,
+} from 'lightning/utilsPrivate';
 
 /**
  * Displays a nested tree.
@@ -41,6 +45,26 @@ export default class LightningTree extends LightningElement {
         );
     }
 
+    _privateHeadingAriaLevel;
+
+    /**
+     * Changes the 'aria-level' attribute value for the
+     * <h2> markup tag in the card's title element. Supported values
+     * are (1, 2, 3, 4, 5, 6).
+     *
+     * @type {string | number}
+     * @default 2
+     */
+    @api
+    get headingLevel() {
+        return this._privateHeadingAriaLevel;
+    }
+
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
     /**
      * An array of key-value pairs that describe the tree. See the Documentation tab for more information.
      * @type {array}

package/src/lightning/treeGrid/__docs__/treeGrid.md

@@ -507,6 +507,18 @@ Use the following `aria` attributes on `lightning-tree-grid` to provide a captio
 | aria-label      | string            | Provides an assistive label to identify a table from other tables on a page.                                                       |
 | aria-labelledby | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to caption or describe the table. |
 
+You can add a `displayValue` on the dropdown arrow for a row. This `displayValue` replaces the default row `title` for the dropdown arrow's label.
+
+```javascript
+    {
+        name: '125313-7j',
+        accountName: 'Dach-Welch',
+        displayValue: 'Display Value One',
+        phone: '995-523-7024',
+    }
+```
+
+
 ##### Provide an Accessible Label for the Table
 
 Use the `aria-label` attribute to provide a more descriptive label for the table for assistive technology. The `aria-label` attribute and its value are passed down to the rendered `table` element.

package/src/lightning/treeGrid/treeGrid.js

@@ -272,31 +272,39 @@ export default class LightningTreeGrid extends LightningElement {
 
     handleRowSelection(event) {
         event.stopPropagation();
+        let selectedRowKeys;
         // pass the event through
-        switch (event.detail.config.selection) {
+        switch (event.detail.config.action) {
             case ROWS_ACTION.ROW_SELECT:
+                selectedRowKeys = this._selectedRowKeys.slice();
                 this._selectedRowKeys.push(event.detail.config.value);
                 break;
             case ROWS_ACTION.ROW_DESELECT: {
                 const index = this._selectedRowKeys.indexOf(
                     event.detail.config.value
                 );
+                selectedRowKeys = this._selectedRowKeys.slice();
                 this._selectedRowKeys.splice(index, 1);
-
                 break;
             }
             case ROWS_ACTION.SELECT_ALL_ROWS:
+                selectedRowKeys = this._selectedRowKeys.slice();
+                this._selectedRowKeys = this.getSelectedRowKeys(
+                    event.detail.selectedRows
+                );
+                break;
             case ROWS_ACTION.DESELECT_ALL_ROWS:
+                selectedRowKeys = this._selectedRowKeys.slice();
                 this._selectedRowKeys = this.getSelectedRowKeys(
                     event.detail.selectedRows
                 );
                 break;
             default:
                 this._selectedRowKeys.push(event.detail.config.value);
+                selectedRowKeys = this._selectedRowKeys.slice();
                 break;
         }
-        delete event.detail.config; // to prevent further propagation of the config
-
+        event.detail.config.selectedRowKeys = selectedRowKeys;
         this.fireSelectedRowsChange(event.detail);
     }
 

package/src/lightning/utilsPrivate/ariaLevelHeadingUtils.js

@@ -0,0 +1,11 @@
+/**
+ * These are all values that can be set to "aria-level" attribute of h2 tag for the card's title.
+ */
+export const VALID_HEADING_LEVELS = ['1', '2', '3', '4', '5', '6'];
+
+export function isHeadingLevelValid(level) {
+    return (
+        (typeof level === 'string' || typeof level === 'number') &&
+        VALID_HEADING_LEVELS.includes(level.toString())
+    );
+}

package/src/lightning/utilsPrivate/os.js

@@ -0,0 +1,36 @@
+/**
+ * Verify if user is using MAC OS or not
+ * @returns {boolean} - true if Mac OS
+ */
+export const isMacOSTest = ({ userAgent }) => {
+    return /(macintosh|macintel|macppc|mac68k|macos)/i.test(userAgent);
+};
+
+/**
+ * Verify if user is using iOS or not
+ * @returns {boolean} - true, if iOS
+ */
+export const isiOSTest = ({ userAgent }) => {
+    return /(iphone|ipad|ipod)/i.test(userAgent);
+};
+
+/**
+ * Verify if user is using Windows OS or not
+ * @returns {boolean} - true, if Windows OS
+ */
+export const isWindowsOSTest = ({ userAgent }) => {
+    return /(win32|win64|windows)/i.test(userAgent);
+};
+
+/**
+ * Verify if user is using Android OS or not
+ * @returns {boolean} - true, if Android OS
+ */
+export const isAndroidOSTest = ({ userAgent }) => {
+    return /android/i.test(userAgent);
+};
+
+export const isMacOS = isMacOSTest(navigator);
+export const isWindowsOS = isWindowsOSTest(navigator);
+export const isiOS = isiOSTest(navigator);
+export const isAndroidOS = isAndroidOSTest(navigator);

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -42,8 +42,15 @@ export {
     parseToFormattedParts,
 } from './linkify';
 export { isValidPageReference } from './pageReference';
+export { isMacOS, isWindowsOS, isiOS, isAndroidOS } from './os';
+
 import { smartSetAttribute } from './smartSetAttribute';
 
+export {
+    VALID_HEADING_LEVELS,
+    isHeadingLevelValid,
+} from './ariaLevelHeadingUtils.js';
+
 /**
  * @param {HTMLElement} element Element to act on
  * @param {Object} values values and attributes to set, if the value is

package/src/lightning/verticalNavigationSection/verticalNavigationSection.html

@@ -1,6 +1,6 @@
 <template>
     <div class="slds-nav-vertical__section" onprivateoverflowregister={handleOverflowRegister}>
-        <h2 id="vertical-navigation-section-heading" class="slds-nav-vertical__title">{label}</h2>
+        <h2 id="vertical-navigation-section-heading" class="slds-nav-vertical__title" aria-level={_privateHeadingAriaLevel}>{label}</h2>
         <div role="list" aria-describedby="vertical-navigation-section-heading">
             <slot></slot>
         </div>

package/src/lightning/verticalNavigationSection/verticalNavigationSection.js

@@ -1,5 +1,5 @@
 import { LightningElement, api, track } from 'lwc';
-import { guid } from 'lightning/utilsPrivate';
+import { guid, isHeadingLevelValid } from 'lightning/utilsPrivate';
 
 export default class LightningVerticalNavigationSection extends LightningElement {
     headingId = guid();
@@ -28,4 +28,25 @@ export default class LightningVerticalNavigationSection extends LightningElement
         const item = event.detail;
         item.callbacks.updateAssistiveText(this.label);
     }
+
+    _privateHeadingAriaLevel;
+
+    /**
+     * Changes the 'aria-level' attribute value for the
+     * <h2> markup tag in the card's title element. Supported values
+     * are (1, 2, 3, 4, 5, 6).
+     *
+     * @type {string | number}
+     * @default 2
+     */
+    @api
+    get headingLevel() {
+        return this._privateHeadingAriaLevel;
+    }
+
+    set headingLevel(value) {
+        if (isHeadingLevelValid(value)) {
+            this._privateHeadingAriaLevel = value;
+        }
+    }
 }

package/scopedImports/@salesforce-label-LightningToast.missingToastLabel.js

@@ -1 +0,0 @@
-export default 'Provide at least the "label" property to show the toast.';

package/scopedImports/@salesforce-label-LightningToastContainer.missingToastConfig.js

@@ -1 +0,0 @@
-export default 'Unable to show toast, missing toast config.';

package/scopedImports/@salesforce-label-LightningToastContainer.missingToastProperty.js

@@ -1 +0,0 @@
-export default 'Unable to show toast, missing toast property\'s "{0}".';