lightning-base-components 1.21.0-alpha → 1.21.1-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.21.0-alpha",
+    "version": "1.21.1-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -454,6 +454,14 @@
                 "name": "@salesforce/label/LightningDualListbox.movedOptionsPlural",
                 "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js"
             },
+            {
+                "name": "@salesforce/label/LightningDualListbox.verticallyMovedOptions",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.verticallyMovedOptions.js"
+            },
+            {
+                "name": "@salesforce/label/LightningDualListbox.moveToAssistiveText",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.moveToAssistiveText.js"
+            },
             {
                 "name": "@salesforce/label/LightningProgressIndicator.stageComplete",
                 "path": "scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js"

package/scopedImports/@salesforce-label-LightningCombobox.currentSelection.js

@@ -1 +1 @@
-export default 'Current Selection:';
+export default '{0} - Current selection: {1}';

package/scopedImports/@salesforce-label-LightningDualListbox.moveToAssistiveText.js

@@ -0,0 +1 @@
+export default 'Move to {0}';

package/scopedImports/@salesforce-label-LightningDualListbox.verticallyMovedOptions.js

@@ -0,0 +1 @@
+export default '{0} moved to position {1}';

package/src/lightning/baseCombobox/baseCombobox.js

@@ -3,10 +3,11 @@ import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.des
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
+import labelCurrentSelection from '@salesforce/label/LightningCombobox.currentSelection';
 import { api, track, LightningElement } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     computeAriaInvalid,
@@ -580,7 +581,7 @@ export default class LightningBaseCombobox extends LightningElement {
             return value;
         }
 
-        return `${label} - Current selection: ${value}`;
+        return formatLabel(labelCurrentSelection, label, value);
     }
 
     handleListboxScroll(event) {

package/src/lightning/dualListbox/dualListbox.html

@@ -34,10 +34,10 @@
                 </div>
                 <div class="slds-dueling-list__column">
                     <lightning-button-icon icon-name="utility:right" variant="container" onclick={handleRightButtonClick} disabled={moveButtonsDisabled}
-                        title={addButtonLabel} alternative-text={addButtonLabel}>
+                        title={addButtonLabel} alternative-text={addButtonLabel} tooltip={addButtonDescription}>
                     </lightning-button-icon>
                     <lightning-button-icon icon-name="utility:left" variant="container" onclick={handleLeftButtonClick} disabled={moveButtonsDisabled}
-                        title={removeButtonLabel} alternative-text={removeButtonLabel}>
+                        title={removeButtonLabel} alternative-text={removeButtonLabel} tooltip={removeButtonDescription}>
                     </lightning-button-icon>
                 </div>
                 <div class="slds-dueling-list__column slds-dueling-list__column_responsive">

package/src/lightning/dualListbox/dualListbox.js

@@ -13,9 +13,11 @@ import labelRequiredError from '@salesforce/label/LightningDualListbox.requiredE
 import labelRequiredOptionError from '@salesforce/label/LightningDualListbox.requiredOptionError';
 import labelUpButtonAssistiveText from '@salesforce/label/LightningDualListbox.upButtonAssistiveText';
 import labelMoveSelectionToAssistiveText from '@salesforce/label/LightningDualListbox.moveSelectionToAssistiveText';
+import labelMoveToAssistiveText from '@salesforce/label/LightningDualListbox.moveToAssistiveText';
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
+import labelVerticallyMovedOptionsText from '@salesforce/label/LightningDualListbox.verticallyMovedOptions';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
@@ -50,10 +52,12 @@ const i18n = {
     requiredOptionError: labelRequiredOptionError,
     upButtonAssistiveText: labelUpButtonAssistiveText,
     moveSelectionToAssistiveText: labelMoveSelectionToAssistiveText,
+    moveToAssistiveText: labelMoveToAssistiveText,
     loadingText: labelLoadingText,
     movedOptionsSingular: labelMovedOptionsSingular,
     movedOptionsPlural: labelMovedOptionsPlural,
     helpTextAlternativeText: labelHelpTextAlternativeText,
+    verticallyMovedOptionsText: labelVerticallyMovedOptionsText,
 };
 
 /**
@@ -584,12 +588,25 @@ export default class LightningDualListbox extends LightningElement {
      * @type {string}
      * @default Move selection to {selectedLabel}
      */
+    get addButtonDescription() {
+        return this.getRightButtonAssistiveText();
+    }
+
+    getRightButtonAssistiveLabel() {
+        return formatLabel(i18n.moveToAssistiveText, this.selectedLabel);
+    }
+
+    /**
+     * Label for add button.
+     * @type {string}
+     * @default Move to {selectedLabel}
+     */
     @api
     get addButtonLabel() {
         if (this._addButtonLabel) {
             return this._addButtonLabel;
         }
-        return this.getRightButtonAssistiveText();
+        return this.getRightButtonAssistiveLabel();
     }
 
     set addButtonLabel(value) {
@@ -600,6 +617,19 @@ export default class LightningDualListbox extends LightningElement {
         return formatLabel(i18n.moveSelectionToAssistiveText, this.sourceLabel);
     }
 
+    /**
+     * Label for remove button.
+     * @type {string}
+     * @default "Move Selection to {sourceLabel}"
+     */
+    get removeButtonDescription() {
+        return this.getLeftButtonAssistiveText();
+    }
+
+    getLeftButtonAssistiveLabel() {
+        return formatLabel(i18n.moveToAssistiveText, this.sourceLabel);
+    }
+
     /**
      * Label for remove button.
      * @type {string}
@@ -610,7 +640,7 @@ export default class LightningDualListbox extends LightningElement {
         if (this._removeButtonLabel) {
             return this._removeButtonLabel;
         }
-        return this.getLeftButtonAssistiveText();
+        return this.getLeftButtonAssistiveLabel();
     }
 
     set removeButtonLabel(value) {
@@ -817,6 +847,7 @@ export default class LightningDualListbox extends LightningElement {
         this.updateFocusableOption(this.selectedList, toMove[0]);
         this.optionToFocus = null;
         this.dispatchChangeEvent(values);
+        this.selectedUpDownMovedOptions();
     }
 
     selectAllFromLastSelectedToOption(option, all) {
@@ -1098,4 +1129,27 @@ export default class LightningDualListbox extends LightningElement {
     get helptextAlternativeText() {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }
+
+    selectedUpDownMovedOptions() {
+        let strMessage = [];
+        for (let i = 0; i < this.computedSelectedList.length; i++) {
+            const highlightedOption = this.highlightedOptions.indexOf(
+                this.computedSelectedList[i].value
+            );
+            if (highlightedOption !== -1) {
+                strMessage.push(
+                    formatLabel(
+                        i18n.verticallyMovedOptionsText,
+                        this.computedSelectedList[i].label,
+                        i + 1
+                    )
+                );
+            }
+        }
+        if (strMessage.length === 0) {
+            this._messageToDisplay = '';
+        } else {
+            this._messageToDisplay = strMessage.join(', ');
+        }
+    }
 }

package/src/lightning/menuDivider/menuDivider.js

@@ -10,6 +10,7 @@ export default class LightningMenuDivider extends LightningElement {
 
     connectedCallback() {
         this.setAttribute('role', 'separator');
+        this.setAttribute('aria-hidden', 'true');
     }
 
     /**