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

package/components/dropdown/README.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/api.md

@@ -12,7 +12,9 @@
 ## Properties
 
 | Property                | Attribute               | Type        | Default        | Description                                      |
-|-------------------------|-------------------------|-------------|----------------|--------------------------------------------------|
+|-------------------------|-------------------------|-------------|----------------|--------------------------------------------------|
+| `a11yAutocomplete`      |                         | `string`    |                | The value for the aria-autocomplete attribute of the trigger element. |
+| `a11yRole`              |                         |             |                | The value for the role attribute of the trigger element. |
 | [autoPlacement](#autoPlacement)         | `autoPlacement`         | `boolean`   | "false"        | If declared, bib's position will be automatically calculated where to appear. |
 | [bordered](#bordered)              | `bordered`              | ` Boolean ` |                | If declared, applies a border around the trigger slot. |
 | [chevron](#chevron)               | `chevron`               | ` Boolean ` |                | If declared, the dropdown displays a chevron on the right. |
@@ -46,10 +48,11 @@
 
 ## Events
 
-| Event                       | Description                                      |
-|-----------------------------|--------------------------------------------------|
-| `auroDropdown-toggled`      | Notifies that the visibility of the dropdown bib has changed. |
-| `auroDropdown-triggerClick` | Notifies that the trigger has been clicked.      |
+| Event                       | Type                                 | Description                                      |
+|-----------------------------|--------------------------------------|--------------------------------------------------|
+| `auroDropdown-idAdded`      | `Object<key  : 'id', value: string>` | Notifies consumers that the unique ID for the dropdown bib has been generated. |
+| `auroDropdown-toggled`      |                                      | Notifies that the visibility of the dropdown bib has changed. |
+| `auroDropdown-triggerClick` |                                      | Notifies that the trigger has been clicked.      |
 
 ## Slots
 

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

@@ -1899,7 +1899,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.
@@ -2015,7 +2015,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();
     }
@@ -2191,7 +2191,7 @@ class AuroFloatingUI {
       this.id = window.crypto.randomUUID();
       this.element.setAttribute('id', this.id);
     }
-    
+
     this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
   }
 
@@ -2244,7 +2244,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);
@@ -2994,6 +2994,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() {
@@ -3039,7 +3040,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
@@ -3175,6 +3178,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.
        */
@@ -3342,6 +3355,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,
       }
     };
   }
@@ -3403,7 +3433,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
@@ -3555,6 +3600,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.
    *
@@ -3568,32 +3637,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) {
@@ -3603,6 +3681,7 @@ class AuroDropdown extends r {
 
     if (this.triggerContentSlot) {
       this.setupTriggerFocusEventBinding();
+
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
         if (slot.textContent.trim()) {
           return true;
@@ -3670,10 +3749,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>
@@ -3707,12 +3789,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/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);
@@ -2969,6 +2969,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 +3015,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 +3153,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.
        */
@@ -3317,6 +3330,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,
       }
     };
   }
@@ -3378,7 +3408,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
@@ -3530,6 +3575,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 +3612,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 +3656,7 @@ class AuroDropdown extends r {
 
     if (this.triggerContentSlot) {
       this.setupTriggerFocusEventBinding();
+
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
         if (slot.textContent.trim()) {
           return true;
@@ -3645,10 +3724,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 +3764,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/demo/readme.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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.
          */
@@ -204,6 +214,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 +264,9 @@ export class AuroDropdown extends LitElement {
     inset: boolean;
     rounded: boolean;
     noToggle: boolean;
+    a11yAutocomplete: string;
     labeled: boolean;
+    a11yRole: string;
     onDark: boolean;
     placement: string;
     offset: number;
@@ -306,6 +333,7 @@ export class AuroDropdown extends LitElement {
     private get focusableEntityQuery();
     updated(changedProperties: any): void;
     firstUpdated(): void;
+    dropdownId: any;
     bibContent: any;
     /**
      * Exposes CSS parts for styling from parent components.
@@ -338,6 +366,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.
      *