@aurodesignsystem/auro-formkit 3.1.0-beta.1 → 3.1.0

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

@@ -1874,7 +1874,7 @@ class AuroFloatingUI {
   /**
    * @private
    * getting called on 'blur' in trigger or `focusin` in document
-   *  
+   *
    * Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
    * This method checks if the currently active element is still within the trigger or bib.
    * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
@@ -1990,7 +1990,7 @@ class AuroFloatingUI {
     // Close any other dropdown that is already open
     const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
     if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this &&
-      existedVisibleFloatingUI.isPopoverVisible &&
+      existedVisibleFloatingUI.element.isPopoverVisible &&
       document.expandedAuroFloater.eventPrefix === this.eventPrefix) {
       document.expandedAuroFloater.hideBib();
     }
@@ -2166,7 +2166,7 @@ class AuroFloatingUI {
       this.id = window.crypto.randomUUID();
       this.element.setAttribute('id', this.id);
     }
-    
+
     this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
   }
 
@@ -2219,7 +2219,7 @@ class AuroFloatingUI {
       if (this.element.bib) {
         this.element.shadowRoot.append(this.element.bib);
       }
-  
+
       // Remove event & keyboard listeners
       if (this.element?.trigger) {
         this.element.trigger.removeEventListener('keydown', this.handleEvent);
@@ -2628,7 +2628,6 @@ var tokensCss$1 = i$3`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
 const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
-  'xl',
   'lg',
   'md',
   'sm',
@@ -2700,7 +2699,6 @@ class AuroDropdownBib extends r {
 
   set mobileFullscreenBreakpoint(value) {
     // verify the defined breakpoint is valid and exit out if not
-    // 'disabled' is a design token breakpoint so it acts as our "undefined" value
     const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
     if (!validatedValue) {
       this._mobileBreakpointValue = undefined;
@@ -2969,6 +2967,7 @@ var helpTextVersion = '1.0.0';
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
+ * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
  */
 class AuroDropdown extends r {
   constructor() {
@@ -3014,7 +3013,9 @@ class AuroDropdown extends r {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.a11yAutocomplete = 'none';
     this.labeled = true;
+    this.a11yRole = 'combobox';
     this.onDark = false;
 
     // floaterConfig
@@ -3150,6 +3151,16 @@ class AuroDropdown extends r {
         type: Number
       },
 
+      /**
+       * The unique ID for the dropdown bib element.
+       * @private
+       */
+      dropdownId: {
+        type: String,
+        reflect: false,
+        attribute: false
+      },
+
       /**
        * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
        */
@@ -3213,12 +3224,7 @@ class AuroDropdown extends r {
       },
 
       /**
-       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
-       *
-       * When expanded, the dropdown will automatically display in fullscreen mode
-       * if the screen size is equal to or smaller than the selected breakpoint.
-       * @default sm
+       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        */
       fullscreenBreakpoint: {
         type: String,
@@ -3317,6 +3323,23 @@ class AuroDropdown extends r {
        */
       tabIndex: {
         type: Number
+      },
+
+      /**
+       * The value for the role attribute of the trigger element.
+       */
+      a11yRole: {
+        type: String || undefined,
+        attribute: false,
+        reflect: false
+      },
+
+      /**
+       * The value for the aria-autocomplete attribute of the trigger element.
+       */
+      a11yAutocomplete: {
+        type: String,
+        attribute: false,
       }
     };
   }
@@ -3341,15 +3364,6 @@ class AuroDropdown extends r {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
-  /**
-   * Accessor for reusing the focusable entity query string.
-   * @private
-   * @returns {string}
-   */
-  get focusableEntityQuery () {
-    return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
-  }
-
   connectedCallback() {
     super.connectedCallback();
   }
@@ -3363,8 +3377,6 @@ class AuroDropdown extends r {
   updated(changedProperties) {
     this.floater.handleUpdate(changedProperties);
 
-    // Note: `disabled` is not a breakpoint (it is not a screen size),
-    // so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
     if (changedProperties.has('fullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
     }
@@ -3378,7 +3390,22 @@ class AuroDropdown extends r {
   }
 
   firstUpdated() {
+
+    // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+
+    /**
+     * @description Let subscribers know that the dropdown ID ha been generated and added.
+     * @event auroDropdown-idAdded
+     * @type {Object<key: 'id', value: string>} - The ID of the dropdown bib element.
+     */
+    this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
+
+    // Set the bib ID locally if the user hasn't provided a focusable trigger
+    if (!this.triggerContentFocusable) {
+      this.dropdownId = this.floater.element.id;
+    }
+
     this.bibContent = this.floater.element.bib;
 
     // Add the tag name as an attribute if it is different than the component name
@@ -3500,7 +3527,7 @@ class AuroDropdown extends r {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
@@ -3521,7 +3548,7 @@ class AuroDropdown extends r {
 
     this.triggerContentSlot.forEach((node) => {
       if (node.querySelectorAll) {
-        const auroElements = node.querySelectorAll(this.focusableEntityQuery);
+        const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
         auroElements.forEach((auroEl) => {
           auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
           auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
@@ -3530,6 +3557,30 @@ class AuroDropdown extends r {
     });
   }
 
+  /*
+   * Sets aria attributes for the trigger element if a custom one is passed in.
+   * @private
+   * @method setTriggerAriaAttributes
+   * @param { HTMLElement } triggerElement - The custom trigger element.
+   */
+  clearTriggerA11yAttributes(triggerElement) {
+
+    if (!triggerElement || !triggerElement.removeAttribute) {
+      return;
+    }
+
+    // Reset appropriate attributes for a11y
+    triggerElement.removeAttribute('aria-labelledby');
+    if (triggerElement.getAttribute('id') === `${this.id}-trigger-element`) {
+      triggerElement.removeAttribute('id');
+    }
+    triggerElement.removeAttribute('role');
+    triggerElement.removeAttribute('aria-expanded');
+
+    triggerElement.removeAttribute('aria-controls');
+    triggerElement.removeAttribute('aria-autocomplete');
+  }
+
   /**
    * Handles changes to the trigger content slot and updates related properties.
    *
@@ -3543,32 +3594,41 @@ class AuroDropdown extends r {
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {
+
     this.floater.handleTriggerTabIndex();
 
+    // Get the trigger
+    const trigger = this.shadowRoot.querySelector('#trigger');
+
+    // Get the trigger slot
     const triggerSlot = this.shadowRoot.querySelector('.triggerContent slot');
 
+    // If there's a trigger slot
     if (triggerSlot) {
 
+      // Get the content nodes to see if there are any children
       const triggerContentNodes = triggerSlot.assignedNodes();
 
+      // If there are children
       if (triggerContentNodes) {
 
-        triggerContentNodes.forEach((node) => {
-          if (!this.triggerContentFocusable) {
-            this.triggerContentFocusable = this.containsFocusableElement(node);
-          }
-        });
-      }
-    }
+        // See if any of them are focusable elemeents
+        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
 
-    const trigger = this.shadowRoot.querySelector('#trigger');
+        // If any of them are focusable elements
+        if (this.triggerContentFocusable) {
 
-    if (!this.triggerContentFocusable) {
-      trigger.setAttribute('tabindex', '0');
-      trigger.setAttribute('role', 'button');
-    } else {
-      trigger.removeAttribute('tabindex');
-      trigger.removeAttribute('role');
+          // Assume the consumer will be providing their own a11y in whatever they passed in
+          this.clearTriggerA11yAttributes(trigger);
+
+          // Remove the tabindex from the trigger so it doesn't interrupt focus flow
+          trigger.removeAttribute('tabindex');
+        } else {
+
+          // Add the tabindex to the trigger so that it's in the focus flow
+          trigger.setAttribute('tabindex', '0');
+        }
+      }
     }
 
     if (event) {
@@ -3578,6 +3638,7 @@ class AuroDropdown extends r {
 
     if (this.triggerContentSlot) {
       this.setupTriggerFocusEventBinding();
+
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
         if (slot.textContent.trim()) {
           return true;
@@ -3645,10 +3706,13 @@ class AuroDropdown extends r {
           id="trigger"
           class="trigger"
           part="trigger"
-          aria-labelledby="triggerLabel"
           tabindex="${this.tabIndex}"
           ?showBorder="${this.showTriggerBorders}"
-          >
+          role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
+          aria-expanded="${o(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
+          aria-controls="${o(this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
+        >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
@@ -3682,12 +3746,12 @@ class AuroDropdown extends r {
         <div id="bibSizer" part="size"></div>
         <${this.dropdownBibTag}
           id="bib"
-          role="tooltip"
           ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
           ?common="${this.common}"
           ?rounded="${this.common || this.rounded}"
-          ?inset="${this.common || this.inset}">
+          ?inset="${this.common || this.inset}"
+        >
         </${this.dropdownBibTag}>
       </div>
     `;

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

@@ -9,6 +9,7 @@
  * @csspart helpText - The helpText content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
+ * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
  */
 export class AuroDropdown extends LitElement {
     static get properties(): {
@@ -55,6 +56,15 @@ export class AuroDropdown extends LitElement {
         dropdownWidth: {
             type: NumberConstructor;
         };
+        /**
+         * The unique ID for the dropdown bib element.
+         * @private
+         */
+        dropdownId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
          * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
          */
@@ -110,12 +120,7 @@ export class AuroDropdown extends LitElement {
             type: BooleanConstructor;
         };
         /**
-         * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-         * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
-         *
-         * When expanded, the dropdown will automatically display in fullscreen mode
-         * if the screen size is equal to or smaller than the selected breakpoint.
-         * @default sm
+         * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
          */
         fullscreenBreakpoint: {
             type: StringConstructor;
@@ -204,6 +209,21 @@ export class AuroDropdown extends LitElement {
         tabIndex: {
             type: NumberConstructor;
         };
+        /**
+         * The value for the role attribute of the trigger element.
+         */
+        a11yRole: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
+        /**
+         * The value for the aria-autocomplete attribute of the trigger element.
+         */
+        a11yAutocomplete: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     /**
@@ -239,7 +259,9 @@ export class AuroDropdown extends LitElement {
     inset: boolean;
     rounded: boolean;
     noToggle: boolean;
+    a11yAutocomplete: string;
     labeled: boolean;
+    a11yRole: string;
     onDark: boolean;
     placement: string;
     offset: number;
@@ -298,14 +320,9 @@ export class AuroDropdown extends LitElement {
      * @returns {void}
      */
     show(): void;
-    /**
-     * Accessor for reusing the focusable entity query string.
-     * @private
-     * @returns {string}
-     */
-    private get focusableEntityQuery();
     updated(changedProperties: any): void;
     firstUpdated(): void;
+    dropdownId: any;
     bibContent: any;
     /**
      * Exposes CSS parts for styling from parent components.
@@ -338,6 +355,7 @@ export class AuroDropdown extends LitElement {
      * @returns {void}
      */
     private clearTriggerFocusEventBinding;
+    clearTriggerA11yAttributes(triggerElement: any): void;
     /**
      * Handles changes to the trigger content slot and updates related properties.
      *