@aurodesignsystem-dev/auro-formkit 0.0.0-pr740.4 → 0.0.0-pr740.6

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

@@ -3836,12 +3836,6 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
-      isVisible: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'data-show'
-      },
-
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3928,18 +3922,6 @@ class AuroDropdownBib extends i$2 {
         }
       }
     }
-
-    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
-      if (this.isFullscreen && this.isVisible) {
-        this.addEventListener('touchstart', this.preventBodyScroll);
-        this.addEventListener('touchend', this.preventBodyScroll);
-        this.addEventListener('touchmove', this.preventBodyScroll);
-      } else {
-        this.removeEventListener('touchstart', this.preventBodyScroll);
-        this.removeEventListener('touchend', this.preventBodyScroll);
-        this.removeEventListener('touchmove', this.preventBodyScroll);
-      }
-    }
   }
 
   connectedCallback() {
@@ -3964,8 +3946,6 @@ class AuroDropdownBib extends i$2 {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3976,61 +3956,6 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    function checkIfDecent(target, parent) {
-      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
-        return false;
-      }
-
-      if (parent.tagName.toLowerCase() === 'slot') {
-        const assignedElements = parent.assignedElements();
-        if (assignedElements) {
-          for (const child of assignedElements) {
-            if (checkIfDecent(target, child)) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-
-      if (parent.contains(target)) {
-        return true;
-      }
-
-      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
-        return true;
-      }
-
-      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
-        return true;
-      }
-
-      if (parent.children) {
-        for (const child of parent.children) {
-          if (checkIfDecent(target, child)) {
-            return true;
-          }
-        }
-      }
-
-      return false;
-    }
-    const isDecent = checkIfDecent(event.target, this.bibTemplate);
-    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
-      // if the target is on the bib, let it go for `click` event
-      return;
-    }
-
-    event.preventDefault();
-    event.stopImmediatePropagation();
-  }
-
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -4871,6 +4796,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
@@ -16252,7 +16180,7 @@ class AuroCombobox extends AuroElement$1 {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.setInputFocus();
+          this.focus();
         }
       }, 0);
     });
@@ -16271,24 +16199,13 @@ class AuroCombobox extends AuroElement$1 {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.setInputFocus = this.setInputFocus.bind(this);
+    this.focus = this.focus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.setInputFocus, 0);
+      setTimeout(this.focus, 0);
     });
   }
 
-  /**
-   * @private
-   */
-  setInputFocus() {
-    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
-    }
-  }
-
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16578,7 +16495,11 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   focus() {
-    this.input.focus();
+    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
   }
 
   /**

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

@@ -3694,12 +3694,6 @@ class AuroDropdownBib extends i$2 {
         reflect: true
       },
 
-      isVisible: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'data-show'
-      },
-
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3786,18 +3780,6 @@ class AuroDropdownBib extends i$2 {
         }
       }
     }
-
-    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
-      if (this.isFullscreen && this.isVisible) {
-        this.addEventListener('touchstart', this.preventBodyScroll);
-        this.addEventListener('touchend', this.preventBodyScroll);
-        this.addEventListener('touchmove', this.preventBodyScroll);
-      } else {
-        this.removeEventListener('touchstart', this.preventBodyScroll);
-        this.removeEventListener('touchend', this.preventBodyScroll);
-        this.removeEventListener('touchmove', this.preventBodyScroll);
-      }
-    }
   }
 
   connectedCallback() {
@@ -3822,8 +3804,6 @@ class AuroDropdownBib extends i$2 {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3834,61 +3814,6 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    function checkIfDecent(target, parent) {
-      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
-        return false;
-      }
-
-      if (parent.tagName.toLowerCase() === 'slot') {
-        const assignedElements = parent.assignedElements();
-        if (assignedElements) {
-          for (const child of assignedElements) {
-            if (checkIfDecent(target, child)) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-
-      if (parent.contains(target)) {
-        return true;
-      }
-
-      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
-        return true;
-      }
-
-      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
-        return true;
-      }
-
-      if (parent.children) {
-        for (const child of parent.children) {
-          if (checkIfDecent(target, child)) {
-            return true;
-          }
-        }
-      }
-
-      return false;
-    }
-    const isDecent = checkIfDecent(event.target, this.bibTemplate);
-    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
-      // if the target is on the bib, let it go for `click` event
-      return;
-    }
-
-    event.preventDefault();
-    event.stopImmediatePropagation();
-  }
-
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -4729,6 +4654,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
@@ -16110,7 +16038,7 @@ class AuroCombobox extends AuroElement$1 {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.setInputFocus();
+          this.focus();
         }
       }, 0);
     });
@@ -16129,24 +16057,13 @@ class AuroCombobox extends AuroElement$1 {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.setInputFocus = this.setInputFocus.bind(this);
+    this.focus = this.focus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.setInputFocus, 0);
+      setTimeout(this.focus, 0);
     });
   }
 
-  /**
-   * @private
-   */
-  setInputFocus() {
-    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
-    }
-  }
-
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16436,7 +16353,11 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   focus() {
-    this.input.focus();
+    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
   }
 
   /**

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

@@ -332,9 +332,10 @@ export class AuroCombobox extends AuroElement {
     bibtemplate: any;
     inputInBib: any;
     /**
-     * @private
+     * Focuses the combobox trigger input.
+     * @returns {void}
      */
-    private setInputFocus;
+    focus(): void;
     /**
      * Binds all behavior needed to the menu after rendering.
      * @private
@@ -380,11 +381,6 @@ export class AuroCombobox extends AuroElement {
     firstUpdated(): void;
     dropdown: any;
     input: any;
-    /**
-     * Focuses the combobox trigger input.
-     * @returns {void}
-     */
-    focus(): void;
     /**
      * Resets component to initial state.
      * @returns {void}

package/components/combobox/dist/index.js

@@ -3625,12 +3625,6 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
-      isVisible: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'data-show'
-      },
-
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3717,18 +3711,6 @@ class AuroDropdownBib extends LitElement {
         }
       }
     }
-
-    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
-      if (this.isFullscreen && this.isVisible) {
-        this.addEventListener('touchstart', this.preventBodyScroll);
-        this.addEventListener('touchend', this.preventBodyScroll);
-        this.addEventListener('touchmove', this.preventBodyScroll);
-      } else {
-        this.removeEventListener('touchstart', this.preventBodyScroll);
-        this.removeEventListener('touchend', this.preventBodyScroll);
-        this.removeEventListener('touchmove', this.preventBodyScroll);
-      }
-    }
   }
 
   connectedCallback() {
@@ -3753,8 +3735,6 @@ class AuroDropdownBib extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3765,61 +3745,6 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    function checkIfDecent(target, parent) {
-      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
-        return false;
-      }
-
-      if (parent.tagName.toLowerCase() === 'slot') {
-        const assignedElements = parent.assignedElements();
-        if (assignedElements) {
-          for (const child of assignedElements) {
-            if (checkIfDecent(target, child)) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-
-      if (parent.contains(target)) {
-        return true;
-      }
-
-      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
-        return true;
-      }
-
-      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
-        return true;
-      }
-
-      if (parent.children) {
-        for (const child of parent.children) {
-          if (checkIfDecent(target, child)) {
-            return true;
-          }
-        }
-      }
-
-      return false;
-    }
-    const isDecent = checkIfDecent(event.target, this.bibTemplate);
-    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
-      // if the target is on the bib, let it go for `click` event
-      return;
-    }
-
-    event.preventDefault();
-    event.stopImmediatePropagation();
-  }
-
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -4660,6 +4585,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
@@ -16028,7 +15956,7 @@ class AuroCombobox extends AuroElement {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.setInputFocus();
+          this.focus();
         }
       }, 0);
     });
@@ -16047,24 +15975,13 @@ class AuroCombobox extends AuroElement {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.setInputFocus = this.setInputFocus.bind(this);
+    this.focus = this.focus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.setInputFocus, 0);
+      setTimeout(this.focus, 0);
     });
   }
 
-  /**
-   * @private
-   */
-  setInputFocus() {
-    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
-    }
-  }
-
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16354,7 +16271,11 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   focus() {
-    this.input.focus();
+    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
   }
 
   /**

package/components/combobox/dist/registered.js

@@ -3625,12 +3625,6 @@ class AuroDropdownBib extends LitElement {
         reflect: true
       },
 
-      isVisible: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'data-show'
-      },
-
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -3717,18 +3711,6 @@ class AuroDropdownBib extends LitElement {
         }
       }
     }
-
-    if (changedProperties.has('isFullscreen') || changedProperties.has('isVisible')) {
-      if (this.isFullscreen && this.isVisible) {
-        this.addEventListener('touchstart', this.preventBodyScroll);
-        this.addEventListener('touchend', this.preventBodyScroll);
-        this.addEventListener('touchmove', this.preventBodyScroll);
-      } else {
-        this.removeEventListener('touchstart', this.preventBodyScroll);
-        this.removeEventListener('touchend', this.preventBodyScroll);
-        this.removeEventListener('touchmove', this.preventBodyScroll);
-      }
-    }
   }
 
   connectedCallback() {
@@ -3753,8 +3735,6 @@ class AuroDropdownBib extends LitElement {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
-    this.preventBodyScroll = this.preventBodyScroll.bind(this);
-
     // Dispatch a custom event when the component is connected
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -3765,61 +3745,6 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
-  /**
-   * Prevents scrolling of the body when touching empty areas of the component.
-   * @param {Event} event - The touchmove event.
-   * @returns {void}
-   */
-  preventBodyScroll(event) {
-    function checkIfDecent(target, parent) {
-      if (!parent.tagName || "text,svg".includes(parent.tagName.toLowerCase())) {
-        return false;
-      }
-
-      if (parent.tagName.toLowerCase() === 'slot') {
-        const assignedElements = parent.assignedElements();
-        if (assignedElements) {
-          for (const child of assignedElements) {
-            if (checkIfDecent(target, child)) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-
-      if (parent.contains(target)) {
-        return true;
-      }
-
-      if (parent.shadowRoot && checkIfDecent(target, parent.shadowRoot)) {
-        return true;
-      }
-
-      if (target.assignedSlot && checkIfDecent(target.assignedSlot, parent)) {
-        return true;
-      }
-
-      if (parent.children) {
-        for (const child of parent.children) {
-          if (checkIfDecent(target, child)) {
-            return true;
-          }
-        }
-      }
-
-      return false;
-    }
-    const isDecent = checkIfDecent(event.target, this.bibTemplate);
-    if (isDecent && (event.type === 'touchstart' || event.type === 'touchend')) {
-      // if the target is on the bib, let it go for `click` event
-      return;
-    }
-
-    event.preventDefault();
-    event.stopImmediatePropagation();
-  }
-
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -4660,6 +4585,9 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     this.bibContent = this.floater.element.bib;
+    this.bibContent.setAttribute('role', 'dialog');
+    this.bibContent.setAttribute('aria-modal', 'true');
+    this.bibContent.setAttribute('aria-labelledby', 'triggerLabel');
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
@@ -16028,7 +15956,7 @@ class AuroCombobox extends AuroElement {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.setInputFocus();
+          this.focus();
         }
       }, 0);
     });
@@ -16047,24 +15975,13 @@ class AuroCombobox extends AuroElement {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.setInputFocus = this.setInputFocus.bind(this);
+    this.focus = this.focus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.setInputFocus, 0);
+      setTimeout(this.focus, 0);
     });
   }
 
-  /**
-   * @private
-   */
-  setInputFocus() {
-    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
-    }
-  }
-
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16354,7 +16271,11 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   focus() {
-    this.input.focus();
+    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
   }
 
   /**