uikit 3.7.3-dev.af32c46e8 → 3.7.4-dev.e74b22b13

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.7.3-dev.af32c46e8",
+  "version": "3.7.4-dev.e74b22b13",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/navbar.js

@@ -2,7 +2,7 @@ import {active} from './drop';
 import Class from '../mixin/class';
 import FlexBug from '../mixin/flex-bug';
 import Container from '../mixin/container';
-import {$, $$, addClass, after, assign, css, hasClass, height, includes, isRtl, isVisible, matches, noop, parent, Promise, query, remove, toFloat, Transition, within} from 'uikit-util';
+import {$, $$, addClass, after, assign, css, findIndex, hasAttr, hasClass, height, includes, isRtl, isVisible, matches, noop, once, parent, Promise, query, remove, selFocusable, toFloat, Transition, within} from 'uikit-util';
 
 const navItem = '.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle';
 
@@ -91,8 +91,13 @@ export default {
             get({clsDrop}, $el) {
                 const dropdowns = $$(`.${clsDrop}`, $el);
 
-                if (this.container !== $el) {
-                    $$(`.${clsDrop}`, this.container).forEach(el => !includes(dropdowns, el) && dropdowns.push(el));
+                if (this.dropContainer !== $el) {
+                    $$(`.${clsDrop}`, this.dropContainer).forEach(el => {
+                        const dropdown = this.getDropdown(el);
+                        if (!includes(dropdowns, el) && dropdown && dropdown.target && within(dropdown.target, this.$el)) {
+                            dropdowns.push(el);
+                        }
+                    });
                 }
 
                 return dropdowns;
@@ -108,6 +113,10 @@ export default {
 
             immediate: true
 
+        },
+
+        toggles({dropdown}, $el) {
+            return $$(dropdown, $el);
         }
 
     },
@@ -120,7 +129,7 @@ export default {
     events: [
 
         {
-            name: 'mouseover',
+            name: 'mouseover focusin',
 
             delegate() {
                 return this.dropdown;
@@ -128,13 +137,87 @@ export default {
 
             handler({current}) {
                 const active = this.getActive();
-                if (active && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
+                if (active && includes(active.mode, 'hover') && active.target && !within(active.target, current) && !active.tracker.movesTo(active.$el)) {
                     active.hide(false);
                 }
             }
 
         },
 
+        {
+            name: 'keydown',
+
+            delegate() {
+                return this.dropdown;
+            },
+
+            handler(e) {
+
+                const {current, keyCode} = e;
+                const active = this.getActive();
+
+                if (keyCode === keyMap.DOWN && hasAttr(current, 'aria-expanded')) {
+
+                    e.preventDefault();
+
+                    if (!active || active.target !== current) {
+                        current.click();
+                        once(this.dropContainer, 'show', ({target}) => focusFirstFocusableElement(target));
+                    } else {
+                        focusFirstFocusableElement(active.$el);
+                    }
+
+                }
+
+                handleNavItemNavigation(e, this.toggles, active);
+            }
+        },
+
+        {
+            name: 'keydown',
+
+            el() {
+                return this.dropContainer;
+            },
+
+            delegate() {
+                return `.${this.clsDrop}`;
+            },
+
+            handler(e) {
+
+                const {current, keyCode} = e;
+
+                if (!includes(this.dropdowns, current)) {
+                    return;
+                }
+
+                const active = this.getActive();
+                const elements = $$(selFocusable, current);
+                const i = findIndex(elements, el => matches(el, ':focus'));
+
+                if (keyCode === keyMap.UP) {
+                    e.preventDefault();
+                    if (i > 0) {
+                        elements[i - 1].focus();
+                    }
+                }
+
+                if (keyCode === keyMap.DOWN) {
+                    e.preventDefault();
+                    if (i < elements.length - 1) {
+                        elements[i + 1].focus();
+                    }
+                }
+
+                if (keyCode === keyMap.ESC) {
+                    active && active.target && active.target.focus();
+                }
+
+                handleNavItemNavigation(e, this.toggles, active);
+            }
+        },
+
         {
             name: 'mouseleave',
 
@@ -142,10 +225,14 @@ export default {
                 return this.dropbar;
             },
 
+            filter() {
+                return this.dropbar;
+            },
+
             handler() {
                 const active = this.getActive();
 
-                if (active && !this.dropdowns.some(el => matches(el, ':hover'))) {
+                if (active && includes(active.mode, 'hover') && !this.dropdowns.some(el => matches(el, ':hover'))) {
                     active.hide();
                 }
             }
@@ -249,7 +336,7 @@ export default {
     methods: {
 
         getActive() {
-            return active && includes(active.mode, 'hover') && within(active.target, this.$el) && active;
+            return active && within(active.target, this.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -282,3 +369,45 @@ export default {
     }
 
 };
+
+function handleNavItemNavigation(e, toggles, active) {
+
+    const {current, keyCode} = e;
+    const target = active && active.target || current;
+    const i = toggles.indexOf(target);
+
+    // Left
+    if (keyCode === keyMap.LEFT && i > 0) {
+        active && active.hide(false);
+        toggles[i - 1].focus();
+    }
+
+    // Right
+    if (keyCode === keyMap.RIGHT && i < toggles.length - 1) {
+        active && active.hide(false);
+        toggles[i + 1].focus();
+    }
+
+    if (keyCode === keyMap.TAB) {
+        target.focus();
+        active && active.hide(false);
+    }
+}
+
+function focusFirstFocusableElement(el) {
+    if (!$(':focus', el)) {
+        const focusEl = $(selFocusable, el);
+        if (focusEl) {
+            focusEl.focus();
+        }
+    }
+}
+
+const keyMap = {
+    TAB: 9,
+    ESC: 27,
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40
+};

package/src/js/core/overflow-auto.js

@@ -7,12 +7,14 @@ export default {
 
     props: {
         selContainer: String,
-        selContent: String
+        selContent: String,
+        minHeight: Number
     },
 
     data: {
         selContainer: '.uk-modal',
-        selContent: '.uk-modal-dialog'
+        selContent: '.uk-modal-dialog',
+        minHeight: 150
     },
 
     computed: {
@@ -28,7 +30,7 @@ export default {
     },
 
     connected() {
-        css(this.$el, 'minHeight', 150);
+        css(this.$el, 'minHeight', this.minHeight);
     },
 
     update: {
@@ -41,7 +43,7 @@ export default {
 
             return {
                 current: toFloat(css(this.$el, 'maxHeight')),
-                max: Math.max(150, height(this.container) - (dimensions(this.content).height - height(this.$el)))
+                max: Math.max(this.minHeight, height(this.container) - (dimensions(this.content).height - height(this.$el)))
             };
         },
 

package/src/js/core/switcher.js

@@ -10,6 +10,7 @@ export default {
     props: {
         connect: String,
         toggle: String,
+        itemNav: String,
         active: Number,
         swiping: Boolean
     },
@@ -17,6 +18,7 @@ export default {
     data: {
         connect: '~.uk-switcher',
         toggle: '> * > :first-child',
+        itemNav: false,
         active: 0,
         swiping: true,
         cls: 'uk-active',
@@ -92,7 +94,7 @@ export default {
             name: 'click',
 
             el() {
-                return this.connects;
+                return this.connects.concat(this.itemNav ? queryAll(this.itemNav, this.$el) : []);
             },
 
             delegate() {

package/src/js/core/toggle.js

@@ -86,6 +86,18 @@ export default {
 
         },
 
+        {
+            name: 'keydown',
+
+            handler(e) {
+                // Space
+                if (e.keyCode === 32) {
+                    e.preventDefault();
+                    this.$el.click();
+                }
+            }
+        },
+
         {
 
             name: 'click',
@@ -99,7 +111,7 @@ export default {
                 let link;
                 if (closest(e.target, 'a[href="#"], a[href=""]')
                     || (link = closest(e.target, 'a[href]')) && (
-                        !attr(this.$el, 'aria-expanded')
+                        attr(this.$el, 'aria-expanded') !== 'true'
                         || link.hash && matches(this.target, link.hash)
                     )
                 ) {
@@ -192,3 +204,4 @@ export default {
     }
 
 };
+

package/src/js/util/filter.js

@@ -1,4 +1,3 @@
-import {hasAttr} from './attr';
 import {inBrowser} from './env';
 import {isDocument, isElement, isString, noop, startsWith, toNode, toNodes} from './lang';
 
@@ -33,8 +32,9 @@ export function isInput(element) {
     return toNodes(element).some(element => matches(element, selInput));
 }
 
+export const selFocusable = `${selInput},a[href],[tabindex]`;
 export function isFocusable(element) {
-    return isInput(element) || matches(element, 'a[href],button') || hasAttr(element, 'tabindex');
+    return matches(element, selFocusable);
 }
 
 export function parent(element) {

package/src/less/components/form.less

@@ -73,7 +73,7 @@
 
 @form-select-padding-right:                     20px;
 @form-select-icon-color:                        @global-color;
-@form-select-option-color:                      #444;
+@form-select-option-color:                      @global-color;
 @form-select-disabled-icon-color:               @global-muted-color;
 
 @form-datalist-padding-right:                   20px;

package/src/less/components/navbar.less

@@ -251,7 +251,7 @@
 
 .uk-navbar-nav > li:hover > a,
 .uk-navbar-nav > li > a:focus,
-.uk-navbar-nav > li > a.uk-open {
+.uk-navbar-nav > li > a[aria-expanded="true"] {
     color: @navbar-nav-item-hover-color;
     outline: none;
     .hook-navbar-nav-item-hover;

package/src/scss/components/form.scss

@@ -73,7 +73,7 @@ $form-width-large:                               500px !default;
 
 $form-select-padding-right:                      20px !default;
 $form-select-icon-color:                         $global-color !default;
-$form-select-option-color:                       #444 !default;
+$form-select-option-color:                       $global-color !default;
 $form-select-disabled-icon-color:                $global-muted-color !default;
 
 $form-datalist-padding-right:                    20px !default;

package/src/scss/components/navbar.scss

@@ -251,7 +251,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-nav > li:hover > a,
 .uk-navbar-nav > li > a:focus,
-.uk-navbar-nav > li > a.uk-open {
+.uk-navbar-nav > li > a[aria-expanded="true"] {
     color: $navbar-nav-item-hover-color;
     outline: none;
     @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();}

package/src/scss/variables-theme.scss

@@ -413,7 +413,7 @@ $form-width-medium: 200px !default;
 $form-width-large: 500px !default;
 $form-select-padding-right: 20px !default;
 $form-select-icon-color: $global-color !default;
-$form-select-option-color: #444 !default;
+$form-select-option-color: $global-color !default;
 $form-select-disabled-icon-color: $global-muted-color !default;
 $form-datalist-padding-right: 20px !default;
 $form-datalist-icon-color: $global-color !default;

package/src/scss/variables.scss

@@ -411,7 +411,7 @@ $form-width-medium: 200px !default;
 $form-width-large: 500px !default;
 $form-select-padding-right: 20px !default;
 $form-select-icon-color: $global-color !default;
-$form-select-option-color: #444 !default;
+$form-select-option-color: $global-color !default;
 $form-select-disabled-icon-color: $global-muted-color !default;
 $form-datalist-padding-right: 20px !default;
 $form-datalist-icon-color: $global-color !default;

package/tests/switcher.html

@@ -334,7 +334,7 @@
                             <td><code>connect</code></td>
                             <td>CSS selector</td>
                             <td>~.uk-switcher</td>
-                            <td>Related items container. By default succeeding elements with class 'uk-switcher'.</td>
+                            <td>Related items container. By default, succeeding elements with class 'uk-switcher'.</td>
                         </tr>
                         <tr>
                             <td><code>toggle</code></td>
@@ -342,6 +342,12 @@
                             <td>> * > :first-child</td>
                             <td>Toggle selector - triggers content switching on click.</td>
                         </tr>
+                        <tr>
+                            <td><code>itemNav</code></td>
+                            <td>CSS selector</td>
+                            <td>false</td>
+                            <td>Related nav container. By default, nav items are found in related items container only.</td>
+                        </tr>
                         <tr>
                             <td><code>active</code></td>
                             <td>Number</td>