uikit 3.16.7-dev.8223e4acf → 3.16.7-dev.e91049985

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.16.7-dev.8223e4acf",
+  "version": "3.16.7-dev.e91049985",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/boot.js

@@ -4,7 +4,16 @@ import { apply, hasAttr, inBrowser, isPlainObject, startsWith, trigger } from 'u
 
 export default function (App) {
     if (inBrowser && window.MutationObserver) {
-        requestAnimationFrame(() => init(App));
+        if (document.readyState === 'interactive') {
+            requestAnimationFrame(() => init(App));
+        } else {
+            new MutationObserver((records, observer) => {
+                if (document.body) {
+                    init(App);
+                    observer.disconnect();
+                }
+            }).observe(document.documentElement, { childList: true });
+        }
     }
 }
 

package/src/js/api/watch.js

@@ -13,7 +13,7 @@ export function callWatches(instance) {
             runWatches(instance, initial);
         }
         instance._watch = null;
-    });
+    }, true);
 }
 
 function runWatches(instance, initial) {

package/src/js/core/accordion.js

@@ -7,6 +7,7 @@ import {
     $,
     $$,
     attr,
+    children,
     css,
     dimensions,
     filter,
@@ -171,6 +172,9 @@ export default {
             });
 
             attr(content, { role: 'region', 'aria-labelledby': toggle.id });
+            if (isTag(content, 'ul')) {
+                attr(children(content), 'role', 'presentation');
+            }
         }
     },
 

package/src/js/core/dropnav.js

@@ -35,7 +35,6 @@ export default {
     mixins: [Class, Container],
 
     props: {
-        dropdown: String,
         align: String,
         clsDrop: String,
         boundary: Boolean,
@@ -55,7 +54,6 @@ export default {
     },
 
     data: {
-        dropdown: '> li > a, > ul > li > a',
         align: isRtl ? 'right' : 'left',
         clsDrop: 'uk-dropdown',
         clsDropbar: 'uk-dropnav-dropbar',
@@ -64,6 +62,7 @@ export default {
         dropbarAnchor: false,
         duration: 200,
         container: false,
+        selNavItem: '> li > a, > ul > li > a',
     },
 
     computed: {
@@ -136,8 +135,8 @@ export default {
         },
 
         items: {
-            get({ dropdown }, $el) {
-                return $$(dropdown, $el);
+            get({ selNavItem }, $el) {
+                return $$(selNavItem, $el);
             },
 
             watch(items) {
@@ -164,7 +163,7 @@ export default {
             name: 'mouseover focusin',
 
             delegate() {
-                return this.dropdown;
+                return this.selNavItem;
             },
 
             handler({ current, type }) {
@@ -191,7 +190,7 @@ export default {
             name: 'keydown',
 
             delegate() {
-                return this.dropdown;
+                return this.selNavItem;
             },
 
             handler(e) {

package/src/js/core/navbar.js

@@ -5,14 +5,15 @@ export default {
     extends: Dropnav,
 
     data: {
-        dropdown: '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
         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+
     },
 
     computed: {
         items: {
-            get({ dropdown }, $el) {
-                return $$(dropdown, $el);
+            get({ selNavItem }, $el) {
+                return $$(selNavItem, $el);
             },
 
             watch(items) {
@@ -21,7 +22,16 @@ export default {
                     '.uk-navbar-nav, .uk-navbar-left, .uk-navbar-right',
                     this.$el
                 )) {
-                    css(container, 'flexGrow', justify ? $$(this.dropdown, container).length : '');
+                    css(
+                        container,
+                        'flexGrow',
+                        justify
+                            ? $$(
+                                  '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle',
+                                  container
+                              ).length
+                            : ''
+                    );
                 }
 
                 attr($$('.uk-navbar-nav', this.$el), 'role', 'group');

package/src/js/core/sticky.js

@@ -163,7 +163,7 @@ export default {
 
                 const hide = this.isFixed && types.has('resize') && !sticky;
                 if (hide) {
-                    css(this.selTarget, 'transition', '0s');
+                    preventTransition(this.selTarget);
                     this.hide();
                 }
 
@@ -174,7 +174,6 @@ export default {
 
                 if (hide) {
                     this.show();
-                    requestAnimationFrame(() => css(this.selTarget, 'transition', ''));
                 }
 
                 const viewport = toPx('100vh', 'height');
@@ -359,6 +358,7 @@ export default {
                     this.show();
                     Animation.in(this.$el, this.animation).catch(noop);
                 } else {
+                    preventTransition(this.selTarget);
                     this.show();
                 }
             },
@@ -480,3 +480,8 @@ function coerce(value) {
 function reset(el) {
     css(el, { position: '', top: '', marginTop: '', width: '' });
 }
+
+function preventTransition(el) {
+    css(el, 'transition', '0s');
+    requestAnimationFrame(() => css(el, 'transition', ''));
+}

package/src/js/mixin/slider-nav.js

@@ -60,7 +60,10 @@ export default {
     },
 
     connected() {
-        attr(this.$el, 'aria-roledescription', 'carousel');
+        attr(this.$el, {
+            role: 'region',
+            ariaRoleDescription: 'carousel',
+        });
     },
 
     update: [

package/src/js/util/fastdom.js

@@ -8,8 +8,8 @@ export const fastdom = {
     reads: [],
     writes: [],
 
-    read(task) {
-        this.reads.push(task);
+    read(task, prepend) {
+        this.reads[prepend ? 'unshift' : 'push'](task);
         scheduleFlush();
         return task;
     },

package/src/less/components/visibility.less

@@ -4,6 +4,7 @@
 // Component:       `uk-hidden-*`
 //                  `uk-visible-*`
 //                  `uk-invisible`
+//                  `uk-hidden-visually`
 //                  `uk-visible-toggle`
 //                  `uk-hidden-hover`
 //                  `uk-invisible-hover`
@@ -96,28 +97,47 @@
  ========================================================================== */
 
 /*
- * Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ * Mind that `display: none`, `visibility: hidden` and `opacity: 0`
+ * remove the element from the accessibility tree and that
+ * `display: none` and `visibility: hidden` are not focusable.
+ *
  * The target stays visible if any element within receives focus through keyboard.
  */
 
 /*
- * Discard space when hidden.
+ * Remove space when hidden.
+ * 1. Remove from document flow.
+ * 2. Hide element and shrink its dimension. Can't use zero dimensions together
+ *    with `overflow: hidden` it would remove it from the accessibility tree.
+ * 3. Hide the single rendered pixel.
+ * 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
+ *    by screen readers and the visual tracking indicator of other assistive technologies.
  */
 
+.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
 .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+    /* 1 */
     position: absolute !important;
-    width: 0 !important;
-    height: 0 !important;
+    /* 2 */
+    width: 1px !important;
+    height: 1px !important;
     padding: 0 !important;
+    border: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
+    /* 3 */
+    clip-path: inset(50%) !important;
+    /* 4 */
+    white-space: nowrap !important;
+
 }
 
 /*
  * Keep space when hidden.
+ * Hide element without shrinking its dimension.
  */
 
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { clip-path: inset(50%) !important; }
 
 
 /* Based on Hover Capability of the Pointing Device

package/src/scss/components/visibility.scss

@@ -4,6 +4,7 @@
 // Component:       `uk-hidden-*`
 //                  `uk-visible-*`
 //                  `uk-invisible`
+//                  `uk-hidden-visually`
 //                  `uk-visible-toggle`
 //                  `uk-hidden-hover`
 //                  `uk-invisible-hover`
@@ -96,28 +97,47 @@
  ========================================================================== */
 
 /*
- * Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ * Mind that `display: none`, `visibility: hidden` and `opacity: 0`
+ * remove the element from the accessibility tree and that
+ * `display: none` and `visibility: hidden` are not focusable.
+ *
  * The target stays visible if any element within receives focus through keyboard.
  */
 
 /*
- * Discard space when hidden.
+ * Remove space when hidden.
+ * 1. Remove from document flow.
+ * 2. Hide element and shrink its dimension. Can't use zero dimensions together
+ *    with `overflow: hidden` it would remove it from the accessibility tree.
+ * 3. Hide the single rendered pixel.
+ * 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
+ *    by screen readers and the visual tracking indicator of other assistive technologies.
  */
 
+.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
 .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+    /* 1 */
     position: absolute !important;
-    width: 0 !important;
-    height: 0 !important;
+    /* 2 */
+    width: 1px !important;
+    height: 1px !important;
     padding: 0 !important;
+    border: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
+    /* 3 */
+    clip-path: inset(50%) !important;
+    /* 4 */
+    white-space: nowrap !important;
+
 }
 
 /*
  * Keep space when hidden.
+ * Hide element without shrinking its dimension.
  */
 
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { clip-path: inset(50%) !important; }
 
 
 /* Based on Hover Capability of the Pointing Device

package/tests/navbar.html

@@ -1584,7 +1584,7 @@
 
         <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
-                <div class="uk-navbar">
+                <div uk-navbar>
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
@@ -1629,7 +1629,7 @@
 
         <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
-                <div class="uk-navbar">
+                <div class="uk-navbar" uk-navbar>
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">