lightning-base-components 1.27.2-alpha → 1.27.5-alpha

package/src/lightning/dualListbox/{dualListbox.js → dualListbox.ts}

@@ -1,9 +1,5 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
 import labelComponentAssistiveText from '@salesforce/label/LightningDualListbox.componentAssistiveText';
+import labelComponentAssistiveTextTypeahead from '@salesforce/label/LightningDualListbox.componentAssistiveTextTypeahead';
 import labelDownButtonAssistiveText from '@salesforce/label/LightningDualListbox.downButtonAssistiveText';
 import labelMaxError from '@salesforce/label/LightningDualListbox.maxError';
 import labelMaxHelp from '@salesforce/label/LightningDualListbox.maxHelp';
@@ -35,20 +31,32 @@ import {
     getRealDOMId,
     classListMutation,
     reflectAttribute,
-    isCSR,
-    privateContext,
 } from 'lightning/utilsPrivate';
+import { privateContext } from 'lightning/utilsInternal';
 import {
     InteractingState,
     FieldConstraintApi,
     normalizeVariant,
     VARIANT,
 } from 'lightning/inputUtils';
+import type { KeyboardInterface } from './keyboard';
 
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const { setContext, assertContext } = privateContext;
+interface Option {
+    label: string;
+    value: string;
+    isSelected?: boolean;
+    isLocked?: boolean;
+    draggable?: boolean;
+    tabIndex?: string;
+    selected?: string;
+    classList?: string;
+}
 
 const i18n = {
     componentAssistiveText: labelComponentAssistiveText,
+    componentAssistiveTextTypeahead: labelComponentAssistiveTextTypeahead,
     downButtonAssistiveText: labelDownButtonAssistiveText,
     maxError: labelMaxError,
     maxHelp: labelMaxHelp,
@@ -82,66 +90,66 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {string}
      * @required
      */
-    @api sourceLabel;
+    @api sourceLabel: string;
 
     /**
      * Label for the selected options listbox.
      * @type {string}
      * @required
      */
-    @api selectedLabel;
+    @api selectedLabel: string;
 
     /**
      * Label for the dual listbox.
      * @type {string}
      * @required
      */
-    @api label;
+    @api label: string;
 
     /**
      * A list of options that are available for selection. Each option has the following attributes: label and value.
      * @type {object[]}
      * @required
      */
-    @api options;
+    @api options: Option[];
 
     /**
      * Minimum number of options required in the selected options listbox.
      * @type {number}
      */
-    @api min = 0;
+    @api min: number = 0;
 
     /**
      * Maximum number of options allowed in the selected options listbox.
      * @type {number}
      */
-    @api max;
+    @api max: number;
 
     // inputable interface attributes
     /**
      * Specifies the name of an input element.
      * @type {string}
      */
-    @api name;
+    @api name: string;
 
     _showActivityIndicator = false;
-    @track _requiredOptions = [];
-    @track _selectedValues = [];
-    _variant;
-    _disabled;
-    _disableReordering = false;
-    _required = false;
-    _addButtonLabel;
-    _removeButtonLabel;
-    _upButtonLabel;
-    _downButtonLabel;
-    _size;
+    @track _requiredOptions: string[] = [];
+    @track _selectedValues: string[] = [];
+    @track _variant: string;
+    @track _disabled: boolean;
+    _disableReordering: boolean = false;
+    _required: boolean = false;
+    @track _addButtonLabel: string;
+    @track _removeButtonLabel: string;
+    @track _upButtonLabel: string;
+    @track _downButtonLabel: string;
+    @track _size: number;
     errorMessage = '';
-    @track highlightedOptions = [];
-    focusableInSource;
-    focusableInSelected;
-    @track highlightedOptionsLabel = [];
-
+    @track highlightedOptions: string[] = [];
+    @track focusableInSource: string;
+    @track focusableInSelected: string;
+    @track highlightedOptionsLabel: string[] = [];
+    _isFocused = false;
     _messageToDisplay = '';
 
     isFocusOnList = false;
@@ -150,18 +158,31 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * Error message to be displayed when the value is missing and input is required.
      * @type {string}
      */
-    @api messageWhenValueMissing = i18n.requiredError;
+    @api messageWhenValueMissing: string = i18n.requiredError;
+
+    _messageWhenRangeOverflow: string;
+    _messageWhenRangeUnderflow: string;
+    _connected: boolean;
+    keyboardInterface: KeyboardInterface;
+    interactingState: InteractingState;
+    optionToFocus: string;
+    uniqueId: string;
+    shiftIndex: number;
+    selectedList: string;
+    lastSelected: number;
+    _constraintApi: FieldConstraintApi;
+    lastShift: boolean;
 
     /**
      * Error message to be displayed when a range overflow is detected.
      * @type {string}
      */
     @api
-    get messageWhenRangeOverflow() {
+    get messageWhenRangeOverflow(): string {
         return this._messageWhenRangeOverflow || this._overflowMessage;
     }
 
-    set messageWhenRangeOverflow(message) {
+    set messageWhenRangeOverflow(message: string) {
         this._messageWhenRangeOverflow = message;
     }
 
@@ -170,11 +191,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {string}
      */
     @api
-    get messageWhenRangeUnderflow() {
+    get messageWhenRangeUnderflow(): string {
         return this._messageWhenRangeUnderflow || this._underflowMessage;
     }
 
-    set messageWhenRangeUnderflow(message) {
+    set messageWhenRangeUnderflow(message: string) {
         this._messageWhenRangeUnderflow = message;
     }
 
@@ -183,11 +204,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {string}
      */
     @api
-    get disabled() {
+    get disabled(): boolean {
         return this._disabled || false;
     }
 
-    set disabled(value) {
+    set disabled(value: unknown) {
         this._disabled = normalizeBoolean(value);
     }
 
@@ -197,11 +218,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default false
      */
     @api
-    get required() {
+    get required(): boolean {
         return this._required;
     }
 
-    set required(value) {
+    set required(value: unknown) {
         this._required = normalizeBoolean(value);
     }
 
@@ -210,11 +231,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {list}
      */
     @api
-    get value() {
+    get value(): string[] {
         return this._selectedValues;
     }
 
-    set value(newValue) {
+    set value(newValue: string[]) {
         this.updateHighlightedOptions(newValue);
         this._selectedValues = newValue || [];
         if (this._connected) {
@@ -227,11 +248,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {list}
      */
     @api
-    get requiredOptions() {
+    get requiredOptions(): string[] {
         return this._requiredOptions;
     }
 
-    set requiredOptions(newValue) {
+    set requiredOptions(newValue: string[]) {
         this._requiredOptions = newValue || [];
         if (this._connected) {
             this.addRequiredOptionsToValue();
@@ -248,11 +269,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {string}
      */
     @api
-    get variant() {
+    get variant(): string {
         return this._variant || VARIANT.STANDARD;
     }
 
-    set variant(value) {
+    set variant(value: unknown) {
         this._variant = normalizeVariant(value);
         this.updateClassList();
         reflectAttribute(this, 'variant', this._variant);
@@ -264,10 +285,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default
      */
     @api
-    get size() {
+    get size(): number {
         return this._size;
     }
-    set size(value) {
+
+    set size(value: number) {
         this._size = value;
     }
 
@@ -275,7 +297,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * Help text detailing the purpose and function of the dual listbox.
      * @type {string}
      */
-    @api fieldLevelHelp;
+    @api fieldLevelHelp: string;
 
     /**
      * If present, the Up and Down buttons used for reordering the selected list items are hidden.
@@ -283,11 +305,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default false
      */
     @api
-    get disableReordering() {
+    get disableReordering(): boolean {
         return this._disableReordering;
     }
 
-    set disableReordering(value) {
+    set disableReordering(value: unknown) {
         this._disableReordering = normalizeBoolean(value);
     }
 
@@ -297,11 +319,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default false
      */
     @api
-    get showActivityIndicator() {
+    get showActivityIndicator(): boolean {
         return this._showActivityIndicator;
     }
 
-    set showActivityIndicator(value) {
+    set showActivityIndicator(value: unknown) {
         this._showActivityIndicator = normalizeBoolean(value);
     }
 
@@ -310,14 +332,14 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * If the source list doesn't contain any options, the first option on the selected list is focused on.
      */
     @api
-    focus() {
+    focus(): void {
         // focus on the first option from either list
         // if nothing on source, then it'll pick the one on selected
-        const firstOption = isCSR
+        const firstOption = !import.meta.env.SSR
             ? this.template.querySelector(`div[data-index='0']`)
             : null;
         if (firstOption) {
-            firstOption.focus();
+            (firstOption as HTMLElement).focus();
             this.updateSelectedOptions(firstOption, true, false);
         }
     }
@@ -327,7 +349,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {object}
      */
     @api
-    get validity() {
+    get validity(): ValidityState {
         return this._constraint.validity;
     }
 
@@ -336,7 +358,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @returns {boolean} Indicates whether the dual listbox meets all constraint validations.
      */
     @api
-    checkValidity() {
+    checkValidity(): boolean {
         return this._constraint.checkValidity();
     }
 
@@ -346,7 +368,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @returns {boolean} - The validity status of the input fields.
      */
     @api
-    reportValidity() {
+    reportValidity(): boolean {
         return this._constraint.reportValidity((message) => {
             this.errorMessage = message;
         });
@@ -358,7 +380,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      *     is reset.
      */
     @api
-    setCustomValidity(message) {
+    setCustomValidity(message: string): void {
         this._constraint.setCustomValidity(message);
     }
 
@@ -366,7 +388,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * Displays an error message if the dual listbox value is required.
      */
     @api
-    showHelpMessageIfInvalid() {
+    showHelpMessageIfInvalid(): void {
         this.reportValidity();
     }
 
@@ -375,9 +397,10 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         setContext(this);
     }
 
-    connectedCallback() {
+    connectedCallback(): void {
         assertContext(this);
         super.connectedCallback();
+        // eslint-disable-next-line @lwc/lwc/ssr-no-host-mutation-in-connected-callback
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.keyboardInterface = this.selectKeyboardInterface();
@@ -390,22 +413,26 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
             debounceInteraction: true,
         });
         this.interactingState.onenter(() => {
-            if (isCSR) {
+            if (!import.meta.env.SSR) {
                 this.dispatchEvent(new CustomEvent('focus'));
             }
         });
         this.interactingState.onleave(() => {
             this.showHelpMessageIfInvalid();
-            if (isCSR) {
+            if (!import.meta.env.SSR) {
                 this.dispatchEvent(new CustomEvent('blur'));
             }
 
             // reset the optionToFocus otherwise dualListbox will steal the focus any time it's rerendered.
-            this.optionToFocus = null;
+            const { enableDualListboxA11yReqOptionErrFix: enableFocusFix } =
+                features;
+            if ((enableFocusFix && !this._isFocused) || !enableFocusFix) {
+                this.optionToFocus = null;
+            }
         });
     }
 
-    updateClassList() {
+    updateClassList(): void {
         classListMutation(this.classList, {
             'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
             'slds-form-element_horizontal':
@@ -413,7 +440,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         });
     }
 
-    renderedCallback() {
+    renderedCallback(): void {
         this.assertRequiredAttributes();
         if (this.disabled) {
             return;
@@ -421,44 +448,59 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
 
         if (this.optionToFocus) {
             // value could have an apostrophe, which is why we need to escape it otherwise the queryselector will not work
-            const option = isCSR
+            const option = !import.meta.env.SSR
                 ? this.template.querySelector(
-                      `div[data-value='${this.optionToFocus.replace(
-                          /'/g,
-                          "\\'"
-                      )}']`
-                  )
+                    `div[data-value='${this.optionToFocus.replace(
+                        /'/g,
+                        "\\'"
+                    )}']`
+                )
                 : null;
             if (option) {
                 this.isFocusOnList = true;
-                option.focus();
+                (option as HTMLElement).focus();
             }
         }
     }
 
-    get computedUniqueId() {
+    get computedA11yAriaLiveKbText() {
+        return !import.meta.env.SSR &&
+            features.enableDualListboxSingleCharTypeahead
+            ? `${i18n.componentAssistiveText} ${i18n.componentAssistiveTextTypeahead}`
+            : i18n.componentAssistiveText;
+    }
+
+    get computedUniqueId(): string {
         return this.uniqueId;
     }
 
-    get computedSourceListId() {
-        return isCSR
-            ? getRealDOMId(this.template.querySelector('[data-source-list]'))
+    get computedSourceListId(): string {
+        return !import.meta.env.SSR
+            ? getRealDOMId(
+                this.template.querySelector(
+                    '[data-source-list]'
+                ) as HTMLElement
+            )
             : 'source-list';
     }
 
-    get computedSelectedListId() {
-        return isCSR
-            ? getRealDOMId(this.template.querySelector('[data-selected-list]'))
+    get computedSelectedListId(): string {
+        return !import.meta.env.SSR
+            ? getRealDOMId(
+                this.template.querySelector(
+                    '[data-selected-list]'
+                ) as HTMLElement
+            )
             : 'selected-list';
     }
 
-    get ariaDisabled() {
+    get ariaDisabled(): string {
         // aria-disabled works only with String not Boolean value
         return String(this.disabled);
     }
 
-    get computedSourceList() {
-        let sourceListOptions = [];
+    get computedSourceList(): Option[] {
+        let sourceListOptions: Option[] = [];
         if (this.options) {
             const required = this.requiredOptions;
             const values = this.value;
@@ -475,10 +517,10 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         );
     }
 
-    get computedSelectedList() {
-        const selectedListOptions = [];
+    get computedSelectedList(): Option[] {
+        const selectedListOptions: Option[] = [];
         if (this.options) {
-            const optionsMap = {};
+            const optionsMap: { [key: string]: Option } = {};
             this.options.forEach((option) => {
                 optionsMap[option.value] = { ...option };
             });
@@ -511,17 +553,20 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         );
     }
 
-    isOptionDisabled(elm) {
+    isOptionDisabled(elm: Element | null): boolean {
         return !!(elm?.getAttribute('aria-disabled') === 'true');
     }
 
-    isOptionRequiredOrLocked(option) {
+    isOptionRequiredOrLocked(option: Option): boolean {
         return !!(
             this.requiredOptions.includes(option.value) || option.isLocked
         );
     }
 
-    computeListOptions(options, focusableOptionValue) {
+    computeListOptions(
+        options: Option[],
+        focusableOptionValue: string
+    ): Option[] {
         if (options.length > 0) {
             const focusableOption = options.find((option) => {
                 return (
@@ -546,7 +591,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         return [];
     }
 
-    computeOptionProperties(option, focusableValue) {
+    computeOptionProperties(option: Option, focusableValue?: string): Option {
         const isSelected = this.highlightedOptions.indexOf(option.value) > -1;
         const classList = classSet(
             'slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline'
@@ -563,7 +608,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         };
     }
 
-    get computedLeftColumnClass() {
+    get computedLeftColumnClass(): string {
         return classSet(
             'slds-dueling-list__column slds-dueling-list__column_responsive'
         )
@@ -571,32 +616,32 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
             .toString();
     }
 
-    get computedColumnStyle() {
+    get computedColumnStyle(): string {
         if (this.isNumber(this.size)) {
             // From the SLDS page on how to adjust the height: lightningdesignsystem.com/components/dueling-picklist/#Responsive
-            const newHeight = parseInt(this.size, 10) * 2.25 + 1;
+            const newHeight = (parseInt(this.size as unknown as string, 10) * 2.25) + 1;
             return `height:${newHeight}rem`;
         }
         return '';
     }
 
-    get isLabelHidden() {
+    get isLabelHidden(): boolean {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
 
-    get computedGroupLabelClass() {
+    get computedGroupLabelClass(): string {
         return classSet('slds-form-element__label slds-form-element__legend')
             .add({ 'slds-assistive-text': this.isLabelHidden })
             .toString();
     }
 
-    get computedListboxContainerClass() {
+    get computedListboxContainerClass(): string {
         return classSet('slds-dueling-list__options')
             .add({ 'slds-is-disabled': this.disabled })
             .toString();
     }
 
-    get computedLockAssistiveText() {
+    get computedLockAssistiveText(): string {
         return formatLabel(
             this.i18n.optionLockAssistiveText,
             this.selectedLabel
@@ -607,7 +652,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         return i18n;
     }
 
-    getRightButtonAssistiveText() {
+    getRightButtonAssistiveText(): string {
         return formatLabel(
             i18n.moveSelectionToAssistiveText,
             this.selectedLabel
@@ -619,11 +664,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {string}
      * @default Move selection to {selectedLabel}
      */
-    get addButtonDescription() {
+    get addButtonDescription(): string {
         return this.getRightButtonAssistiveText();
     }
 
-    getRightButtonAssistiveLabel() {
+    getRightButtonAssistiveLabel(): string {
         return formatLabel(i18n.moveToAssistiveText, this.selectedLabel);
     }
 
@@ -633,18 +678,21 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default Move to {selectedLabel}
      */
     @api
-    get addButtonLabel() {
+    get addButtonLabel(): string {
         if (this._addButtonLabel) {
             return this._addButtonLabel;
         }
+        if (features.enableNoDescribedbyTooltip) {
+            return this.addButtonDescription;
+        }
         return this.getRightButtonAssistiveLabel();
     }
 
-    set addButtonLabel(value) {
+    set addButtonLabel(value: string) {
         this._addButtonLabel = value;
     }
 
-    getLeftButtonAssistiveText() {
+    getLeftButtonAssistiveText(): string {
         return formatLabel(i18n.moveSelectionToAssistiveText, this.sourceLabel);
     }
 
@@ -653,11 +701,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @type {string}
      * @default "Move Selection to {sourceLabel}"
      */
-    get removeButtonDescription() {
+    get removeButtonDescription(): string {
         return this.getLeftButtonAssistiveText();
     }
 
-    getLeftButtonAssistiveLabel() {
+    getLeftButtonAssistiveLabel(): string {
         return formatLabel(i18n.moveToAssistiveText, this.sourceLabel);
     }
 
@@ -667,14 +715,17 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default "Move selection to {sourceLabel}"
      */
     @api
-    get removeButtonLabel() {
+    get removeButtonLabel(): string {
         if (this._removeButtonLabel) {
             return this._removeButtonLabel;
         }
+        if (features.enableNoDescribedbyTooltip) {
+            return this.removeButtonDescription;
+        }
         return this.getLeftButtonAssistiveLabel();
     }
 
-    set removeButtonLabel(value) {
+    set removeButtonLabel(value: string) {
         this._removeButtonLabel = value;
     }
 
@@ -684,11 +735,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default "Move selection up"
      */
     @api
-    get upButtonLabel() {
+    get upButtonLabel(): string {
         return this._upButtonLabel || this.i18n.upButtonAssistiveText;
     }
 
-    set upButtonLabel(value) {
+    set upButtonLabel(value: string) {
         this._upButtonLabel = value;
     }
 
@@ -698,25 +749,28 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      * @default "Move selection down"
      */
     @api
-    get downButtonLabel() {
+    get downButtonLabel(): string {
         return this._downButtonLabel || this.i18n.downButtonAssistiveText;
     }
 
-    set downButtonLabel(value) {
+    set downButtonLabel(value: string) {
         this._downButtonLabel = value;
     }
 
-    get moveButtonsDisabled() {
+    get moveButtonsDisabled(): boolean {
         return this.disabled || this.showActivityIndicator;
     }
 
-    handleOptionClick(event) {
+    handleOptionClick(event: MouseEvent): void {
         this.interactingState.interacting();
-        if (this.disabled || this.isOptionDisabled(event.currentTarget)) {
+        if (
+            this.disabled ||
+            this.isOptionDisabled(event.currentTarget as HTMLElement)
+        ) {
             return;
         }
         const selectMultiple = event.metaKey || event.ctrlKey || event.shiftKey;
-        const option = event.currentTarget;
+        const option = event.currentTarget as HTMLElement;
         if (event.shiftKey) {
             this.selectAllFromLastSelectedToOption(option, false);
             return;
@@ -727,11 +781,14 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         this.shiftIndex = -1;
     }
 
-    handleFocus(event) {
+    handleFocus(event: FocusEvent): void {
+        if (features.enableDualListboxA11yReqOptionErrFix) {
+            this._isFocused = true;
+        }
         this.interactingState.enter();
 
         // select the focused option if entering a listbox
-        const element = event.target;
+        const element = event.target as HTMLElement;
         if (element.role === 'option') {
             if (!this.isFocusOnList) {
                 this.isFocusOnList = true;
@@ -740,36 +797,39 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         }
     }
 
-    handleBlur(event) {
+    handleBlur(event: FocusEvent): void {
+        if (features.enableDualListboxA11yReqOptionErrFix) {
+            this._isFocused = false;
+        }
         this.interactingState.leave();
 
-        const element = event.target;
+        const element = event.target as HTMLElement;
         if (element.role !== 'option') {
             this.isFocusOnList = false;
         }
     }
 
-    handleRightButtonClick() {
+    handleRightButtonClick(): void {
         this.interactingState.interacting();
         this.moveOptionsBetweenLists(true);
     }
 
-    handleLeftButtonClick() {
+    handleLeftButtonClick(): void {
         this.interactingState.interacting();
         this.moveOptionsBetweenLists(false);
     }
 
-    handleUpButtonClick() {
+    handleUpButtonClick(): void {
         this.interactingState.interacting();
         this.changeOrderOfOptionsInList(true);
     }
 
-    handleDownButtonClick() {
+    handleDownButtonClick(): void {
         this.interactingState.interacting();
         this.changeOrderOfOptionsInList(false);
     }
 
-    handleOptionKeyDown(event) {
+    handleOptionKeyDown(event: KeyboardEvent): void {
         this.interactingState.interacting();
         if (this.disabled) {
             return;
@@ -777,7 +837,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         handleKeyDownOnOption(event, this.keyboardInterface);
     }
 
-    moveOptionsBetweenLists(addToSelect, retainFocus) {
+    moveOptionsBetweenLists(addToSelect: boolean, retainFocus?: boolean): void {
         const isValidList = addToSelect
             ? this.selectedList === this.computedSourceListId
             : this.selectedList === this.computedSelectedListId;
@@ -787,7 +847,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         const toMove = this.highlightedOptions;
         const values = this.computedSelectedList.map((option) => option.value);
         const required = this.requiredOptions;
-        let newValues = [];
+        let newValues: string[] = [];
         if (addToSelect) {
             newValues = values.concat(toMove);
         } else {
@@ -814,7 +874,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
             this._selectedValues = oldSelectedValues;
             return;
         }
-        /*W-16561268
+        /* W-16561268
      When a listbox requires at least one selected item on the right side, attempting to move an item might not produce any visible change.
      However, the screen reader announces, "Item <name> moved to <left side list>." This occurs because the _messageToDisplay is calculated before verifying if the move is valid. To resolve this,
      we should eliminate the _messageToDisplay computation from the movedOptions function and relocate this logic. */
@@ -849,8 +909,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         this.dispatchChangeEvent(newValues);
     }
 
-    changeOrderOfOptionsInList(moveUp) {
-        const elementList = this.getElementsOfList(this.selectedList);
+    changeOrderOfOptionsInList(moveUp: boolean): void {
         const values = this.computedSelectedList.map((option) => option.value);
         const toMove = values.filter(
             (option) => this.highlightedOptions.indexOf(option) > -1
@@ -883,21 +942,13 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         if (moveUp) {
             while (start < toMove.length) {
                 index = values.indexOf(toMove[start]);
-                if (features.ENABLE_ASSERT_CONTEXT) {
-                    indexSwap(index, index - 1, values);
-                } else {
-                    this.swapOptions(index, index - 1, values, elementList);
-                }
+                indexSwap(index, index - 1, values);
                 start++;
             }
         } else {
             while (start > -1) {
                 index = values.indexOf(toMove[start]);
-                if (features.ENABLE_ASSERT_CONTEXT) {
-                    indexSwap(index, index + 1, values);
-                } else {
-                    this.swapOptions(index, index + 1, values, elementList);
-                }
+                indexSwap(index, index + 1, values);
                 start--;
             }
         }
@@ -909,14 +960,14 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         this.selectedUpDownMovedOptions();
     }
 
-    selectAllFromLastSelectedToOption(option, all) {
+    selectAllFromLastSelectedToOption(option: HTMLElement, all: boolean): void {
         const listId = option.getAttribute('data-type');
         this.updateCurrentSelectedList(listId, true);
         const options = this.getElementsOfList(listId);
         const end = all ? 0 : this.getOptionIndex(option);
         this.lastSelected = this.lastSelected < 0 ? end : this.lastSelected;
         const start = all ? options.length : this.lastSelected;
-        let val, select;
+        let val: string, select: boolean;
         this.highlightedOptions = [];
         this.highlightedOptionsLabel = [];
         for (let i = 0; i < options.length; i++) {
@@ -928,7 +979,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         }
     }
 
-    updateSelectedOptions(option, select, isMultiple) {
+    updateSelectedOptions(
+        option: Element,
+        select: boolean,
+        isMultiple: boolean
+    ): void {
         if (this.isOptionDisabled(option)) {
             return;
         }
@@ -967,7 +1022,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         this.lastSelected = optionIndex;
     }
 
-    addRequiredOptionsToValue() {
+    addRequiredOptionsToValue(): void {
         if (
             !this.options ||
             !this.options.length ||
@@ -1012,14 +1067,14 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         return this._constraintApi;
     }
 
-    get _overflowMessage() {
+    get _overflowMessage(): string {
         const minHelpMsg =
             this.min > 0 ? formatLabel(this.i18n.minHelp, this.min) : '';
 
         return formatLabel(this.i18n.maxError, this.max) + minHelpMsg;
     }
 
-    get _underflowMessage() {
+    get _underflowMessage(): string {
         const maxHelpMsg = this.max
             ? formatLabel(this.i18n.maxHelp, this.max)
             : '';
@@ -1037,7 +1092,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
             : minError + maxHelpMsg;
     }
 
-    updateCurrentSelectedList(currentList, isMultiple) {
+    updateCurrentSelectedList(currentList: string, isMultiple: boolean): void {
         if (this.selectedList !== currentList || !isMultiple) {
             if (this.selectedList) {
                 this.highlightedOptions = [];
@@ -1048,8 +1103,8 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         }
     }
 
-    dispatchChangeEvent(values) {
-        if (isCSR) {
+    dispatchChangeEvent(values: string[]): void {
+        if (!import.meta.env.SSR) {
             // the change event needs to propagate to elements outside of the light-DOM, hence making it composed.
             this.dispatchEvent(
                 new CustomEvent('change', {
@@ -1061,7 +1116,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         }
     }
 
-    assertRequiredAttributes() {
+    assertRequiredAttributes(): void {
         assert(
             !!this.label,
             `<lightning-dual-listbox> Missing required "label" attribute.`
@@ -1080,24 +1135,17 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         );
     }
 
-    // eslint-disable-next-line consistent-return
-    swapOptions(i, j, array) {
-        if (features.ENABLE_ASSERT_CONTEXT) {
-            return undefined;
-        }
-        const temp = array[i];
-        array[i] = array[j];
-        array[j] = temp;
-    }
-
-    getElementsOfList(listId) {
-        const elements = isCSR
-            ? this.template.querySelectorAll(`div[data-type='${listId}']`)
+    getElementsOfList(listId: string): HTMLElement[] {
+        const elements = !import.meta.env.SSR
+            ? (this.template.querySelectorAll(
+                `div[data-type='${listId}']`
+            ) as unknown as HTMLElement[])
             : null;
         return elements ? elements : [];
     }
 
     selectKeyboardInterface() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const that = this;
         that.shiftIndex = -1;
         that.lastShift = null;
@@ -1105,39 +1153,83 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
             getShiftIndex() {
                 return that.shiftIndex;
             },
-            setShiftIndex(value) {
+            setShiftIndex(value: number) {
                 that.shiftIndex = value;
             },
             getLastShift() {
                 return that.lastShift;
             },
-            setLastShift(value) {
+            setLastShift(value: boolean) {
                 that.lastShift = value;
             },
-            getElementsOfList(listId) {
+            getElementsOfList(listId: string) {
                 return that.getElementsOfList(listId);
             },
-            selectAllOptions(option) {
+            selectAllOptions(option: HTMLElement) {
                 that.selectAllFromLastSelectedToOption(option, true);
             },
-            updateSelectedOptions(option, select, isMultiple) {
+            updateSelectedOptions(
+                option: HTMLElement,
+                select: boolean,
+                isMultiple: boolean
+            ) {
                 that.updateSelectedOptions(option, select, isMultiple);
             },
-            moveOptionsBetweenLists(addToSelect) {
+            moveOptionsBetweenLists(addToSelect: boolean) {
                 that.moveOptionsBetweenLists(addToSelect, true);
             },
+            focusOptionByFirstChar(curOptionIdx, typedChar) {
+                // Determine which list we're in
+                const listId = that.getListId(curOptionIdx);
+                const options = that.getElementsOfList(listId);
+                if (!options || !options.length) {
+                    return;
+                }
+                const startIdx = parseInt(
+                    curOptionIdx.getAttribute('data-index'),
+                    10
+                );
+                const char = typedChar.toLowerCase();
+                // 2 for loops are intentional to mirror expected typeahead behavior
+                // First loop, searches from next option to end.
+                // Users expect to move forward from the currently focused option
+                for (let i = startIdx + 1; i < options.length; i++) {
+                    const label = options[i].textContent.trim().toLowerCase();
+                    if (
+                        label.startsWith(char) &&
+                        !that.isOptionDisabled(options[i])
+                    ) {
+                        // wcag guidelines indicate focus the option, but don't select it
+                        options[i].focus();
+                        return;
+                    }
+                }
+                // If no match found, in first loop, then
+                // Second loop, searches for a match from start to current
+                for (let i = 0; i <= startIdx; i++) {
+                    const label = options[i].textContent.trim().toLowerCase();
+                    if (
+                        label.startsWith(char) &&
+                        !that.isOptionDisabled(options[i])
+                    ) {
+                        // wcag guidelines indicate focus the option, but don't select it
+                        options[i].focus();
+                        return;
+                    }
+                }
+            },
         };
     }
 
-    getOptionIndex(optionElement) {
+    getOptionIndex(optionElement: Element): number {
         return parseInt(optionElement.getAttribute('data-index'), 10);
     }
 
-    getListId(optionElement) {
+    getListId(optionElement: Element): string {
         return getRealDOMId(optionElement.parentElement.parentElement);
     }
 
-    updateFocusableOption(listId, value) {
+    updateFocusableOption(listId: string, value: string): void {
         if (listId === this.computedSourceListId) {
             this.focusableInSource = value;
         } else if (listId === this.computedSelectedListId) {
@@ -1146,8 +1238,8 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         this.optionToFocus = value;
     }
 
-    isNumber(value) {
-        return value !== '' && value !== null && isFinite(value);
+    isNumber(value: number | string): boolean {
+        return value !== '' && value !== null && isFinite(value as number);
     }
 
     /**
@@ -1156,7 +1248,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
      *
      * @param newValue
      */
-    updateHighlightedOptions(newValue) {
+    updateHighlightedOptions(newValue: string[]): void {
         let isSame = false;
         if (
             newValue &&
@@ -1176,25 +1268,25 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         }
     }
 
-    movedOptions(addToSelect) {
+    movedOptions(addToSelect: boolean): void {
         for (let i = 0; i < this.highlightedOptions.length; i++) {
-            let selectedOption = addToSelect
+            const selectedOption = addToSelect
                 ? this.computedSourceList.filter(
-                      (item) => item.value === this.highlightedOptions[i]
-                  )
+                    (item) => item.value === this.highlightedOptions[i]
+                )
                 : this.computedSelectedList.filter(
-                      (item) => item.value === this.highlightedOptions[i]
-                  );
+                    (item) => item.value === this.highlightedOptions[i]
+                );
             this.highlightedOptionsLabel.push(selectedOption[0].label);
         }
     }
 
-    get helptextAlternativeText() {
+    get helptextAlternativeText(): string {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }
 
-    selectedUpDownMovedOptions() {
-        let strMessage = [];
+    selectedUpDownMovedOptions(): void {
+        const strMessage: string[] = [];
         for (let i = 0; i < this.computedSelectedList.length; i++) {
             const highlightedOption = this.highlightedOptions.indexOf(
                 this.computedSelectedList[i].value