neo.mjs 6.10.12 → 6.10.14

package/src/layout/HBox.mjs

@@ -29,7 +29,7 @@ class HBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed width
-        !item.width && super.applyChildAttributes(item)
+        !item.width && super.applyChildAttributes(item);
     }
 }
 

package/src/layout/VBox.mjs

@@ -29,7 +29,7 @@ class VBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed height
-        !item.height && super.applyChildAttributes(item)
+        !item.height && super.applyChildAttributes(item);
     }
 }
 

package/src/main/DomAccess.mjs

@@ -360,10 +360,18 @@ class DomAccess extends Base {
         let node = this.getElement(data.id);
 
         if (node) {
-            node.focus();
+            // The children property means focus inner elements if possible.
+            if (!DomUtils.isFocusable(node) && data.children) {
+                // Prefer to focus input fields over buttons.
+                // querySelector('input,textarea,button') returns buttons first, so use multiple calls. 
+                node = node.querySelector('input:not(:disabled)') || node.querySelector('textarea:not(:disabled)') || node.querySelector('button:not(:disabled)') || [...node.querySelectorAll('*')].find(DomUtils.isFocusable);
+            }
+            if (node) {
+                node.focus();
 
-            if (Neo.isNumber(node.selectionStart)) {
-                node.selectionStart = node.selectionEnd = node.value.length;
+                if (Neo.isNumber(node.selectionStart)) {
+                    node.selectionStart = node.selectionEnd = node.value.length;
+                }
             }
         }
 

package/src/main/DomUtils.mjs

@@ -42,9 +42,31 @@ export default class DomUtils extends Base {
         }
     }
 
+    /**
+     * Analogous to the `HTMLElement` `querySelectorAll` method. Searches the passed element
+     * and all descendants for all elements for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when a desired element is reached.
+     * @returns {HTMLElement[]} An array of matching elements
+     */
+    static queryAll(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].filter(filterFn);
+    }
+
+    /**
+     * Analogous to the `HTMLElement` `querySelector` method. Searches the passed element
+     * and all descendants for the first element for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when the desired element is reached.
+     * @returns {HTMLElement} The first matching element
+     */
+    static query(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].find(filterFn);
+    }
+
     static isFocusable(e) {
         // May be used as a scopeless callback, so use "DomUtils", not "this"
-        return DomUtils.isTabbable(e) || e.getAttribute('tabIndex') == -1;
+        return DomUtils.isTabbable(e) || Number(e.getAttribute('tabIndex')) < 0;
     }
 
     static isTabbable(e) {
@@ -53,8 +75,9 @@ export default class DomUtils extends Base {
             style        = getComputedStyle(e),
             tabIndex     = e.getAttribute('tabIndex');
 
-        // Hidden elements not tabbable
-        if (!e.offsetParent || style.getPropertyValue('visibility') === 'hidden') {
+        // Hidden elements are not tabbable.
+        // Negative tabIndex also means not tabbable (Though still focusable)
+        if (!e.isConnected || !e.offsetParent || style.getPropertyValue('visibility') === 'hidden' || Number(tabIndex) < 0) {
             return false
         }
 

package/src/main/addon/Navigator.mjs

@@ -3,6 +3,13 @@ import DomAccess from '../DomAccess.mjs';
 import DomUtils  from '../DomUtils.mjs';
 import DomEvents from '../DomEvents.mjs';
 
+// We do not need to inject a synthesized "click" event when we detect an ENTER
+// keypress on these element types.
+const enterActivatedTags= {
+    A      : 1,
+    BUTTON : 1
+};
+
 /**
  * Addon for Navigator
  * @class Neo.main.addon.Navigator
@@ -40,13 +47,27 @@ class Navigator extends Base {
      *
      * When navigation occurs from one navigable element to another, the `navigate` event
      * will be fired.
+     *
+     * Note that if focus is expected to enter the subject, the navigable elements
+     * designated by the `selector` must be focusable in some way. So if not using natively
+     * focusable elements, they must have `tabIndex="-1"`.
+     *
+     * Upon navigation, the `aria-activedescendant` property is automatically updated
+     * on the `eventSource` element (which defaults to the subject element, but may be external)
+     *
+     * Pressing `Enter` when an item is active clicks that item.
+     *
+     * if `autoClick` is set to `true` in the data, simply navigating to an element will click it.
      * @param {*} data
      * @param {String} data.id The element id to navigate in.
      * @param {String} [data.eventSource] Optional - the element id to read keystrokes from.
-     * defaults to the main element id.
+     * defaults to the main element id. Select field uses this. Focus remains in the field's
+     * `<input>` element while navigating its dropdown.
      * @param {String} data.selector A CSS selector which identifies the navigable elements.
      * @param {String} data.activeCls A CSS class to add to the currently active navigable element.
-     * @param {Boolean} wrap Pass as `true` to have navigation wrap from first to last and vice versa.
+     * @param {Boolean} data.wrap Pass as `true` to have navigation wrap from first to last and vice versa.
+     * @param {Boolean} [data.autoClick=false] Pass as `true` to have navigation click the target navigated to.
+     * TabPanels will use this on their tab toolbar.
      */
     subscribe(data) {
         const
@@ -60,12 +81,16 @@ class Navigator extends Base {
             data.activeCls = 'neo-navigator-active-item'
         }
 
+        // Ensure that only *one* of the child focusables is actually tabbable.
+        // We use arrow keys for internal navigation. TAB must move out.
+        me.fixItemFocusability(data);
+
         // Finds a focusable item starting from a descendant el within one of our selector items
         data.findFocusable = el => DomUtils.closest(el, el =>
             // We're looking for an element that is focusable
             DomUtils.isFocusable(el) &&
             // And within our subject element
-            (subject.compcompareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
+            (subject.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
             // And within an element that matches our selector
             el.closest(data.selector)
         );
@@ -80,9 +105,39 @@ class Navigator extends Base {
         });
 
         eventSource.addEventListener('keydown', data.l1 = e => me.navigateKeyDownHandler(e, data));
-        subject.addEventListener('mousedown',    data.l2 = e => me.navigateMouseDownHandler(e, data));
-        subject.addEventListener('click',        data.l3 = e => me.navigateClickHandler(e, data));
-        subject.addEventListener('focusin',      data.l4 = e => me.navigateFocusInHandler(e, data));
+        subject.addEventListener('mousedown',   data.l2 = e => me.navigateMouseDownHandler(e, data));
+        subject.addEventListener('click',       data.l3 = e => me.navigateClickHandler(e, data));
+        subject.addEventListener('focusin',     data.l4 = e => me.navigateFocusInHandler(e, data));
+        subject.addEventListener('focusout',    data.l5 = e => me.navigateFocusOutHandler(e, data));
+    }
+
+    // The navigables we are dealing with, if they are focusable must *not* be tabbable.
+    // Only *one* must be tabbable, so that tabbing into the subject element goes to the
+    // one active element.
+    // 
+    // Tabbing *from* that must exit the subject element.
+    //
+    // So we must ensure that all the focusable elements except the first are not tabbable.
+    fixItemFocusability(data) {
+        // If the key events are being read from an external element, then that will always contain
+        // focus, so we have nothing to do here. The navigable items wil be inert and not
+        // focusable. Navigation will be "virtual". Select field navigates its dropdowns like this.
+        if (!data.subject.contains(data.eventSource)) {
+            return;
+        }
+
+        const
+            focusables        = DomUtils.queryAll(data.subject, DomUtils.isFocusable),
+            defaultActiveItem = focusables[0] || data.subject.querySelector(data.selector);
+
+        // Ensure the items are not tabbable.
+        // TAB navigates out of the subject.
+        focusables.forEach(e => e !== defaultActiveItem && (e.tabIndex = -1));
+
+        // Make at least one thing tabbable so focus can move into the subject element
+        if (defaultActiveItem) {
+            defaultActiveItem.tabIndex = 0;
+        }
     }
 
     unsubscribe(data) {
@@ -96,10 +151,15 @@ class Navigator extends Base {
             target.removeEventListener('mousedown',    data.l2);
             target.removeEventListener('click',        data.l3);
             target.removeEventListener('focusin',      data.l4);
+            target.removeEventListener('focusout',     data.l5);
         }
     }
 
+    // This is called if mutations take place within the subject element.
+    // We have to keep things in order if the list items change.
     navigateTargetChildListChange(mutations, data) {
+        this.fixItemFocusability(data);
+
         // Active item gone.
         // Try to activate the item at the same index;
         if (data.activeItem && !data.subject.contains(data.activeItem)) {
@@ -110,11 +170,33 @@ class Navigator extends Base {
     }
 
     navigateFocusInHandler(e, data) {
-        const target = e.target.closest(data.selector);
+        const
+            target            = e.target.closest(data.selector),
+            { relatedTarget } = e,
+            { subject }       = data;
 
         // If our targets are focusable and recieve focus, that is a navigation.
         if (target) {
             this.setActiveItem(target, data);
+
+            // This was internal navigation.
+            // The items must be focusable, but *not* tabbable.
+            // So remove tabbability on the last active item
+            if (subject.contains(relatedTarget)) {
+                relatedTarget.tabIndex = -1;
+            }
+        }
+    }
+
+    navigateFocusOutHandler(e, data) {
+        const { target } = e;
+
+        // Clear active class from the item we are leaving from.
+        target.closest(data.selector).classList.remove(data.activeCls);
+
+        // On focusout, leave the last active item as tabbable so user can TAB back in here
+        if (!DomUtils.isTabbable(target)) {
+            target.tabIndex = 0;
         }
     }
 
@@ -168,44 +250,36 @@ class Navigator extends Base {
             }
         }
 
-        let { key } = keyEvent,
+        let { key, target } = keyEvent,
             newActiveElement;
 
         switch(key) {
+            // Move to the previous navigable item
             case data.previousKey:
                 newActiveElement = me.navigateGetAdjacent(-1, data);
                 if (!newActiveElement && wrap) {
                     newActiveElement = subject.querySelector(`${data.selector}:last-of-type`);
                 }
                 break;
+            // Move to the next navigable item
             case data.nextKey:
                 newActiveElement = me.navigateGetAdjacent(1, data);
                 if (!newActiveElement && wrap) {
                     newActiveElement = subject.querySelector(data.selector);
                 }
                 break;
+            // Move to the first navigable item
             case 'Home':
                 newActiveElement = subject.querySelector(data.selector);
                 break;
+            // Move to the last navigable item
             case 'End':
                 newActiveElement = subject.querySelector(`${data.selector}:last-of-type`);
                 break;
+            // Click the currently active item if necessary
             case 'Enter':
-                if (data.activeItem) {
-                    const
-                        rect    = data.activeItem.getBoundingClientRect(),
-                        clientX = rect.x + (rect.width / 2),
-                        clientY = rect.y + (rect.height / 2);
-
-                    data.activeItem.dispatchEvent(new MouseEvent('click', {
-                        bubbles  : true,
-                        altKey   : Neo.altKeyDown,
-                        ctrlKey  : Neo.controlKeyDown,
-                        metaKey  : Neo.metaKeyDown,
-                        shiftKey : Neo.shiftKeyDown,
-                        clientX,
-                        clientY
-                    }))
+                if (data.activeItem && !enterActivatedTags[target.tagName]) {
+                    this.clickItem(data.activeItem);
                 }
         }
 
@@ -215,6 +289,30 @@ class Navigator extends Base {
         }
     }
 
+    clickItem(el) {
+        // The element knows how to click itself.
+        if (typeof el.click === 'function') {
+            el.click();
+        }
+        // It operates through a listenert, so needs an event firing into it.
+        else {
+            const
+                rect    = el.getBoundingClientRect(),
+                clientX = rect.x + (rect.width / 2),
+                clientY = rect.y + (rect.height / 2);
+
+            el.dispatchEvent(new MouseEvent('click', {
+                bubbles  : true,
+                altKey   : Neo.altKeyDown,
+                ctrlKey  : Neo.controlKeyDown,
+                metaKey  : Neo.metaKeyDown,
+                shiftKey : Neo.shiftKeyDown,
+                clientX,
+                clientY
+            }));
+        }
+    }
+
     /**
      * Navigates to the passed 
      * @param {String|Number} newActiveElement The id of the new active element in the subject
@@ -232,15 +330,20 @@ class Navigator extends Base {
         // Can navigate by index. This is useful if the active item is deleted.
         // We can navigate to the same index and preserve UI stability.
         if (typeof newActiveElement === 'number') {
-            newActiveElement = data.subject.querySelectorAll(data.selector)[newActiveElement];
+            newActiveElement = data.subject.querySelectorAll(data.selector)?.[newActiveElement];
         }
         else if (typeof newActiveElement === 'string') {
             newActiveElement = DomAccess.getElement(newActiveElement);
         }
 
+        // Could not do what was asked because we could not find the requested item
+        if (!newActiveElement) {
+            return;
+        }
+
         // Find a focusable element which may be the item, or inside the item to draw focus to.
         // For example a Chip list in which .neo-list-items contain focusable Chips.
-        const focusTarget = [newActiveElement, ...newActiveElement.querySelectorAll('*')].find(DomUtils.isFocusable);
+        const focusTarget = DomUtils.query(newActiveElement, DomUtils.isFocusable);
 
         // If the item contains a focusable, we focus it and then react in navigateFocusInHandler
         if (focusTarget) {
@@ -270,7 +373,10 @@ class Navigator extends Base {
             block    : 'nearest',
             inline   : 'nearest',
             nehavior : 'smooth'
-        })
+        });
+
+        // Link the event source or the encapsulating element to the active item for A11Y
+        (data.eventSource || data.subject).setAttribute('aria-activedescendant', data.activeItem.id);
 
         DomEvents.sendMessageToApp({
             type                : 'neonavigate',
@@ -286,7 +392,13 @@ class Navigator extends Base {
             ctrlKey             : Neo.controlKeyDown,
             metaKey             : Neo.metaKeyDown,
             shiftKey            : Neo.shiftKeyDown
-        })
+        });
+
+        // Navigation causes click if autoClick set.
+        // TabPanels work like this.
+        if (data.autoClick) {
+            this.clickItem(newActiveElement);
+        }
     }
 
     navigateGetAdjacent(direction = 1, data) {

package/src/manager/DomEvent.mjs

@@ -111,7 +111,10 @@ class DomEvent extends Base {
                 // console.log('fire', eventName, data, listeners, path);
 
                 if (Array.isArray(listeners)) {
-                    listeners.forEach(listener => {
+                    // Stop iteration if a handler returns false
+                    listeners.every(listener => {
+                        let result;
+
                         if (listener && listener.fn) {
                             delegationTargetId = me.verifyDelegationPath(listener, data.path);
 
@@ -131,7 +134,7 @@ class DomEvent extends Base {
 
                                     // Handler needs to know which actual target matched the delegate
                                     data.currentTarget = delegationTargetId;
-                                    listener.fn.apply(listener.scope || globalThis, [data]);
+                                    result = listener.fn.apply(listener.scope || globalThis, [data]);
 
                                     if (!listener.bubble) {
                                         bubble = false;
@@ -139,6 +142,8 @@ class DomEvent extends Base {
                                 }
                             }
                         }
+                        // If a listener returns false, we stop iterating the listeners
+                        return result !== false
                     });
                 }
             }
@@ -153,7 +158,8 @@ class DomEvent extends Base {
                 break;
             }
 
-            if (!bubble) {
+            // Honour the Event cancelBubble property
+            if (!bubble || data.cancelBubble) {
                 break;
             }
         }

package/src/manager/Focus.mjs

@@ -168,7 +168,9 @@ class Focus extends CoreBase {
      * @protected
      */
     setComponentFocus(opts, containsFocus) {
-        let data = {},
+        let data = {
+                relatedTarget : opts.data.relatedTarget
+            },
             components = opts.componentPath.map(id => Neo.getComponent(id)),
             handler;
 

package/src/util/String.mjs

@@ -16,7 +16,8 @@ class StringUtil extends Base {
         '"' : '"',
         '\'': ''',
         '$' : '$',
-        '\\': '\'
+        '\\': '\',
+        '/' : '/'
     }
     /**
      * @member {RegExp} charPattern
@@ -27,7 +28,7 @@ class StringUtil extends Base {
      * @member {RegExp} entityPattern
      * @static
      */
-    static entityPattern = /(&)|(<)|(>)|(")|(')|($)|(\)/g
+    static entityPattern = /(&)|(<)|(>)|(")|(')|($)|(\)|(/)/g
 
     static config = {
         /**

package/test/components/files/form/field/Select.mjs

@@ -63,7 +63,7 @@ StartTest(t => {
 
         await t.waitForSelector('.neo-picker-container');
 
-        t.hasAttributeValue(inputField, 'aria-expanded', 'true');
+        await t.waitFor(() => inputField.getAttribute('aria-expanded') === 'true');
 
         // Roles correct
         t.hasAttributeValue('.neo-picker-container .neo-list', 'role', 'listbox');
@@ -80,6 +80,8 @@ StartTest(t => {
 
         t.hasAttributeValue(inputField, 'aria-activedescendant', 'neo-list-1__AL');
 
+        await t.waitFor(100);
+
         // Select that first item.
         await t.type(null, '[ENTER]');
 
@@ -100,7 +102,7 @@ StartTest(t => {
         t.is(blurCount, 1);
     });
 
-    t.iit('Keyboard navigation', async t => {
+    t.it('Keyboard navigation', async t => {
         await setup();
         const blurEl = document.createElement('input');
         document.body.appendChild(blurEl);
@@ -128,6 +130,8 @@ StartTest(t => {
 
         await t.waitForSelectorNotFound('.neo-picker-container:visible');
 
+        await t.waitFor(100);
+
         t.is(inputField.value, 'Wyoming');
 
         await t.type(null, '[DOWN]');
@@ -139,11 +143,13 @@ StartTest(t => {
 
         await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wisconsin")');
 
+        await t.waitFor(100);
+
         await t.type(null, '[ENTER]');
 
         await t.waitForSelectorNotFound('.neo-picker-container:visible');
 
-        t.is(inputField.value, 'Wisconsin');
+        await t.waitFor(() => inputField.value === 'Wisconsin');
 
         await t.type(null, '[DOWN]');
 
@@ -183,6 +189,8 @@ StartTest(t => {
         // Picker Must show with Maryland activated
         await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Maryland")');
 
+        await t.waitFor(100);
+
         // Matches three states
         t.selectorCountIs('.neo-picker-container .neo-list-item', 3);
 
@@ -192,11 +200,24 @@ StartTest(t => {
         // Blur without selecting a value
         await t.type(null, '[TAB]');
 
-        await t.waitFor(100)
+        await t.waitFor(100);
 
         // Inputs must have been cleared. Both typeahead and filter.
         t.isDeeply(t.query(`#${testId} input`).map(i => i.value), ['', '']);
 
         blurEl.remove();
     });
+
+    t.it('With store as data', async t => {
+        await setup({
+            labelText : 'Foo',
+            store     : ['Foo', 'Bar', 'Bletch']
+        });
+        await t.click('.neo-field-trigger.fa-caret-down');
+
+        await t.waitForSelector('.neo-list-item:contains(Foo)');
+
+        // All data ityems represented
+        t.selectorCountIs('.neo-list-item', 3);
+    });
 });

package/resources/data/deck/learnneo/p/AddingProperties.md

@@ -1 +0,0 @@
-### todo: Adding Properties

package/resources/data/deck/learnneo/p/ComponentState.md

@@ -1 +0,0 @@
-### todo: Updating View State

package/resources/scss/src/apps/newwebsite/Viewport.scss

@@ -1,32 +0,0 @@
-.newwebsite-viewport {
-    align-items    : center !important;
-    display        : flex !important;
-    gap            : 48px;
-    justify-content: center !important;
-    padding        : 10% 15% 15% 15%;
-}
-
-.button-group {
-    display       : flex !important;
-    flex-direction: row-reverse !important;
-    gap           : 8px !important;
-}
-
-.neo-h1 {
-    font-size  : 48px;
-    font-weight: 600;
-    text-align : center;
-}
-
-.vector {
-    background-image   : url("../../../../../../resources/images/Neo_Vector.svg");
-    background-position: center center;
-    background-repeat  : no-repeat;
-    background-size    : contain;
-    height             : 150px;
-    width              : 100%;
-}
-
-.get-started-button {
-    cursor: not-allowed !important;
-}

package/resources/scss/theme-neo-light/design-tokens/Components.scss

@@ -1,3 +0,0 @@
-:root .neo-theme-neo-light {
-    --cmp-button-bg                       : blue;
-}