@atlassian/aui 9.3.14 → 9.3.16

package/package.json

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

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/sidebar.js

@@ -265,8 +265,14 @@ Sidebar.prototype.reflow = function reflow(
 Sidebar.prototype.toggle = function () {
     if (this.isCollapsed()) {
         this.expand();
+        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;
 };

package/src/js/aui/tooltip.js

@@ -35,7 +35,8 @@ const defaultOptions = {
     enabled: true,
     suppress: () => false,
     aria: true,
-    sanitize: true
+    sanitize: true,
+    maxWidth: 200
 }
 
 let $sharedTip;
@@ -115,6 +116,10 @@ class Tooltip {
             tooltipContentElement.text(title);
         }
 
+        if (options.maxWidth) {
+            tooltipContentElement.css("max-width", options.maxWidth + "px");
+        }
+
         return $sharedTip;
     }
 

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/aui-experimental-tooltip.less

@@ -8,6 +8,7 @@
     border-radius: @aui-border-radius-small;
     font-size: @aui-font-size-small;
     line-height:  unit(20 / @aui-font-size-small);
+    word-wrap: break-word;
 
     a,
     a:visited {

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

@@ -200,6 +200,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;
+            }
         }
     }
 
@@ -255,6 +270,10 @@ form.aui:not(.aui-legacy-forms) {
                     .aui-checkbox-disabled-style();
                 }
             }
+
+            &:focus + .aui-form-glyph::before {
+                border-color: @button-focus-border-color;
+            }
         }
     }
 
@@ -273,30 +292,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;
-            }
-        }
-    }
 }