@atlassian/aui 9.5.2 → 9.6.0

package/src/js/aui/dropdown2.js

@@ -29,17 +29,16 @@ function setDropdownTriggerActiveState(trigger, isActive) {
 /**
  * Focus the appropriate thing when a dropdown is shown.
  * The element focussed will vary depending on the type of dropdown and
- * the input modality (e.g., whether it was an event 100% attributable to a hardware mouse or keyboard).
+ * the input modality.
  *
  * @param {HTMLElement} dropdown - the dropdown being shown
  * @param {Event} [e] - the event that triggered the dropdown being shown
  */
 function handleFocus(dropdown, e = {}) {
-    if (e && e.type) {
-        const isMouseEvent = e.type.indexOf('mouse') > -1 || e.type.indexOf('hover') > -1;
+    if (e && e.type && e.type.indexOf('mouse') === -1) {
         const isKeyDownEvent = e.type.indexOf('key') > -1;
         if (dropdown.isSubmenu) {
-            !isMouseEvent ? dropdown.focusItem(0) : dropdown.focus();
+            dropdown.focusItem(0);
         } else if (isKeyDownEvent){
             const isUpArrow = e.keyCode === keyCode.UP;
             // set focus to last item in the menu to navigate bottom -> up
@@ -104,17 +103,6 @@ function setDropdownContents (dropdown, json) {
     state(dropdown).set('loading-state', SUCCESS);
     dropdown.innerHTML = makeAsyncDropdownContents(json);
     skate.init(dropdown);
-    /* TODO: where to check for focus
-     * to make the loading state more accessible, we might need to move focus inside the dropdown container,
-     * which would change the check from "focus is on trigger" to "focus is within dropdown".
-     */
-    doIfTrigger(dropdown, function(trigger) {
-        // Only manage focus if the focus was on the triggering element at the time it loaded.
-        // Otherwise, the user likely moved on and doesn't want it any more.
-        if (document.activeElement === trigger) {
-            handleFocus(dropdown);
-        }
-    });
 }
 
 function setDropdownErrorState (dropdown) {
@@ -298,8 +286,7 @@ function triggerCreated (trigger) {
         .on('aui-button-invoke', handleIt)
         .on('click', handleIt)
         .on('keydown', handleKeydown)
-        .on('mouseenter', handleMouseEnter)
-    ;
+        .on('mouseenter', handleMouseEnter);
 }
 
 var triggerPrototype = {
@@ -563,17 +550,16 @@ function bindDropdownBehaviourToLayer(dropdown) {
         getAllDropdownItems(dropdown).removeClass('active aui-dropdown2-active');
 
         doIfTrigger(dropdown, function (trigger) {
+            setDropdownTriggerActiveState(trigger, false);
+
+            // Focus the submenu trigger when the submenu is closed
             if (wasProbablyClosedViaKeyboard()) {
                 trigger.focus();
-                setDropdownTriggerActiveState(trigger, trigger.hasSubmenu && trigger.hasSubmenu());
-            } else {
-                setDropdownTriggerActiveState(trigger, false);
             }
         });
 
         // Gets set by submenu trigger invocation. Bad coupling point?
         delete dropdown.isSubmenu;
-        setTrigger(dropdown, null);
     });
 }
 
@@ -606,12 +592,13 @@ function bindItemInteractionBehaviourToDropdown (dropdown) {
             keyboardCloseDetected();
         } else if (e.keyCode === keyCode.TAB) {
             keyboardCloseDetected();
-            dropdown.hide(e);
+            // On TAB we should close the menu and all submenus.
+            dropdown.hideAll(false);
         }
     });
 
     const hideIfNotSubmenuAndNotInteractive = function(e) {
-        var item = e.currentTarget;
+        const item = e.currentTarget;
 
         if (item.getAttribute('aria-disabled') === 'true') {
             e.preventDefault();
@@ -620,50 +607,48 @@ function bindItemInteractionBehaviourToDropdown (dropdown) {
 
         const isSubmenuTrigger = e.currentTarget.hasSubmenu && e.currentTarget.hasSubmenu();
         if (!isSubmenuTrigger && !item.classList.contains('aui-dropdown2-interactive')) {
-
-            var theMenu = dropdown;
-            do {
-                var dd = layer(theMenu);
-                theMenu = layer(theMenu).below();
-                if (dd.$el.is('.aui-dropdown2')) {
-                    dd.hide(e);
-                }
-            } while (theMenu);
+            dropdown.hideAll(true);
         }
-    };
+    }
 
     $dropdown.on('click keydown', 'a, button, [role="menuitem"], [role="menuitemcheckbox"], [role="checkbox"], [role="menuitemradio"], [role="radio"]', function (e) {
         if (!belongsToDropdown(e.target)) {
             return;
         }
-        const item = e.currentTarget;
         const eventKeyCode = e.keyCode;
         const isEnter = eventKeyCode === keyCode.ENTER;
         const isSpace = eventKeyCode === keyCode.SPACE;
 
-        // AUI-4283: Accessibility - need to ignore enter on links/buttons so
-        // that the dropdown remains visible to allow the click event to eventually fire.
-        const itemIgnoresEnter = isEnter && $(item).is('a[href], button');
-
-        if (!itemIgnoresEnter && (e.type === 'click' || isEnter || isSpace)) {
+        if ((e.type === 'click' || isEnter || isSpace)) {
             hideIfNotSubmenuAndNotInteractive(e);
         }
     });
 
-    // close a submenus when the mouse moves over items other than its trigger
+    // close all submenus when the mouse moves over items other than its trigger
     $dropdown.on('mouseenter', 'a, button, [role="menuitem"], [role="menuitemcheckbox"], [role="checkbox"], [role="menuitemradio"], [role="radio"]', function (e) {
         if (!belongsToDropdown(e.target)) {
             return;
         }
-        var item = e.currentTarget;
-        var hasSubmenu = item.hasSubmenu && item.hasSubmenu();
-
-        if (!e.isDefaultPrevented() && !hasSubmenu) {
-            var maybeALayer = layer(dropdown).above();
 
-            if (maybeALayer) {
-                layer(maybeALayer).hide();
+        // Focus the current element to allow Screen Reader to announce a focused menuitem.
+        e.currentTarget.focus();
+
+        // We should close all submenus above which are not related to the focused trigger.
+        // For example if we hover over the trigger for submenu for this trigger be shown, when we move
+        // focus/mouse on the another trigger the previous will be closed.
+        let layerAbove = $(layer(dropdown).above()).get(0);
+        while (layerAbove && layerAbove.isDropdown && layerAbove !== dropdown) {
+            const layerId = layerAbove.getAttribute('id');
+            const targetDropdownId = e.target.getAttribute('aria-controls');
+            const nextLayer = layer(layerAbove).above();
+
+            if (targetDropdownId !== layerId) {
+                // We should .hide() only after we get nextLayer,
+                // otherwise we will get the first visible layer.
+                layer(layerAbove).hide();
             }
+
+            layerAbove = $(nextLayer).get(0);
         }
     });
 }
@@ -751,7 +736,16 @@ var dropdownPrototype = {
      * @returns {HTMLElement}
      */
     show: function (e) {
-        var dropdown = this;
+        const dropdown = this;
+
+        // In case we have 2 triggers for the same submenu
+        // we can have two active/expanded triggers at the same time.
+        // In order to avoid such behavior we need to reset current active trigger,
+        // before we update/replace it.
+        doIfTrigger(dropdown, (trigger) => {
+            setDropdownTriggerActiveState(trigger, false);
+        });
+
         if (e && e.currentTarget && e.currentTarget.classList.contains('aui-dropdown2-trigger')) {
             setTrigger(dropdown, e.currentTarget);
         }
@@ -759,6 +753,7 @@ var dropdownPrototype = {
         layer(dropdown).show();
 
         doIfTrigger(dropdown, function (trigger) {
+            setDropdownTriggerActiveState(trigger, true);
             setLayerAlignment(dropdown, trigger);
         });
 
@@ -783,6 +778,35 @@ var dropdownPrototype = {
         return this;
     },
 
+    /**
+     * Explicitly hides the whole menu with submenus and focus the initial triggers based on provided param.
+     *
+     * @param focusTrigger - Get focus back to the initial trigger when menu is closed. Default value is "true".
+     * @returns {HTMLElement}
+     */
+    hideAll: function (focusTrigger = true) {
+        let dropdownMenuBelow = layer(this).below();
+        let previousLayout = layer(this);
+
+        while (dropdownMenuBelow && dropdownMenuBelow.get(0).isDropdown) {
+            previousLayout = layer(dropdownMenuBelow);
+            dropdownMenuBelow = previousLayout.below();
+            previousLayout.hide();
+        }
+
+        // Get focus back to the dropdown's trigger after
+        // the dropdown is closed.
+        if (previousLayout && focusTrigger) {
+            doIfTrigger(previousLayout.el, (trigger) => {
+                trigger.focus();
+                setTrigger(previousLayout.el, null);
+            });
+        }
+
+        layer(this).hide();
+        return this;
+    },
+
     /**
      * Shifts explicit focus to the next available item in the menu
      *
@@ -796,6 +820,8 @@ var dropdownPrototype = {
         if ($items.last()[0] !== selected) {
             idx = $items.toArray().indexOf(selected);
             this.focusItem($items.get(idx + 1));
+        } else {
+            this.focusItem(0);
         }
     },
 
@@ -812,6 +838,8 @@ var dropdownPrototype = {
         if ($items.first()[0] !== selected) {
             idx = $items.toArray().indexOf(selected);
             this.focusItem($items.get(idx - 1));
+        } else {
+            this.focusItem($items.length - 1);
         }
     },
 
@@ -836,7 +864,12 @@ var dropdownPrototype = {
      */
     isVisible: function () {
         return layer(this).isVisible();
-    }
+    },
+
+    /**
+     * Shows that current element is a dropdown
+     */
+    isDropdown: true
 };
 
 // Web component API for dropdowns
@@ -948,7 +981,7 @@ const ItemLinkEl = skate('aui-item-link', {
 const [ItemCheckboxEl, ItemRadioEl] = ['checkbox', 'radio'].map(type => {
     return skate(`aui-item-${type}`, {
         template: template(
-            `<span role="${type}" class="aui-dropdown2-${type}" tabindex="-1"><content></content></span>`
+            `<span role="menuitem${type}" class="aui-dropdown2-${type}" tabindex="-1"><content></content></span>`
         ),
         attributes: {
             'item-id': stringAttributeHandlerGenerator('id'),
@@ -1053,7 +1086,7 @@ skate('aui-dropdown2-sub-trigger', {
 
             // swap from the "menuitemX" role to plain role for VoiceOver
             if (supportsVoiceOver()) {
-                checkbox.setAttribute('role',type);
+                checkbox.setAttribute('role', `menuitem${type}`);
             }
         },
 

package/src/js/aui/focus-manager.js

@@ -71,7 +71,7 @@ function getLastFocus ($el) {
 }
 
 function elementTrapsFocus ($el) {
-    return $el.is('.aui-dialog2');
+    return $el.is('.aui-dialog2') || $el.is('[aui-focus-trap="true"]');
 }
 
 function FocusManager() {
@@ -146,7 +146,15 @@ function focusTrapHandler(focusTrapStack, event) {
     const $focusTrapElement = focusTrapStack[focusTrapStack.length - 1];
     const $tabbableElements = $focusTrapElement.find(':aui-tabbable');
 
-    // it's not possible to trap focus inside something with no focussable elements!
+    // Try to focus the container if:
+    //  - it is with aui-focus-trap=true attribute
+    //  - there isn't any focusable element inside.
+    if (!$tabbableElements.length && elementTrapsFocus($focusTrapElement)) {
+        $focusTrapElement.trigger('focus');
+        event.preventDefault();
+    }
+
+    // it's not possible to trap focus inside something with no focusable elements!
     if (!$tabbableElements.length) {
         return;
     }

package/src/js/aui/inline-dialog2.js

@@ -14,10 +14,13 @@ import getFocusManager from './focus-manager';
 const DEFAULT_HOVEROUT_DELAY = 1000;
 
 function changeTrigger(element, newTrigger) {
-    doIfTrigger(element, function(oldTrigger) {
-        oldTrigger.setAttribute('aria-expanded', 'false');
-        newTrigger.setAttribute('aria-expanded', element.open);
-    });
+    if (isPopupMenu(element)) {
+        doIfTrigger(element, function(oldTrigger) {
+            oldTrigger.setAttribute('aria-expanded', 'false');
+            newTrigger.setAttribute('aria-expanded', element.open);
+        });
+    }
+
     setTrigger(element, newTrigger);
 }
 
@@ -32,26 +35,6 @@ function enableAlignment (element, trigger) {
             eventsEnabled: true
         };
 
-        alignmentOptions = {... alignmentOptions, ...{
-            onCreate: () => {
-                if (shouldFocus(element)) {
-                    getFocusManager().enter($(element), $(trigger));
-                }
-            },
-            onEvents: {
-                enabled: () => {
-                    if (shouldFocus(element)) {
-                        getFocusManager().enter($(element));
-                    }
-                },
-                disabled: () => {
-                    if (shouldFocus(element)) {
-                        getFocusManager().exit($(element));
-                    }
-                }
-            }
-        }};
-
         element._auiAlignment = new Alignment(element, trigger, alignmentOptions);
     }
 }
@@ -170,6 +153,7 @@ function rebindMouseEvents(el) {
         el.addEventListener('blur', onBlur);
     }
 }
+
 function namespaceEvent(eventName, elId) {
     return `${eventName}.nested-layer-${elId}`
 }
@@ -210,8 +194,7 @@ function setupNestedLayerHandlers(el) {
         });
 }
 
-function teardownNestedLayerHandlers(el) {
-    const elId = el.id;
+function teardownNestedLayerHandlers(elId) {
     $(document)
         .off(namespaceEvent('aui-layer-hide', elId))
         .off(namespaceEvent('aui-layer-show', elId))
@@ -241,6 +224,10 @@ function shouldFocus(element) {
     return element.respondsTo !== 'hover';
 }
 
+function isPopupMenu(element) {
+    return element.getAttribute('role') !== 'dialog';
+}
+
 /**
  * Abstracted as skate fires custom attributes handlers before the component creation if they are pre-populated.
  *
@@ -257,17 +244,39 @@ function maybeInitialise(element) {
     layer(element);
     $(element).on({
         // fired only after the layer is shown
-        [`${EVENT_PREFIX}show`]: function() {
+        [`${EVENT_PREFIX}show`]: function(e) {
             const el = this;
+            // This handler can be fired by nested layer/component.
+            // We need to be sure that the event was triggered by the inline dialog;
+            if (e.target !== el) {
+                // otherwise skip.
+                return;
+            }
+
             setupNestedLayerHandlers(el);
             doIfTrigger(el, function (trigger) {
+                if (shouldFocus(el)) {
+                    // Focus manager will focus the popup and link popup to the trigger.
+                    getFocusManager().enter($(el), $(trigger));
+                }
+
                 enableAlignment(el, trigger);
-                trigger.setAttribute('aria-expanded', 'true');
+
+                if (isPopupMenu(el)) {
+                    trigger.setAttribute('aria-expanded', 'true');
+                }
             });
         },
         // fired only after the layer is hidden
-        [`${EVENT_PREFIX}hide`]: function() {
+        [`${EVENT_PREFIX}hide`]: function(e) {
             const el = this;
+            // This handler can be fired by nested layer/component.
+            // We need to be sure that the event was triggered by the inline dialog;
+            if (e.target !== el) {
+                // otherwise skip.
+                return;
+            }
+
             teardownNestedLayerHandlers(el.id);
             // in case the element has been removed from DOM already
             // disablingAlignment may fail if trigger is an anchor due to Popper's logic
@@ -278,7 +287,13 @@ function maybeInitialise(element) {
                 destroyAlignment(el);
             }
             doIfTrigger(el, function (trigger) {
-                trigger.setAttribute('aria-expanded', 'false');
+                if (shouldFocus(el)) {
+                    // Focus manager will focus the trigger that is linked with the popup element.
+                    getFocusManager().exit($(el));
+                }
+                if (isPopupMenu(el)) {
+                    trigger.setAttribute('aria-expanded', 'false');
+                }
             });
             setTrigger(el, null);
         }
@@ -390,23 +405,28 @@ const InlineDialogEl = skate('aui-inline-dialog', {
     attached: function (element) {
         enforce(element).attributeExists('id');
         element.setAttribute('tabindex', 0);
-        element.setAttribute('role', 'dialog');
-        doIfTrigger(element, function (trigger) {
-            trigger.setAttribute('aria-expanded', element.open);
-        });
-        forEachTrigger(element, function (trigger) {
-            trigger.setAttribute('aria-haspopup', 'true');
-        });
+        if (isPopupMenu(element)) {
+            element.setAttribute('role', 'group');
+            doIfTrigger(element, function (trigger) {
+                trigger.setAttribute('aria-expanded', element.open);
+            });
+            forEachTrigger(element, function (trigger) {
+                trigger.setAttribute('aria-haspopup', 'true');
+            });
+        }
         rebindMouseEvents(element);
     },
 
     detached: function (element) {
         ifGone(element).then(() => {
             destroyAlignment(element);
-            forEachTrigger(element, function (trigger) {
-                trigger.removeAttribute('aria-haspopup');
-                trigger.removeAttribute('aria-expanded');
-            })
+
+            if (isPopupMenu(element)) {
+                forEachTrigger(element, function (trigger) {
+                    trigger.removeAttribute('aria-haspopup');
+                    trigger.removeAttribute('aria-expanded');
+                });
+            }
         });
     },
 

package/src/js/aui/internal/i18n/aui.js

@@ -39,6 +39,7 @@ export default {
     'aui.validation.message.maxchecked': 'Tick at most {0,choice,0#0 checkboxes|1#1 checkbox|1<{0,number} checkboxes}.',
     'aui.checkboxmultiselect.clear.selected': 'Clear selected items',
     'aui.select.no.suggestions': 'No suggestions',
+    'aui.select.number.suggestions': 'Found {0,choice,0#0 options|1#1 option|1<{0,number} options}.',
     'aui.select.new.suggestions': 'New suggestions added. Please use the up and down arrows to select.',
     'aui.select.new.value': 'new value',
     'aui.toggle.on': 'On',

package/src/js/aui/internal/select/suggestions-model.js

@@ -43,15 +43,15 @@ SuggestionsModel.prototype = {
     },
 
     highlightPrevious: function () {
-        var current = this._activeIndex;
-        var previousActiveIndex = (current === 0) ? current : (current - 1);
+        const current = this._activeIndex;
+        const previousActiveIndex = (current === 0) ? this._suggestions.length - 1 : (current - 1);
         this.highlight(previousActiveIndex);
         return this;
     },
 
     highlightNext: function () {
-        var current = this._activeIndex;
-        var nextActiveIndex = (current === this._suggestions.length - 1) ? current : (current + 1);
+        const current = this._activeIndex;
+        const nextActiveIndex = (current === this._suggestions.length - 1) ? 0 : (current + 1);
         this.highlight(nextActiveIndex);
         return this;
     },

package/src/js/aui/internal/select/suggestions-view.js

@@ -54,21 +54,21 @@ function clearActive (element) {
 }
 
 SuggestionsView.prototype = {
-    render: function (suggestions, currentLength, listId) {
+    render: function (suggestions, currentLength, listId, selected) {
         this.currListId = listId;
-        var html = '';
+        let html = '';
 
         // Do nothing if we have no new suggestions, otherwise append anything else we find.
         if (suggestions.length) {
-            var i = currentLength;
-            suggestions.forEach(function (sugg) {
-                var label = sugg.getLabel();
-                var imageSrc = sugg.get('img-src');
-                var image = imageSrc ? `<img src="${encodeURI(imageSrc)}"/>` : '';
-                var newValueText = sugg.get('new-value') ? (` (<em>${I18n.getText('aui.select.new.value')}</em>)`) : '';
-                html += `<li role="option" class="aui-select-suggestion" id="${generateListItemID(listId, i)}">${image}${label}${newValueText}</li>`;
-                i++;
-            });
+            for (let i = 0; i < suggestions.length; i++) {
+                const suggestion = suggestions[i];
+                const currentIndex = i + currentLength;
+                const label = suggestion.getLabel();
+                const imageSrc = suggestion.get('img-src');
+                const image = imageSrc ? `<img src="${encodeURI(imageSrc)}"/>` : '';
+                const newValueText = suggestion.get('new-value') ? (` (<em>${I18n.getText('aui.select.new.value')}</em>)`) : '';
+                html += `<li role="option" class="aui-select-suggestion" aria-selected="${selected === currentIndex}" id="${generateListItemID(listId, currentIndex)}">${image}${label}${newValueText}</li>`;
+            }
 
             // If the old suggestions were empty, a <li> of 'No suggestions' will be appended, we need to remove it
             if (currentLength) {

package/src/js/aui/internal/select/template.js

@@ -1,14 +1,14 @@
 import template from 'skatejs-template-html';
 
 export default template(`
-    <input type="text" class="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">
+    <input type="text" class="text" role="combobox" aria-expanded="false">
     <select></select>
     <datalist>
         <content select="aui-option"></content>
     </datalist>
-    <button class="aui-button" role="button" tabindex="-1" type="button"></button>
-    <div class="aui-popover" role="listbox" data-aui-alignment="bottom left" hidden>
-        <ul class="aui-optionlist" role="presentation"></ul>
+    <button class="aui-button" tabindex="-1" type="button"></button>
+    <div class="aui-popover" data-aui-alignment="bottom left" hidden>
+        <ul role="listbox" class="aui-optionlist"></ul>
     </div>
     <div class="aui-select-status assistive" aria-live="polite" role="status"></div>
 `);