@atlassian/aui 9.2.9 → 9.2.10

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.2.9",
+    "version": "9.2.10",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",

package/src/css-vendor/jquery/plugins/jquery.select2.css

@@ -5,9 +5,6 @@ Version: 3.4.4 Timestamp: Thu Oct 24 13:23:11 PDT 2013
     margin: 0;
     position: relative;
     display: inline-block;
-    /* inline-block for ie7 */
-    zoom: 1;
-    *display: inline;
     vertical-align: middle;
 }
 

package/src/js/aui/dropdown2.js

@@ -35,8 +35,27 @@ function setDropdownTriggerActiveState(trigger, isActive) {
  * @param {Event} [e] - the event that triggered the dropdown being shown
  */
 function handleFocus(dropdown, e = {}) {
-    const mouseEvent = e && e.type && (e.type.indexOf('mouse') > -1 || e.type.indexOf('hover') > -1);
-    dropdown.isSubmenu && !mouseEvent ? dropdown.focusItem(0) : dropdown.focus();
+    if (e && e.type) {
+        const isMouseEvent = e.type.indexOf('mouse') > -1 || e.type.indexOf('hover') > -1;
+        const isKeyDownEvent = e.type.indexOf('key') > -1;
+        if (dropdown.isSubmenu) {
+            !isMouseEvent ? dropdown.focusItem(0) : dropdown.focus();
+        } else if (isKeyDownEvent){
+            const isUpArrow = e.keyCode === keyCode.UP;
+            // set focus to last item in the menu to navigate bottom -> up
+            if (isUpArrow) {
+                const visibleItems = getVisibleDropdownItems(dropdown);
+                if (visibleItems && visibleItems.length) {
+                    dropdown.focusItem(visibleItems.length - 1);
+                }
+            } else {
+                // if enter/space/downArrow than focus goes to the first item
+                dropdown.focusItem(0);
+            }
+        } else {
+            dropdown.focus();
+        }
+    }
 }
 
 // LOADING STATES

package/src/js/aui/forms/create-forms-component-body.js

@@ -0,0 +1,37 @@
+import skate from "skatejs";
+import {onChildrenChange} from "../internal/detect-children-change";
+import jQuery from "jquery";
+
+export function createFormsComponentBody(type) {
+
+    let unsub;
+
+    return {
+        type: skate.type.CLASSNAME,
+        attached: function(el) {
+
+            onChildrenChange(el,(unsubscribe) => {
+
+                // Store function that stops subscription
+                unsub = unsubscribe;
+
+                const innerCheckboxList = jQuery(`input[type=${type}]`, el);
+
+                innerCheckboxList.each(function (i, radio) {
+                    jQuery('<span class="aui-form-glyph"></span>').insertAfter(radio);
+                });
+
+                const isInsertedAfterChange = innerCheckboxList.length > 0;
+                if (isInsertedAfterChange) {
+                    unsub();
+                }
+            });
+        },
+        detached: function(el) {
+            jQuery('.aui-form-glyph', el).remove();
+            if (unsub) {
+                unsub();
+            }
+        }
+    }
+}

package/src/js/aui/forms/custom-checkbox.js

@@ -1,18 +1,12 @@
 import skate from 'skatejs';
-import jQuery from 'jquery';
+import {createFormsComponentBody} from "./create-forms-component-body";
+
 
 /**
  * Allows us to add a new DOM element for rendering ADG styled checkbox glyphs,
  * so we can get our desired aesthetic without having to rely on a specific markup pattern.
  */
-skate('checkbox', {
-    type: skate.type.CLASSNAME,
-    attached: function(el) {
-        jQuery('input[type=checkbox]', el).each(function(i, checkbox) {
-            jQuery('<span class="aui-form-glyph"></span>').insertAfter(checkbox);
-        });
-    },
-    detached: function(el) {
-        jQuery('.aui-form-glyph', el).remove();
-    }
-});
+skate(
+    'checkbox',
+    createFormsComponentBody('checkbox')
+);

package/src/js/aui/forms/custom-radio.js

@@ -1,18 +1,12 @@
 import skate from 'skatejs';
-import jQuery from 'jquery';
+import {createFormsComponentBody} from "./create-forms-component-body";
+
 
 /**
  * Allows us to add a new DOM element for rendering ADG styled radio glyphs,
  * so we can get our desired aesthetic without having to rely on a specific markup pattern.
  */
-skate('radio', {
-    type: skate.type.CLASSNAME,
-    attached: function(el) {
-        jQuery('input[type=radio]', el).each(function(i, radio) {
-            jQuery('<span class="aui-form-glyph"></span>').insertAfter(radio);
-        });
-    },
-    detached: function(el) {
-        jQuery('.aui-form-glyph', el).remove();
-    }
-});
+skate(
+    'radio',
+    createFormsComponentBody('radio')
+);

package/src/js/aui/internal/detect-children-change.js

@@ -0,0 +1,35 @@
+function isChildrenChanged(mutationList) {
+    for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+            return true;
+        }
+    }
+    return false;
+}
+
+/***
+ * Executes callback every time element children change. Called once initially.
+ *
+ * ***Make sure to use unsubscribe callback to free resources occupied for detection***
+ *
+ * @param element Element whose children should be monitored
+ * @param callback Function to be called when children change happened. Gets unsubscribe function as argument.
+ */
+export function onChildrenChange(element, callback) {
+
+    let isCompleteOnInit = false;
+
+    callback(() => { isCompleteOnInit = true });
+
+    if (isCompleteOnInit) {
+        return;
+    }
+
+    const observer = new MutationObserver((mutationList) => {
+        if (isChildrenChanged(mutationList)) {
+            callback(() => observer.disconnect());
+        }
+    });
+
+    observer.observe(element, { childList: true });
+}

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

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 
 export default Backbone.Model.extend({
-    idAttribute: 'label',
+    idAttribute: 'value',
     getLabel: function () {
         return this.get('label') || this.get('value');
     }

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

@@ -15,7 +15,7 @@ function enableAlignment (view) {
     if (view.anchor && !view._auiAlignment) {
         view._auiAlignment = new Alignment(view.el, view.anchor, {
             flipContainer: 'scrollParent',
-            positionFixed: true,
+            positionFixed: false,
             preventOverflow: false,
             flip: false
         });

package/src/js/aui/sidebar.js

@@ -277,8 +277,14 @@ Sidebar.prototype.toggle = function () {
     if (this.isCollapsed()) {
         this.expand();
         this._removeAllTooltips();
+        this.$el
+            .find('.aui-sidebar-toggle')
+            .attr('aria-label', I18n.getText('aui.sidebar.collapse.tooltip'));
     } else {
         this.collapse();
+        this.$el
+            .find('.aui-sidebar-toggle')
+            .attr('aria-label', I18n.getText('aui.sidebar.expand.tooltip'));
     }
     return this;
 };
@@ -543,8 +549,8 @@ var tipsyOpts = {
     }
 };
 
-function showTipsy($trigger) {
-    $trigger.tooltip(tipsyOpts).tooltip('show');
+function showTipsy($trigger, opts) {
+    $trigger.tooltip({ ...tipsyOpts, ...opts }).tooltip('show');
     var $tip = $trigger.data('tipsy') && $trigger.data('tipsy').$tip;
     if ($tip) { // if .aui-sidebar-group does not have a title to display
         // Remove "opacity" inline style from Tipsy to allow the our own styles and transitions to be applied
@@ -684,7 +690,7 @@ function initializeHandlers(sidebar) {
         } else {
             $trigger.data('tooltip', I18n.getText('aui.sidebar.collapse.tooltip'));
         }
-        showTipsy($trigger);
+        showTipsy($trigger, { aria: false });
     });
 
     sidebar.$el.on('click blur mouseleave', sidebar.toggleSelector, function () {

package/src/js/aui/when-i-type.js

@@ -127,9 +127,13 @@ function whenIType (keys) {
         var title = elem.attr('title') || '';
         var keyCombos = boundKeyCombos.slice();
         var existingCombos = elem.data('boundKeyCombos') || [];
-        var shortcutInstructions = elem.data('kbShortcutAppended') || '';
-        var isFirst = !shortcutInstructions;
-        var originalTitle = isFirst ? title : title.substring(0, title.length - shortcutInstructions.length);
+        var kbShortcutAppended = elem.data('kbShortcutAppended') || ''
+        var kbShortcutAppendedScreenReader = elem.data('kbShortcutAppendedScreenReader') || ''
+        var ariaLabel = elem.attr('aria-label');
+        var isFirstShortcut = !kbShortcutAppended;
+        var isFirstShortcutScreenReader = !kbShortcutAppendedScreenReader;
+        var originalTitle = isFirstShortcut ? title : title.substring(0, title.length - kbShortcutAppended.length);
+        var originalAriaLabel = isFirstShortcutScreenReader ? title : ariaLabel.substring(0, ariaLabel.length - kbShortcutAppendedScreenReader.length);
 
         while (keyCombos.length) {
             var keyCombo = keyCombos.shift();
@@ -137,19 +141,26 @@ function whenIType (keys) {
                 return isEqual(keyCombo, existingCombo);
             });
             if (!comboAlreadyExists) {
-                shortcutInstructions = appendKeyComboInstructions(keyCombo.slice(), shortcutInstructions, isFirst);
-                isFirst = false;
+                kbShortcutAppended = appendKeyComboInstructions(keyCombo.slice(), kbShortcutAppended, isFirstShortcut);
+                kbShortcutAppendedScreenReader = appendKeyComboInstructions(keyCombo.slice(), kbShortcutAppendedScreenReader, isFirstShortcutScreenReader, { workaroundJaws: true });
+                isFirstShortcut = false;
+                isFirstShortcutScreenReader = false;
             }
         }
 
         if (isMac) {
-            shortcutInstructions = shortcutInstructions
+            kbShortcutAppended = kbShortcutAppended
+                .replace(/Meta/ig, '\u2318') //Apple cmd key
+                .replace(/Shift/ig, '\u21E7'); //Apple Shift symbol
+            kbShortcutAppendedScreenReader = kbShortcutAppendedScreenReader
                 .replace(/Meta/ig, '\u2318') //Apple cmd key
                 .replace(/Shift/ig, '\u21E7'); //Apple Shift symbol
         }
 
-        elem.attr('title', originalTitle + shortcutInstructions);
-        elem.data('kbShortcutAppended', shortcutInstructions);
+        elem.attr('title', originalTitle + kbShortcutAppended);
+        elem.attr('aria-label', originalAriaLabel + kbShortcutAppendedScreenReader)
+        elem.data('kbShortcutAppended', kbShortcutAppended);
+        elem.data('kbShortcutAppendedScreenReader', kbShortcutAppendedScreenReader);
         elem.data('boundKeyCombos', existingCombos.concat(boundKeyCombos));
     }
 
@@ -163,23 +174,32 @@ function whenIType (keys) {
 
         var title = elem.attr('title');
         elem.attr('title', title.replace(shortcuts, ''));
+        elem.attr('aria-label', title.replace(shortcuts, ''));
         elem.removeData('kbShortcutAppended');
+        elem.removeData('kbShortcutAppendedScreenReader');
         elem.removeData('boundKeyCombos');
     }
 
-    //
-    function appendKeyComboInstructions(keyCombo, title, isFirst) {
+    function appendKeyComboInstructions(keyCombo, title, isFirst, options) {
+        var openParenthesis = '(';
+        var closeParenthesis = ')';
+
+        if (options && options.workaroundJaws) {
+            openParenthesis = '';
+            closeParenthesis = '';
+        }
+
         if (isFirst) {
-            title += ' (' + I18n.getText('aui.keyboard.shortcut.type.x', keyCombo.shift());
+            title += ' ' + openParenthesis + I18n.getText('aui.keyboard.shortcut.type.x', keyCombo.shift());
         } else {
             title = title.replace(/\)$/, '');
-            title += I18n.getText('aui.keyboard.shortcut.or.x', keyCombo.shift());
+            title += ' ' + I18n.getText('aui.keyboard.shortcut.or.x', keyCombo.shift());
         }
 
         keyCombo.forEach(function (key) {
             title += ' ' + I18n.getText('aui.keyboard.shortcut.then.x', key);
         });
-        title += ')';
+        title += closeParenthesis;
 
         return title;
     }

package/src/less/adg-header-quicksearch.less

@@ -10,7 +10,7 @@
     @bg-color: var(--aui-appheader-quicksearch-bg-color);
     @border-color: var(--aui-appheader-quicksearch-border-color);
     @text-color: var(--aui-appheader-quicksearch-text-color);
-    @placeholder-color: var(--aui-form-placeholder-text-color);
+    @placeholder-color: var(--aui-appheader-quicksearch-placeholder-text-color);
     @focus-bg-color: var(--aui-appheader-quicksearch-focus-bg-color);
     @focus-text-color: var(--aui-appheader-quicksearch-focus-text-color);
     @width: 170px;

package/src/less/forms-radios-and-checkboxes.less

@@ -199,6 +199,21 @@ form.aui:not(.aui-legacy-forms) {
                     .aui-checkbox-disabled-style();
                 }
             }
+
+            &:focus + .aui-form-glyph::after {
+                .aui-radio-focus-size();
+                .aui-radio-focus-position();
+
+                content: "";
+
+                border: @button-focus-border;
+                border-radius: @aui-form-button-size;
+                background-color: transparent;
+            }
+
+            &:focus + .aui-form-glyph::before {
+                border-color: @button-focus-border-color;
+            }
         }
     }
 
@@ -254,6 +269,10 @@ form.aui:not(.aui-legacy-forms) {
                     .aui-checkbox-disabled-style();
                 }
             }
+
+            &:focus + .aui-form-glyph::before {
+                border-color: @button-focus-border-color;
+            }
         }
     }
 
@@ -272,30 +291,4 @@ form.aui:not(.aui-legacy-forms) {
         top: @radio-offset-top - 1px;
     }
 
-    .radio {
-        input {
-            &:focus + .aui-form-glyph::after {
-                .aui-radio-focus-size();
-                .aui-radio-focus-position();
-
-                content: "";
-
-                border: @button-focus-border;
-                border-radius: @aui-form-button-size;
-                background-color: transparent;
-            }
-
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
-        }
-    }
-
-    .checkbox {
-        input {
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
-        }
-    }
 }

package/src/less/imports/aui-theme/adg/adg-neutral-light.less

@@ -1,7 +1,7 @@
 @ak-color-N0: #FFFFFF;
 @ak-color-N10: #FAFBFC;
 @ak-color-N20: #F4F5F7;
-@ak-color-N30: #EBECF0;
+@ak-color-N30: #EBECF1;
 @ak-color-N40: #DFE1E6;
 @ak-color-N50: #C1C7D0;
 @ak-color-N60: #B3BAC5;

package/src/less/imports/aui-theme/core/colors.less

@@ -144,7 +144,7 @@
         --aui-label-close-hover-text-color: @ak-color-N800;
 
         // Forms
-        --aui-form-placeholder-text-color: @ak-color-N100;
+        --aui-form-placeholder-text-color: @ak-color-N300;
         --aui-form-placeholder-disabled-text-color: @ak-color-N70;
         --aui-form-label-text-color: @ak-color-N200;
         --aui-form-error-text-color: @ak-color-R400;
@@ -218,6 +218,7 @@
         --aui-appheader-quicksearch-bg-color: @ak-color-N90A;
         --aui-appheader-quicksearch-border-color: transparent;
         --aui-appheader-quicksearch-text-color: @ak-color-B50;
+        --aui-appheader-quicksearch-placeholder-text-color: @ak-color-N80;
         --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
         --aui-appheader-quicksearch-focus-text-color: @ak-color-B50;
 
@@ -535,6 +536,7 @@
         --aui-appheader-quicksearch-bg-color: @ak-color-N90A;
         --aui-appheader-quicksearch-border-color: transparent;
         --aui-appheader-quicksearch-text-color: @ak-color-B50;
+        --aui-appheader-quicksearch-placeholder-text-color: @ak-color-N400;
         --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
         --aui-appheader-quicksearch-focus-text-color: @ak-color-B50;