uikit 3.23.8-dev.ff7a25595 → 3.23.9-dev.0064d7d94

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.ff7a25595",
+  "version": "3.23.9-dev.0064d7d94",
   "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

@@ -102,6 +102,13 @@ export const IconComponent = {
     beforeConnect() {
         addClass(this.$el, this.$options.id);
     },
+
+    async connected() {
+        const svg = await this.svg;
+        if (svg) {
+            svg.ariaHidden = true;
+        }
+    },
 };
 
 export const NavParentIcon = {
@@ -195,7 +202,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/scrollspy-nav.js

@@ -4,7 +4,6 @@ import {
     getCoveringElement,
     getTargetedElement,
     hasClass,
-    isSameSiteAnchor,
     isVisible,
     offset,
     offsetViewport,
@@ -32,7 +31,7 @@ export default {
     },
 
     computed: {
-        links: ({ target }, $el) => $$(target, $el).filter((el) => isSameSiteAnchor(el)),
+        links: ({ target }, $el) => $$(target, $el).filter((el) => getTargetedElement(el)),
 
         elements({ closest }) {
             return this.links.map((el) => el.closest(closest || '*'));
@@ -52,7 +51,7 @@ export default {
     update: [
         {
             read() {
-                const targets = this.links.map((el) => getTargetedElement(el)).filter(Boolean);
+                const targets = this.links.map(getTargetedElement);
 
                 const { length } = targets;
 

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

@@ -98,13 +98,14 @@ export default {
 
             self: true,
 
-            handler(e) {
+            handler(e, toggle) {
                 if (e.defaultPrevented) {
                     return;
                 }
 
                 e.preventDefault();
 
+                this.target = toggle?.$el;
                 if (this.isToggled() === includes(active, this)) {
                     this.toggle();
                 }
@@ -155,6 +156,8 @@ export default {
                 );
 
                 addClass(document.documentElement, this.clsPage);
+
+                setAriaExpanded(this.target, true);
             },
         },
 
@@ -189,6 +192,14 @@ export default {
                 if (!active.some((modal) => modal.clsPage === this.clsPage)) {
                     removeClass(document.documentElement, this.clsPage);
                 }
+
+                if (isFocusable(this.target)) {
+                    this.target.focus();
+                }
+
+                setAriaExpanded(this.target, false);
+
+                this.target = null;
             },
         },
     ],
@@ -289,3 +300,9 @@ function listenForEscClose(modal) {
         }
     });
 }
+
+function setAriaExpanded(el, toggled) {
+    if (el?.ariaExpanded) {
+        el.ariaExpanded = toggled;
+    }
+}

package/src/js/mixin/svg.js

@@ -112,8 +112,6 @@ const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
 const parseSymbols = memoize(function (svg) {
     const symbols = {};
 
-    symbolRe.lastIndex = 0;
-
     let match;
     while ((match = symbolRe.exec(svg))) {
         symbols[match[3]] = `<svg ${match[1]}svg>`;