lightning-base-components 1.15.1-alpha → 1.15.4-alpha

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}>
@@ -57,7 +57,8 @@
                 onendreached={handleEndReached}
                 ondropdownopen={handleDropdownOpen}
                 ondropdownopenrequest={handleDropdownOpenRequest}
-                onselect={handleSelect}>
+                onselect={handleSelect}
+                disable-default-highlight={disableDefaultHighlight}>
             </lightning-base-combobox>
         </div>
         <template if:true={_hasPills}>

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;
@@ -45,6 +49,14 @@ export default class LightningGroupedCombobox extends LightningElement {
     @api filterItems;
     @api filterInputText;
 
+    /**
+     * Whether disable the highlighting default item behavior
+     *
+     * @type {boolean}
+     * @memberof LightningGroupedCombobox
+     */
+    @api disableDefaultHighlight;
+
     @track _pills;
 
     @track _variant;
@@ -378,9 +390,15 @@ export default class LightningGroupedCombobox extends LightningElement {
                     // eslint-disable-next-line @lwc/lwc/no-async-operation
                     requestAnimationFrame(() => {
                         if (this._connected) {
-                            this.template.querySelector(
+                            // If a new pill has been added but the markup-conditional hasn't had a chance to
+                            // initialize the pill container, and causes a null gack. Adding a quick safety
+                            // check here to avoid this case
+                            const pillContainer = this.template.querySelector(
                                 'lightning-pill-container'
-                            ).scrollTop = 0;
+                            );
+                            if (pillContainer) {
+                                pillContainer.scrollTop = 0;
+                            }
                         }
                     });
                 }
@@ -404,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>

package/src/lightning/helptext/helptext.js

@@ -1,13 +1,17 @@
 import labelButtonAlternativeText from '@salesforce/label/LightningHelptext.buttonAlternativeText';
 import { LightningElement, api, track } from 'lwc';
 import { isValidName } from 'lightning/iconUtils';
-import { normalizeString } from 'lightning/utilsPrivate';
+import { normalizeString, getRealDOMId } from 'lightning/utilsPrivate';
 import { classSet } from 'lightning/utils';
-import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
+import { Tooltip, TooltipType, BUBBLE_PREFIX } from 'lightning/tooltipLibrary';
 
 const DEFAULT_BUTTON_ALT_TEXT = labelButtonAlternativeText;
 const DEFAULT_ICON_NAME = 'utility:info';
 const DEFAULT_ICON_VARIANT = 'bare';
+const SELECTORS = {
+    BUTTON: 'button',
+    DESCRIPTION: '.desc',
+};
 
 /**
  * An icon with a text popover used for tooltips.
@@ -146,6 +150,7 @@ export default class LightningHelptext extends LightningElement {
     renderedCallback() {
         if (this._tooltip && !this._tooltip.initialized) {
             this._tooltip.initialize();
+            this.overrideDescribedBy();
         }
     }
 
@@ -168,4 +173,26 @@ export default class LightningHelptext extends LightningElement {
         }
         return classes.toString();
     }
+
+    /**
+     * override the aria-describedby to link to the DOM element present
+     * inside the helptext button. We are doing this because, screen readers
+     * can't read tooltip content which is present outside modal.
+     */
+    overrideDescribedBy() {
+        const domId = getRealDOMId(
+            this.template.querySelector(SELECTORS.DESCRIPTION)
+        );
+        this.template
+            .querySelector(SELECTORS.BUTTON)
+            .setAttribute('aria-describedby', domId);
+    }
+
+    /**
+     * use the bubble prefix format from tooltip library
+     * @returns {*}
+     */
+    get describedByID() {
+        return BUBBLE_PREFIX;
+    }
 }