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

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. |
@@ -21,7 +23,7 @@
 | [error](#error)                 | `error`                 | ` Boolean ` |                | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
 | [fluid](#fluid)                 | `fluid`                 | `Boolean`   |                | Makes the trigger to be full width of its parent container. |
 | [focusShow](#focusShow)             | `focusShow`             | ` Boolean ` |                | If declared, the bib will display when focus is applied to the trigger. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)  | `fullscreenBreakpoint`  | ` String `  | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)  | `fullscreenBreakpoint`  | ` String `  |                | 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. |
 | [hoverToggle](#hoverToggle)           | `hoverToggle`           | ` Boolean ` |                | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
 | [inset](#inset)                 | `inset`                 | ` Boolean ` |                | If declared, will apply padding around trigger slot content. |
 | [isBibFullscreen](#isBibFullscreen)       | `isBibFullscreen`       | `boolean`   | false          | If true, the dropdown bib is taking the fullscreen when it's open. |
@@ -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);
@@ -2653,7 +2653,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',
@@ -2725,7 +2724,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;
@@ -2994,6 +2992,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 +3038,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 +3176,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.
        */
@@ -3238,12 +3249,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,
@@ -3342,6 +3348,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,
       }
     };
   }
@@ -3366,15 +3389,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();
   }
@@ -3388,8 +3402,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;
     }
@@ -3403,7 +3415,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
@@ -3525,7 +3552,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);
@@ -3546,7 +3573,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);
@@ -3555,6 +3582,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 +3619,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 +3663,7 @@ class AuroDropdown extends r {
 
     if (this.triggerContentSlot) {
       this.setupTriggerFocusEventBinding();
+
       this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
         if (slot.textContent.trim()) {
           return true;
@@ -3670,10 +3731,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 +3771,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.md

@@ -411,89 +411,6 @@ To make the dropdown to be just big as the trigger's content, style the `auro-dr
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Triggering a fullscreen dropdown
-This example shows how to set a dropdown fullscreen breakpoint attribute. Most consuming components use `sm` by default, but
-dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` ensuring that the dropdown will never be fullscreen.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/fullscreen.html -->
-  <h3>Never fullscreen</h3>
-  <auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <h3>Always fullscreen</h3>
-  <auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen.html -->
-
-```html
-<h3>Never fullscreen</h3>
-<auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
-  <div style="padding: var(--ds-size-150);">
-    Lorem ipsum solar
-    <br />
-    <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
-      Dismiss Dropdown
-    </auro-button>
-  </div>
-  <span slot="helpText">
-    Help text
-  </span>
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-<h3>Always fullscreen</h3>
-<auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
-  <div style="padding: var(--ds-size-150);">
-    Lorem ipsum solar
-    <br />
-    <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
-      Dismiss Dropdown
-    </auro-button>
-  </div>
-  <span slot="helpText">
-    Help text
-  </span>
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
 ## Supported standard and accessible interactions
 
 The dropdown can be opened with the following actions: