lightning-base-components 1.15.2-alpha → 1.15.3-alpha

package/src/lightning/datepicker/datepicker.js

@@ -6,16 +6,13 @@ import labelMaxRangeMessage from '@salesforce/label/LightningDateTimePicker.maxR
 import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicker.minAndMaxRangeMessage';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
-import shortDateFormat from '@salesforce/i18n/dateTime.shortDateFormat';
-import mediumDateFormat from '@salesforce/i18n/dateTime.mediumDateFormat';
-import longDateFormat from '@salesforce/i18n/dateTime.longDateFormat';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, track, api } from 'lwc';
 import {
-    parseDateTime,
     normalizeISODate,
-    normalizeFormattedDate,
+    parseFormattedDate,
+    getDateFormatFromStyle,
 } from 'lightning/internationalizationLibrary';
-import { STANDARD_DATE_FORMAT } from 'lightning/iso8601Utils';
 import {
     startPositioning,
     stopPositioning,
@@ -50,6 +47,7 @@ const i18n = {
     minAndMaxRangeMessage: labelMinAndMaxRangeMessage,
     required: labelRequired,
     selectDateFor: labelSelectDateFor,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 const ARIA_CONTROLS = 'aria-controls';
@@ -80,6 +78,7 @@ export default class LightningDatePicker extends LightningElement {
     _max;
     _displayMin;
     _displayMax;
+    _dateStyle = DATE_STYLE.MEDIUM;
 
     @api label;
     @api name;
@@ -105,7 +104,7 @@ export default class LightningDatePicker extends LightningElement {
         this._min = value;
         this._displayMin = value;
 
-        const normalizedDate = normalizeISODate(value, this.dateFormat);
+        const normalizedDate = normalizeISODate(value, this.dateStyle);
         if (normalizedDate.isoValue) {
             this._min = normalizedDate.isoValue;
             this._displayMin = normalizedDate.displayValue;
@@ -122,7 +121,7 @@ export default class LightningDatePicker extends LightningElement {
         this._max = value;
         this._displayMax = value;
 
-        const normalizedDate = normalizeISODate(value, this.dateFormat);
+        const normalizedDate = normalizeISODate(value, this.dateStyle);
         if (normalizedDate.isoValue) {
             this._max = normalizedDate.isoValue;
             this._displayMax = normalizedDate.displayValue;
@@ -133,7 +132,10 @@ export default class LightningDatePicker extends LightningElement {
     get messageWhenBadInput() {
         return (
             this._messageWhenBadInput ||
-            formatLabel(this.i18n.invalidDate, this.dateFormat)
+            formatLabel(
+                this.i18n.invalidDate,
+                getDateFormatFromStyle(this.dateStyle, true)
+            )
         );
     }
     set messageWhenBadInput(message) {
@@ -251,7 +253,7 @@ export default class LightningDatePicker extends LightningElement {
         return this._value;
     }
     set value(newValue) {
-        const normalizedDate = normalizeISODate(newValue, this.dateFormat);
+        const normalizedDate = normalizeISODate(newValue, this.dateStyle);
 
         this._value = normalizedDate.isoValue;
         this._displayValue = normalizedDate.displayValue;
@@ -339,9 +341,8 @@ export default class LightningDatePicker extends LightningElement {
             fallbackValue: DATE_STYLE.MEDIUM,
             validValues: [DATE_STYLE.SHORT, DATE_STYLE.MEDIUM, DATE_STYLE.LONG],
         });
-        this.dateFormat = this.getDateFormatFromStyle(this._dateStyle);
 
-        const normalizedDate = normalizeISODate(this._value, this.dateFormat);
+        const normalizedDate = normalizeISODate(this._value, this.dateStyle);
         this._displayValue = normalizedDate.displayValue;
     }
 
@@ -396,6 +397,11 @@ export default class LightningDatePicker extends LightningElement {
         return this._displayValue;
     }
 
+    get computedClass() {
+        let displayClass = this.errorMessage ? 'slds-show' : 'slds-hide';
+        return 'slds-form-element__help ' + displayClass;
+    }
+
     get errorMessage() {
         return this._errorMessage;
     }
@@ -460,8 +466,7 @@ export default class LightningDatePicker extends LightningElement {
 
         // keeping the display value in sync with the element's value
         this._displayValue = event.currentTarget.value;
-        this._value = this.parseFormattedDate(this._displayValue);
-
+        this._value = parseFormattedDate(this._displayValue).value;
         this.dispatchChangeEvent();
     }
 
@@ -484,7 +489,7 @@ export default class LightningDatePicker extends LightningElement {
         if (this._value !== null) {
             const normalizedDate = normalizeISODate(
                 this._value,
-                this.dateFormat
+                this.dateStyle
             );
             this._displayValue = normalizedDate.displayValue;
         }
@@ -564,7 +569,7 @@ export default class LightningDatePicker extends LightningElement {
 
         this._displayValue = normalizeISODate(
             this._value,
-            this.dateFormat
+            this.dateStyle
         ).displayValue;
 
         this.hideCalendarAndFocusTrigger();
@@ -652,34 +657,6 @@ export default class LightningDatePicker extends LightningElement {
         return this.template.querySelector('input');
     }
 
-    get dateFormat() {
-        if (!this._dateFormat) {
-            this._dateFormat = this.getDateFormatFromStyle();
-        }
-        return this._dateFormat;
-    }
-
-    set dateFormat(value) {
-        this._dateFormat = value;
-    }
-
-    getDateFormatFromStyle(dateStyle) {
-        let dateFormat;
-        switch (dateStyle) {
-            case DATE_STYLE.SHORT:
-                dateFormat = shortDateFormat;
-                break;
-            case DATE_STYLE.LONG:
-                dateFormat = longDateFormat;
-                break;
-            default:
-                dateFormat = mediumDateFormat;
-                break;
-        }
-
-        return dateFormat;
-    }
-
     dispatchChangeEvent() {
         this.dispatchEvent(
             new CustomEvent('change', {
@@ -707,39 +684,6 @@ export default class LightningDatePicker extends LightningElement {
         };
     }
 
-    parse(dateString) {
-        // We cannot use parseDateTimeISO8601 here because that method does not have a strict flag. If the value is not an ISO string, that method will parse using the native Date()
-        // Alternatively we could call isValidISODateTimeString and then parseDateTimeISO8601.
-        return parseDateTime(dateString, STANDARD_DATE_FORMAT, true);
-    }
-
-    get allowedDateFormats() {
-        // We should prioritize the long, because a long date matched with the medium format. An issue in aura?
-        // Ex: September 8, 2017 when be parsed with the medium format, returns a valid iso date.
-        return [longDateFormat, mediumDateFormat, shortDateFormat];
-    }
-
-    /**
-     * Parses the input date and sets the dateFormat used to parse the displayValue
-     * if it is a valid Date.
-     *
-     * @param {String} displayValue - The input date.
-     * @return {null | string} - A normalized formatted date if displayValue is valid. null otherwise.
-     */
-    parseFormattedDate(displayValue) {
-        const allowedFormats = this.allowedDateFormats;
-        const n = allowedFormats.length;
-        let i = 0,
-            value = null;
-
-        do {
-            value = normalizeFormattedDate(displayValue, allowedFormats[i]);
-            i++;
-        } while (value === null && i < n);
-
-        return value;
-    }
-
     get hasExternalLabel() {
         return (
             this.variant === VARIANT.LABEL_HIDDEN &&
@@ -754,4 +698,8 @@ export default class LightningDatePicker extends LightningElement {
             this._errorMessage;
         return computeAriaInvalid(isAriaInvalid, this.value);
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

package/src/lightning/datetimepicker/datetimepicker.html

@@ -5,7 +5,7 @@
                 <legend class={computedLabelClass}>
                     {label}
                 </legend>
-                <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+                <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
             </template>
             <div class="slds-form-element__control">
                 <div class="slds-form-element__group">

package/src/lightning/datetimepicker/datetimepicker.js

@@ -2,6 +2,8 @@ import labelDate from '@salesforce/label/LightningDateTimePicker.dateLabel';
 import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeOverflow';
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
 import labelTime from '@salesforce/label/LightningDateTimePicker.timeLabel';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
+import sfTimeZone from '@salesforce/i18n/timeZone';
 import { LightningElement, track, api } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -12,9 +14,10 @@ import {
     computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
-    getCurrentTime,
+    getCurrentTimeString,
     normalizeISODateTime,
     normalizeFormattedDateTime,
+    isAuraL10NAvailable,
 } from 'lightning/internationalizationLibrary';
 import { TIME_SEPARATOR } from 'lightning/iso8601Utils';
 import {
@@ -29,6 +32,7 @@ const i18n = {
     rangeOverflow: labelRangeOverflow,
     rangeUnderflow: labelRangeUnderflow,
     time: labelTime,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 export default class LightningDateTimePicker extends LightningElement {
@@ -178,6 +182,20 @@ export default class LightningDateTimePicker extends LightningElement {
         }
     }
 
+    /**
+     * Returns time zone if one is set, otherwise returns
+     * the Salesforce time zone when Aura localization is
+     * available, and the system's time zone otherwise
+     */
+    get normalizedTimezone() {
+        if (this.timezone) {
+            return this.timezone;
+        } else if (isAuraL10NAvailable) {
+            return sfTimeZone;
+        }
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+
     @api
     get disabled() {
         return this._disabled;
@@ -454,14 +472,14 @@ export default class LightningDateTimePicker extends LightningElement {
 
     handleDateChange(event) {
         event.stopPropagation();
-
         if (!event.detail) {
             return;
         }
-
         this._dateValue = event.detail.value;
         if (this._dateValue) {
-            this._timeValue = this._timeValue || getCurrentTime(this.timezone);
+            this._timeValue =
+                this._timeValue ||
+                getCurrentTimeString(this.normalizedTimezone);
             this.setTimepickerValue(this._timeValue);
         }
 
@@ -488,7 +506,7 @@ export default class LightningDateTimePicker extends LightningElement {
             const dateTimeString = dateValue + TIME_SEPARATOR + timeValue;
             this._value = normalizeFormattedDateTime(
                 dateTimeString,
-                this.timezone
+                this.normalizedTimezone
             );
 
             this.dispatchChangeEvent();
@@ -520,7 +538,7 @@ export default class LightningDateTimePicker extends LightningElement {
     setDateAndTimeValues(value) {
         const normalizedValue = normalizeISODateTime(
             value,
-            this.timezone
+            this.normalizedTimezone
         ).isoValue;
 
         const isDateOnly = normalizedValue && value.indexOf(TIME_SEPARATOR) < 0;
@@ -560,7 +578,10 @@ export default class LightningDateTimePicker extends LightningElement {
             return;
         }
 
-        const normalizedDate = normalizeISODateTime(this.min, this.timezone);
+        const normalizedDate = normalizeISODateTime(
+            this.min,
+            this.normalizedTimezone
+        );
         this._dateMin = this.separateDateTime(normalizedDate.isoValue)[0];
         this.formattedMin = normalizedDate.displayValue;
     }
@@ -570,7 +591,10 @@ export default class LightningDateTimePicker extends LightningElement {
             return;
         }
 
-        const normalizedDate = normalizeISODateTime(this.max, this.timezone);
+        const normalizedDate = normalizeISODateTime(
+            this.max,
+            this.normalizedTimezone
+        );
         this._dateMax = this.separateDateTime(normalizedDate.isoValue)[0];
         this.formattedMax = normalizedDate.displayValue;
     }
@@ -587,4 +611,8 @@ export default class LightningDateTimePicker extends LightningElement {
     get computedTimeAriaInvalid() {
         return computeAriaInvalid(this._customErrorMessage, this._timeValue);
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

package/src/lightning/dualListbox/dualListbox.html

@@ -6,7 +6,7 @@
                 <abbr class="slds-required" title={i18n.required}>*</abbr>
             </template>{label}
         </div>
-        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
         <div class="slds-form-element__control">
             <div class="slds-dueling-list" onfocusin={handleFocus} onfocusout={handleBlur}>
                 <div class="slds-assistive-text" id="assertive-thing" aria-live="assertive">{_messageToDisplay}</div>

package/src/lightning/dualListbox/dualListbox.js

@@ -16,6 +16,7 @@ import labelMoveSelectionToAssistiveText from '@salesforce/label/LightningDualLi
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
@@ -51,6 +52,7 @@ const i18n = {
     loadingText: labelLoadingText,
     movedOptionsSingular: labelMovedOptionsSingular,
     movedOptionsPlural: labelMovedOptionsPlural,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
 /**
@@ -1058,4 +1060,8 @@ export default class LightningDualListbox extends LightningElement {
             this._messageToDisplay = '';
         }
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

package/src/lightning/fileDownload/fileDownload.js

@@ -0,0 +1,15 @@
+import { resolveFileTypeToURL } from './resourceResolver';
+
+export function generateUrl(recordId) {
+    const url = resolveFileTypeToURL(recordId);
+    return isValidUrl(url) ? url : undefined;
+}
+
+function isValidUrl(url) {
+    return (
+        url &&
+        (url.indexOf('http://') === 0 ||
+            url.indexOf('https://') === 0 ||
+            url.indexOf('/') === 0)
+    );
+}

package/src/lightning/fileDownload/fileDownload.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <minApiVersion>56.0</minApiVersion>
+    <isExposed>true</isExposed>
+</LightningComponentBundle>

package/src/lightning/fileDownload/resourceResolver.js

@@ -0,0 +1,58 @@
+import { getPathPrefix } from 'lightning/configProvider'; // Provides the path prefix to Core resources
+
+export function resolveFileTypeToURL(recordId) {
+    const keyPrefixLength = 3;
+    const keyPrefix = recordId.substring(0, keyPrefixLength);
+
+    /*  Returns url according to file key prefix */
+    const fileAttributes = {
+        // Content Document
+        '069':
+            '/sfc/servlet.shepherd/document/download/' +
+            recordId +
+            '?operationContext=S1',
+
+        // Content Version
+        '068':
+            '/sfc/servlet.shepherd/version/download/' +
+            recordId +
+            '?operationContext=S1',
+
+        // Attachment
+        '00P':
+            '/servlet/servlet.FileDownload?file=' +
+            recordId +
+            '&operationContext=S1',
+
+        // Document
+        '015':
+            '/servlet/servlet.FileDownload?file=' +
+            recordId +
+            '&operationContext=S1',
+    };
+
+    return (
+        keyPrefix &&
+        fileAttributes[keyPrefix] &&
+        getUrlWithSitePrefix(fileAttributes[keyPrefix])
+    );
+}
+
+/*  In order to do any URL redirects, we need the site URL with the site path prefix.
+    getUrlWithSitePrefix returns the URL path prefix of the current site. 
+    For example, if your site URL is MyDomainName.my.salesforce-sites.com/partners, 
+    /partners is the path prefix. Returns null if the prefix isn’t defined. 
+    If the current request is not a site request, then this field returns an empty string. 
+   */
+function getUrlWithSitePrefix(url) {
+    let siteUrlPrefix = getPathPrefix();
+
+    // remove /s in siteUrlPrefix
+    siteUrlPrefix =
+        siteUrlPrefix && siteUrlPrefix.endsWith('/s')
+            ? siteUrlPrefix.slice(0, siteUrlPrefix.length - 2)
+            : siteUrlPrefix;
+
+    // retun url directly if path prefix is already added to site URL
+    return url.indexOf(siteUrlPrefix) === 0 ? url : siteUrlPrefix + url;
+}

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -1,7 +1,7 @@
 import { LightningElement, api, track } from 'lwc';
 import { dateTimeFormat } from 'lightning/internationalizationLibrary';
-import { isValidISODateTimeString } from 'lightning/iso8601Utils';
 import { isIE11, normalizeBoolean } from 'lightning/utilsPrivate';
+import { isValidISODateTimeString } from 'lightning/iso8601Utils';
 
 /**
  * Displays formatted date and time.

package/src/lightning/formattedLookup/events.js

@@ -0,0 +1,19 @@
+/**
+ * @event LightningFormattedLookup#onprivatelookupitempicked
+ * @type {object}
+ * @property {string} recordId
+ */
+export class PrivateLookupItemPickedEvent extends CustomEvent {
+    static NAME = 'privatelookupitempicked';
+
+    constructor({ recordId }) {
+        super(PrivateLookupItemPickedEvent.NAME, {
+            composed: true,
+            cancelable: true,
+            bubbles: true,
+            detail: {
+                recordId,
+            },
+        });
+    }
+}

package/src/lightning/formattedLookup/formattedLookup.js

@@ -1,6 +1,7 @@
 import { LightningElement, api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { getLinkInfo } from 'lightning/routingService';
+import { PrivateLookupItemPickedEvent } from './events';
 
 export default class LightningFormattedLookup extends LightningElement {
     /**
@@ -181,6 +182,12 @@ export default class LightningFormattedLookup extends LightningElement {
      * @returns {undefined}
      */
     handleClick(event) {
+        this.dispatchEvent(
+            new PrivateLookupItemPickedEvent({
+                recordId: this.recordId,
+            })
+        );
+
         this.dispatcher(event);
     }
 }

package/src/lightning/formattedRichText/__docs__/formattedRichText.md

@@ -1,6 +1,6 @@
 A `lightning-formatted-rich-text` component is a read-only representation of
 rich text. Rich text refers to text that's formatted by HTML tags, such as
-`<b>` for bold text or `<u>` for underlined text. You can pass in rich text to
+`<strong>` for bold text or `<u>` for underlined text. You can pass in rich text to
 this component using the `lightning-input-rich-text` component or
 programmatically in JavaScript.
 
@@ -65,12 +65,12 @@ component returns `<div>My Title</div>`.
 
 If you set unsupported tags via JavaScript, those tags are
 removed and the text content is preserved. The supported HTML tags are: `a`,
-`abbr`, `acronym`, `address`, `b`, `br`, `big`, `blockquote`, `caption`,
+`abbr`, `acronym`, `address`, `br`, `big`, `blockquote`, `caption`,
 `cite`, `code`, `col`, `colgroup`, `del`, `div`, `dl`, `dd`, `dt`, `em`,
-`font`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `hr`, `i`, `img`, `ins`, `kbd`,
-`li`, `ol`, `mark`, `p`, `param`, `pre`, `q`, `s`, `samp`, `small`, `span`, `strong`, `sub`, `sup`,
-`table`, `tbody`, `td`, `tfoot`, `th`, `thead`, `tr`, `tt`, `u`, `ul`, `var`,
-`strike`.
+`font`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `hr`, `img`, `ins`, `kbd`,
+`li`, `ol`, `mark`, `p`, `param`, `pre`, `q`, `s`, `samp`, `small`, `span`, 
+`strong`, `sub`, `sup`, `table`, `tbody`, `td`, `tfoot`, `th`, `thead`, `tr`, 
+`tt`, `u`, `ul`, `var`, `strike`.
 
 Supported HTML attributes include: `accept`, `action`, `align`, `alt`,
 `autocomplete`, `background`, `bgcolor`, `border`, `cellpadding`,
@@ -86,7 +86,9 @@ Supported HTML attributes include: `accept`, `action`, `align`, `alt`,
 `tabindex`, `target`, `title`, `type`, `usemap`, `valign`, `value`, `width`,
 `xmlns`.
 
-We recommend using the `em` element instead of `i` to emphasize text with italic font style, and the `strong` element instead of `b` to denote importance with bold font weight. Additionally, use the `h1` to `h6` elements for headings and use `mark` to highlight text. For more information, see the [W3C recommendations](https://www.w3.org/TR/html52/textlevel-semantics.html).
+The HTML tags `b` and `i` aren't supported. This component converts the `b` tags to `strong` and `i` tags to `em` for screen reader accessibility. Other unsupported tags and attributes are removed, and only their text content is displayed. 
+
+We recommend using the `h1` to `h6` elements for headings and use `mark` to highlight text. For more information, see the [W3C recommendations](https://www.w3.org/TR/html52/textlevel-semantics.html).
 
 #### Supported Protocols
 

package/src/lightning/formattedRichText/__examples__disabled/basic/basic.html

@@ -4,7 +4,7 @@
             <lightning-formatted-rich-text value="Plain boring text"></lightning-formatted-rich-text>
         </p>
         <p>
-            <lightning-formatted-rich-text value="This &lt;i&gt;is&lt;/i&gt; some simple rich text. &lt;b&gt;Hello!&lt;/b&gt;"></lightning-formatted-rich-text>
+            <lightning-formatted-rich-text value="This &lt;em&gt;is&lt;/em&gt; some simple rich text. &lt;strong&gt;Hello!&lt;/strong&gt;"></lightning-formatted-rich-text>
         </p>
         <p>
             <lightning-formatted-rich-text value="This is a link to &lt;a href=&quot;http://www.salesforce.com&quot;&gt;Salesforce&lt;/a&gt;"></lightning-formatted-rich-text>

package/src/lightning/formattedTime/formattedTime.js

@@ -11,7 +11,8 @@ export default class FormattedTime extends LightningElement {
     set value(newValue) {
         const normalizedValue = this.normalizeInputValue(newValue);
         if (normalizedValue !== this._inputValue) {
-            const normalizedTime = normalizeISOTime(normalizedValue);
+            // formattedTime component currently always displays medium time format
+            const normalizedTime = normalizeISOTime(normalizedValue, 'medium');
 
             this._inputValue = normalizedTime.isoValue;
             this._formattedTimeValue = normalizedTime.displayValue;

package/src/lightning/groupedCombobox/groupedCombobox.html

@@ -5,7 +5,7 @@
         </template>
         {label}
     </label>
-    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
+    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
 
     <div class="slds-form-element__control">
         <div class={computedComboboxGroupClass}>

package/src/lightning/groupedCombobox/groupedCombobox.js

@@ -1,8 +1,10 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
 import labelRequired from '@salesforce/label/LightningControl.required';
+import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
+import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import { assert, synchronizeAttrs } from 'lightning/utilsPrivate';
 import {
     isEmptyString,
@@ -15,6 +17,8 @@ import {
 
 const i18n = {
     required: labelRequired,
+    helpTextAlternativeText: labelHelpTextAlternativeText,
+    placeholder: labelPlaceholder,
 };
 
 export default class LightningGroupedCombobox extends LightningElement {
@@ -27,7 +31,7 @@ export default class LightningGroupedCombobox extends LightningElement {
     // TODO: Rename to `showInputActivityIndicator`
     @api showActivityIndicator = false;
     @api showDropdownActivityIndicator = false;
-    @api placeholder = 'Select an Item';
+    @api placeholder = i18n.placeholder;
 
     // Validity related message
     @api messageWhenValueMissing = i18n.required;
@@ -418,4 +422,8 @@ export default class LightningGroupedCombobox extends LightningElement {
             for: this._filterInputId,
         });
     }
+
+    get helptextAlternativeText() {
+        return formatLabel(i18n.helpTextAlternativeText, this.label);
+    }
 }

package/src/lightning/helptext/helptext.html

@@ -9,6 +9,7 @@
                 variant="bare">
             </lightning-primitive-icon>
             <span class="slds-assistive-text">{alternativeText}</span>
+            <span class="slds-assistive-text desc" id={describedByID} aria-hidden="true">{content}</span>
         </button>
     </div>
 </template>