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

package/components/dropdown/dist/index.js

@@ -1846,7 +1846,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.
@@ -1962,7 +1962,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();
     }
@@ -2138,7 +2138,7 @@ class AuroFloatingUI {
       this.id = window.crypto.randomUUID();
       this.element.setAttribute('id', this.id);
     }
-    
+
     this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
   }
 
@@ -2191,7 +2191,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);
@@ -2922,6 +2922,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 LitElement {
   constructor() {
@@ -2967,7 +2968,9 @@ class AuroDropdown extends LitElement {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.a11yAutocomplete = 'none';
     this.labeled = true;
+    this.a11yRole = 'combobox';
     this.onDark = false;
 
     // floaterConfig
@@ -3103,6 +3106,16 @@ class AuroDropdown extends LitElement {
         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.
        */
@@ -3270,6 +3283,23 @@ class AuroDropdown extends LitElement {
        */
       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,
       }
     };
   }
@@ -3331,7 +3361,22 @@ class AuroDropdown extends LitElement {
   }
 
   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
@@ -3483,6 +3528,30 @@ class AuroDropdown extends LitElement {
     });
   }
 
+  /*
+   * 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.
    *
@@ -3496,32 +3565,41 @@ class AuroDropdown extends LitElement {
    * @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) {
@@ -3531,6 +3609,7 @@ class AuroDropdown extends LitElement {
 
     if (this.triggerContentSlot) {
       this.setupTriggerFocusEventBinding();
+
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
         if (slot.textContent.trim()) {
           return true;
@@ -3598,10 +3677,13 @@ class AuroDropdown extends LitElement {
           id="trigger"
           class="trigger"
           part="trigger"
-          aria-labelledby="triggerLabel"
           tabindex="${this.tabIndex}"
           ?showBorder="${this.showTriggerBorders}"
-          >
+          role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
+          aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
+          aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
+        >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
@@ -3635,12 +3717,12 @@ class AuroDropdown extends LitElement {
         <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/registered.js

@@ -1846,7 +1846,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.
@@ -1962,7 +1962,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();
     }
@@ -2138,7 +2138,7 @@ class AuroFloatingUI {
       this.id = window.crypto.randomUUID();
       this.element.setAttribute('id', this.id);
     }
-    
+
     this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
   }
 
@@ -2191,7 +2191,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);
@@ -2922,6 +2922,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 LitElement {
   constructor() {
@@ -2967,7 +2968,9 @@ class AuroDropdown extends LitElement {
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
+    this.a11yAutocomplete = 'none';
     this.labeled = true;
+    this.a11yRole = 'combobox';
     this.onDark = false;
 
     // floaterConfig
@@ -3103,6 +3106,16 @@ class AuroDropdown extends LitElement {
         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.
        */
@@ -3270,6 +3283,23 @@ class AuroDropdown extends LitElement {
        */
       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,
       }
     };
   }
@@ -3331,7 +3361,22 @@ class AuroDropdown extends LitElement {
   }
 
   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
@@ -3483,6 +3528,30 @@ class AuroDropdown extends LitElement {
     });
   }
 
+  /*
+   * 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.
    *
@@ -3496,32 +3565,41 @@ class AuroDropdown extends LitElement {
    * @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) {
@@ -3531,6 +3609,7 @@ class AuroDropdown extends LitElement {
 
     if (this.triggerContentSlot) {
       this.setupTriggerFocusEventBinding();
+
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
         if (slot.textContent.trim()) {
           return true;
@@ -3598,10 +3677,13 @@ class AuroDropdown extends LitElement {
           id="trigger"
           class="trigger"
           part="trigger"
-          aria-labelledby="triggerLabel"
           tabindex="${this.tabIndex}"
           ?showBorder="${this.showTriggerBorders}"
-          >
+          role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
+          aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
+          aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
+          aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
+        >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
@@ -3635,12 +3717,12 @@ class AuroDropdown extends LitElement {
         <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/form/README.md

@@ -109,7 +109,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-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/demo/readme.md

@@ -109,7 +109,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-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/README.md

@@ -99,7 +99,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-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/demo/api.md

@@ -15,7 +15,10 @@ Generate unique names for dependency components.
 ## Properties
 
 | Property                          | Attribute                         | Type      | Default     | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
+|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
+| `a11yControls`                    | `a11yControls`                    | `string`  |             | The value for the aria-controls attribute.       |
+| `a11yExpanded`                    | `a11yExpanded`                    | `boolean` |             | The value for the aria-expanded attribute.       |
+| `a11yRole`                        | `a11yRole`                        | `string`  |             | The value for the role attribute.                |
 | [activeLabel](#activeLabel)                     | `activeLabel`                     | `boolean` | false       | If set, the label will remain fixed in the active position. |
 | [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `string`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
 | [autocomplete](#autocomplete)                    | `autocomplete`                    | `string`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |