@aurodesignsystem-dev/auro-formkit 0.0.0-pr1318.0 → 0.0.0-pr1318.10

package/components/checkbox/demo/api.min.js

@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/index.min.js

@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/demo/api.min.js

@@ -4375,7 +4375,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202602031735';
+var formkitVersion$2 = '202602112105';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -4662,6 +4662,20 @@ class AuroDropdown extends AuroElement$2 {
     }
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-dropdown` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.trigger) {
+      this.trigger.ariaActiveDescendantElement = element;
+    }
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {
@@ -5305,7 +5319,7 @@ class AuroDropdown extends AuroElement$2 {
           tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
-          aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
           aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           @focusin="${this.handleFocusin}"
           @blur="${this.handleFocusOut}">
@@ -10768,6 +10782,7 @@ class BaseInput extends AuroElement$1 {
 
       /**
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
        */
       maxLength: {
         type: Number,
@@ -11293,6 +11308,11 @@ class BaseInput extends AuroElement$1 {
    * @returns {void}
    */
   handleInput(event) {
+    // Process credit card type detection and formatting during input
+    if (this.type === 'credit-card') {
+      this.processCreditCard();
+    }
+
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
@@ -11372,6 +11392,20 @@ class BaseInput extends AuroElement$1 {
     return activeEl;
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-input` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.inputElement) {
+      this.inputElement.ariaActiveDescendantElement = element;
+    }
+  }
+
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -11410,6 +11444,7 @@ class BaseInput extends AuroElement$1 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
+      this.maxLength = this.lengthForType;
       this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
       this.inputmode = this.inputmode || 'numeric';
@@ -11520,6 +11555,7 @@ class BaseInput extends AuroElement$1 {
    */
   processCreditCard() {
     const creditCard = this.matchInputValueToCreditCard();
+    const previousFormat = this.format;
 
     this.format = creditCard.maskFormat;
 
@@ -11532,7 +11568,8 @@ class BaseInput extends AuroElement$1 {
       this.inputIconName = creditCard.cardIcon;
     }
 
-    if (this.inputElement) {
+    // Only reconfigure the mask if the format has changed
+    if (this.inputElement && previousFormat !== this.format) {
       this.configureAutoFormatting();
     }
   }
@@ -11993,7 +12030,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202602031735';
+var formkitVersion$1 = '202602112105';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12195,6 +12232,7 @@ class AuroInput extends BaseInput {
   /**
    * Common display value wrapper classes.
    * @private
+   * @returns {Record<string, boolean>}
    */
   get commonDisplayValueWrapperClasses() {
     return {
@@ -13018,7 +13056,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -13782,7 +13820,7 @@ class AuroCombobox extends AuroElement {
       },
 
       /**
-       * Specifies the currently active option.
+       * Specifies the currently active/highlighted `auro-menuoption`.
        * @private
        */
       optionActive: {
@@ -14019,6 +14057,12 @@ class AuroCombobox extends AuroElement {
       this.dropdownOpen = ev.detail.expanded;
       this.updateMenuShapeSize();
 
+      // Clear aria-activedescendant when dropdown closes
+      if (!this.dropdownOpen && this.input) {
+        this.input.setActiveDescendant(null);
+        this.optionActive = null;
+      }
+
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (this.componentHasFocus) {
@@ -14118,6 +14162,13 @@ class AuroCombobox extends AuroElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+
+    const labelElement = this.querySelector('span[slot="label"]');
+
+    if (labelElement) {
+      this.menu.setAttribute('aria-label', labelElement.textContent);
+    }
+
     this.defaultMenuShape = this.menu.getAttribute('shape');
 
     // racing condition on custom-combobox with custom-menu
@@ -14174,6 +14225,10 @@ class AuroCombobox extends AuroElement {
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
 
+      if (this.input) {
+        this.input.setActiveDescendant(this.optionActive);
+      }
+
       this.optionActive.scrollIntoView({
         alignToTop: false,
         block: "nearest",
@@ -14241,6 +14296,7 @@ class AuroCombobox extends AuroElement {
 
     this.menu.matchWord = this.input.value;
     this.optionActive = null;
+    this.input.setActiveDescendant(null);
 
     if (!this.input.value) {
       this.clear();
@@ -14669,7 +14725,7 @@ class AuroCombobox extends AuroElement {
             <${this.inputTag}
               id="inputInBib"
               @input="${this.handleInputValueChange}"
-              .a11yControls="${this.dropdownId}"
+              .a11yControls=${`${this.dropdownId}-floater-bib`}
               .autocomplete="${this.autocomplete}"
               .format="${this.format}"
               .inputmode="${this.inputmode}"

package/components/combobox/demo/index.min.js

@@ -4312,7 +4312,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202602031735';
+var formkitVersion$2 = '202602112105';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -4599,6 +4599,20 @@ class AuroDropdown extends AuroElement$2 {
     }
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-dropdown` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.trigger) {
+      this.trigger.ariaActiveDescendantElement = element;
+    }
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {
@@ -5242,7 +5256,7 @@ class AuroDropdown extends AuroElement$2 {
           tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
-          aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
           aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           @focusin="${this.handleFocusin}"
           @blur="${this.handleFocusOut}">
@@ -10705,6 +10719,7 @@ class BaseInput extends AuroElement$1 {
 
       /**
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
        */
       maxLength: {
         type: Number,
@@ -11230,6 +11245,11 @@ class BaseInput extends AuroElement$1 {
    * @returns {void}
    */
   handleInput(event) {
+    // Process credit card type detection and formatting during input
+    if (this.type === 'credit-card') {
+      this.processCreditCard();
+    }
+
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
@@ -11309,6 +11329,20 @@ class BaseInput extends AuroElement$1 {
     return activeEl;
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-input` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.inputElement) {
+      this.inputElement.ariaActiveDescendantElement = element;
+    }
+  }
+
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -11347,6 +11381,7 @@ class BaseInput extends AuroElement$1 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
+      this.maxLength = this.lengthForType;
       this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
       this.inputmode = this.inputmode || 'numeric';
@@ -11457,6 +11492,7 @@ class BaseInput extends AuroElement$1 {
    */
   processCreditCard() {
     const creditCard = this.matchInputValueToCreditCard();
+    const previousFormat = this.format;
 
     this.format = creditCard.maskFormat;
 
@@ -11469,7 +11505,8 @@ class BaseInput extends AuroElement$1 {
       this.inputIconName = creditCard.cardIcon;
     }
 
-    if (this.inputElement) {
+    // Only reconfigure the mask if the format has changed
+    if (this.inputElement && previousFormat !== this.format) {
       this.configureAutoFormatting();
     }
   }
@@ -11930,7 +11967,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202602031735';
+var formkitVersion$1 = '202602112105';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12132,6 +12169,7 @@ class AuroInput extends BaseInput {
   /**
    * Common display value wrapper classes.
    * @private
+   * @returns {Record<string, boolean>}
    */
   get commonDisplayValueWrapperClasses() {
     return {
@@ -12955,7 +12993,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -13719,7 +13757,7 @@ class AuroCombobox extends AuroElement {
       },
 
       /**
-       * Specifies the currently active option.
+       * Specifies the currently active/highlighted `auro-menuoption`.
        * @private
        */
       optionActive: {
@@ -13956,6 +13994,12 @@ class AuroCombobox extends AuroElement {
       this.dropdownOpen = ev.detail.expanded;
       this.updateMenuShapeSize();
 
+      // Clear aria-activedescendant when dropdown closes
+      if (!this.dropdownOpen && this.input) {
+        this.input.setActiveDescendant(null);
+        this.optionActive = null;
+      }
+
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (this.componentHasFocus) {
@@ -14055,6 +14099,13 @@ class AuroCombobox extends AuroElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+
+    const labelElement = this.querySelector('span[slot="label"]');
+
+    if (labelElement) {
+      this.menu.setAttribute('aria-label', labelElement.textContent);
+    }
+
     this.defaultMenuShape = this.menu.getAttribute('shape');
 
     // racing condition on custom-combobox with custom-menu
@@ -14111,6 +14162,10 @@ class AuroCombobox extends AuroElement {
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
 
+      if (this.input) {
+        this.input.setActiveDescendant(this.optionActive);
+      }
+
       this.optionActive.scrollIntoView({
         alignToTop: false,
         block: "nearest",
@@ -14178,6 +14233,7 @@ class AuroCombobox extends AuroElement {
 
     this.menu.matchWord = this.input.value;
     this.optionActive = null;
+    this.input.setActiveDescendant(null);
 
     if (!this.input.value) {
       this.clear();
@@ -14606,7 +14662,7 @@ class AuroCombobox extends AuroElement {
             <${this.inputTag}
               id="inputInBib"
               @input="${this.handleInputValueChange}"
-              .a11yControls="${this.dropdownId}"
+              .a11yControls=${`${this.dropdownId}-floater-bib`}
               .autocomplete="${this.autocomplete}"
               .format="${this.format}"
               .inputmode="${this.inputmode}"

package/components/combobox/dist/auro-combobox.d.ts

@@ -293,7 +293,7 @@ export class AuroCombobox extends AuroElement {
          */
         fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
         /**
-         * Specifies the currently active option.
+         * Specifies the currently active/highlighted `auro-menuoption`.
          * @private
          */
         optionActive: {

package/components/combobox/dist/index.js

@@ -4249,7 +4249,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202602031735';
+var formkitVersion$2 = '202602112105';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -4536,6 +4536,20 @@ class AuroDropdown extends AuroElement$2 {
     }
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-dropdown` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.trigger) {
+      this.trigger.ariaActiveDescendantElement = element;
+    }
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {
@@ -5179,7 +5193,7 @@ class AuroDropdown extends AuroElement$2 {
           tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
-          aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
           aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
           @focusin="${this.handleFocusin}"
           @blur="${this.handleFocusOut}">
@@ -10635,6 +10649,7 @@ class BaseInput extends AuroElement$1 {
 
       /**
        * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       * **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
        */
       maxLength: {
         type: Number,
@@ -11160,6 +11175,11 @@ class BaseInput extends AuroElement$1 {
    * @returns {void}
    */
   handleInput(event) {
+    // Process credit card type detection and formatting during input
+    if (this.type === 'credit-card') {
+      this.processCreditCard();
+    }
+
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
@@ -11239,6 +11259,20 @@ class BaseInput extends AuroElement$1 {
     return activeEl;
   }
 
+  /**
+   * Sets the active descendant element for accessibility.
+   * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
+   * This function is used in components that contain `auro-input` to set the active descendant.
+   * @private
+   * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
+   * @returns {void}
+   */
+  setActiveDescendant(element) {
+    if (this.inputElement) {
+      this.inputElement.ariaActiveDescendantElement = element;
+    }
+  }
+
   /**
    * Validates value.
    * @param {boolean} [force=false] - Whether to force validation.
@@ -11277,6 +11311,7 @@ class BaseInput extends AuroElement$1 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
+      this.maxLength = this.lengthForType;
       this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
       this.inputmode = this.inputmode || 'numeric';
@@ -11387,6 +11422,7 @@ class BaseInput extends AuroElement$1 {
    */
   processCreditCard() {
     const creditCard = this.matchInputValueToCreditCard();
+    const previousFormat = this.format;
 
     this.format = creditCard.maskFormat;
 
@@ -11399,7 +11435,8 @@ class BaseInput extends AuroElement$1 {
       this.inputIconName = creditCard.cardIcon;
     }
 
-    if (this.inputElement) {
+    // Only reconfigure the mask if the format has changed
+    if (this.inputElement && previousFormat !== this.format) {
       this.configureAutoFormatting();
     }
   }
@@ -11860,7 +11897,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202602031735';
+var formkitVersion$1 = '202602112105';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12062,6 +12099,7 @@ class AuroInput extends BaseInput {
   /**
    * Common display value wrapper classes.
    * @private
+   * @returns {Record<string, boolean>}
    */
   get commonDisplayValueWrapperClasses() {
     return {
@@ -12885,7 +12923,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202602031735';
+var formkitVersion = '202602112105';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -13649,7 +13687,7 @@ class AuroCombobox extends AuroElement {
       },
 
       /**
-       * Specifies the currently active option.
+       * Specifies the currently active/highlighted `auro-menuoption`.
        * @private
        */
       optionActive: {
@@ -13886,6 +13924,12 @@ class AuroCombobox extends AuroElement {
       this.dropdownOpen = ev.detail.expanded;
       this.updateMenuShapeSize();
 
+      // Clear aria-activedescendant when dropdown closes
+      if (!this.dropdownOpen && this.input) {
+        this.input.setActiveDescendant(null);
+        this.optionActive = null;
+      }
+
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (this.componentHasFocus) {
@@ -13985,6 +14029,13 @@ class AuroCombobox extends AuroElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+
+    const labelElement = this.querySelector('span[slot="label"]');
+
+    if (labelElement) {
+      this.menu.setAttribute('aria-label', labelElement.textContent);
+    }
+
     this.defaultMenuShape = this.menu.getAttribute('shape');
 
     // racing condition on custom-combobox with custom-menu
@@ -14041,6 +14092,10 @@ class AuroCombobox extends AuroElement {
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
 
+      if (this.input) {
+        this.input.setActiveDescendant(this.optionActive);
+      }
+
       this.optionActive.scrollIntoView({
         alignToTop: false,
         block: "nearest",
@@ -14108,6 +14163,7 @@ class AuroCombobox extends AuroElement {
 
     this.menu.matchWord = this.input.value;
     this.optionActive = null;
+    this.input.setActiveDescendant(null);
 
     if (!this.input.value) {
       this.clear();
@@ -14536,7 +14592,7 @@ class AuroCombobox extends AuroElement {
             <${this.inputTag}
               id="inputInBib"
               @input="${this.handleInputValueChange}"
-              .a11yControls="${this.dropdownId}"
+              .a11yControls=${`${this.dropdownId}-floater-bib`}
               .autocomplete="${this.autocomplete}"
               .format="${this.format}"
               .inputmode="${this.inputmode}"