uikit 3.23.8-dev.97ee4c1bb → 3.23.8-dev.ab60f6dc7

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.23.8-dev.97ee4c1bb",
+  "version": "3.23.8-dev.ab60f6dc7",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/drop.js

@@ -117,6 +117,7 @@ export default {
         if (this.toggle && !this.targetEl) {
             this.targetEl = createToggleComponent(this);
         }
+        attr(this.targetEl, 'aria-expanded', false);
 
         this._style = pick(this.$el.style, ['width', 'height']);
     },
@@ -297,7 +298,7 @@ export default {
 
                 active = this.isActive() ? null : active;
                 this.tracker.cancel();
-                attr(this.targetEl, 'aria-expanded', null);
+                attr(this.targetEl, 'aria-expanded', false);
             },
         },
     ],
@@ -460,7 +461,7 @@ function createToggleComponent(drop) {
         target: drop.$el,
         mode: drop.mode,
     });
-    attr($el, 'aria-haspopup', true);
+    $el.ariaHasPopup = true;
 
     return $el;
 }

package/src/js/core/dropnav.js

@@ -15,8 +15,12 @@ import {
     noop,
     observeResize,
     offset,
+    on,
     once,
     parents,
+    pointerEnter,
+    pointerLeave,
+    pointerMove,
     query,
     remove,
     selFocusable,
@@ -58,6 +62,7 @@ export default {
         boundary: true,
         dropbar: false,
         dropbarAnchor: false,
+        delayShow: 160,
         duration: 200,
         container: false,
         selNavItem: '> li > a, > ul > li > a',
@@ -119,6 +124,8 @@ export default {
 
     connected() {
         this.initializeDropdowns();
+
+        preventInitialPointerEnter(this.$el);
     },
 
     disconnected() {
@@ -430,3 +437,13 @@ function handleNavItemNavigation(e, toggles, active) {
         toggles[getIndex(next, toggles, toggles.indexOf(active.targetEl || current))].focus();
     }
 }
+
+// Prevents initial pointer events from opening dropdowns on page load (Safari/Firefox)
+function preventInitialPointerEnter(el) {
+    const off = () => handlers.forEach((handler) => handler());
+    const handlers = [
+        once(el.ownerDocument, pointerMove, (e) => el.contains(e.target) || off()),
+        on(el, `mouseenter ${pointerEnter}`, (e) => e.stopPropagation(), { capture: true }),
+        on(el, `mouseleave ${pointerLeave}`, off, { capture: true }),
+    ];
+}

package/src/js/core/icon.js

@@ -195,7 +195,12 @@ export const Slidenav = {
 
 export const NavbarToggleIcon = {
     extends: ButtonComponent,
+
     i18n: { label: 'Open menu' },
+
+    beforeConnect() {
+        this.$el.ariaExpanded = false;
+    },
 };
 
 export const Close = {

package/src/js/core/navbar.js

@@ -12,6 +12,7 @@ export default {
     },
 
     data: {
+        delayShow: 200,
         clsDrop: 'uk-navbar-dropdown',
         selNavItem:
             '.uk-navbar-nav > li > a,a.uk-navbar-item,button.uk-navbar-item,.uk-navbar-item a,.uk-navbar-item button,.uk-navbar-toggle', // Simplify with :where() selector once browser target is Safari 14+

package/src/js/core/toggle.js

@@ -4,6 +4,7 @@ import {
     includes,
     isBoolean,
     isFocusable,
+    isSameSiteAnchor,
     isTag,
     isTouch,
     matches,
@@ -153,18 +154,23 @@ export default {
             filter: ({ mode }) => ['click', 'hover'].some((m) => includes(mode, m)),
 
             handler(e) {
-                let link;
-                if (
-                    this._preventClick ||
-                    e.target.closest('a[href="#"], a[href=""]') ||
-                    ((link = e.target.closest('a[href]')) &&
-                        (!this.isToggled(this.target) ||
-                            (link.hash && matches(this.target, link.hash))))
-                ) {
+                if (e.defaultPrevented) {
+                    return;
+                }
+
+                const link = e.target.closest('a');
+                const isButtonLike =
+                    isSameSiteAnchor(link) && (!link.hash || matches(this.target, link.hash));
+
+                if (this._preventClick || isButtonLike || (link && !this.isToggled(this.target))) {
                     e.preventDefault();
                 }
 
-                if (!this._preventClick && includes(this.mode, 'click')) {
+                if (
+                    !this._preventClick &&
+                    includes(this.mode, 'click') &&
+                    (!link || isButtonLike || e.defaultPrevented)
+                ) {
                     this.toggle();
                 }
             },

package/src/js/mixin/modal.js

@@ -156,6 +156,8 @@ export default {
                 );
 
                 addClass(document.documentElement, this.clsPage);
+
+                setAriaExpanded(this.target, true);
             },
         },
 
@@ -194,6 +196,9 @@ export default {
                 if (isFocusable(this.target)) {
                     this.target.focus();
                 }
+
+                setAriaExpanded(this.target, false);
+
                 this.target = null;
             },
         },
@@ -295,3 +300,9 @@ function listenForEscClose(modal) {
         }
     });
 }
+
+function setAriaExpanded(el, toggled) {
+    if (el?.ariaExpanded) {
+        el.ariaExpanded = toggled;
+    }
+}