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

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

@@ -3928,18 +3928,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 +3952,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 +3962,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 +4802,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');

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

@@ -3786,18 +3786,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 +3810,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 +3820,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 +4660,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');

package/components/combobox/dist/index.js

@@ -3717,18 +3717,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 +3741,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 +3751,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 +4591,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');

package/components/combobox/dist/registered.js

@@ -3717,18 +3717,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 +3741,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 +3751,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 +4591,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');

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

@@ -5637,18 +5637,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() {
@@ -5673,8 +5661,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,
@@ -5685,61 +5671,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 = {
@@ -6580,6 +6511,9 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     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');

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

@@ -5637,18 +5637,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() {
@@ -5673,8 +5661,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,
@@ -5685,61 +5671,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 = {
@@ -6580,6 +6511,9 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     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');

package/components/counter/dist/index.js

@@ -5590,18 +5590,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() {
@@ -5626,8 +5614,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,
@@ -5638,61 +5624,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 = {
@@ -6533,6 +6464,9 @@ class AuroDropdown extends AuroElement$3 {
     }
 
     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');