@atlassian/aui 9.4.7 → 9.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.4.7",
+    "version": "9.4.9",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -37,6 +37,7 @@
         "@popperjs/core": "2.4.4",
         "backbone": "1.4.0",
         "css.escape": "1.5.0",
+        "dompurify": "2.4.0",
         "fancy-file-input": "2.0.4",
         "jquery-ui": "1.13.0",
         "skatejs": "0.13.17",

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/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;
 };
@@ -618,6 +624,7 @@ function initializeHandlers(sidebar) {
 
     sidebar.$el.tooltip({
         ...tooltipOptions,
+        aria: false,
         live: sidebar.toggleSelector,
         title: function () {
             return sidebar.isCollapsed() ?

package/src/js/aui/tooltip.js

@@ -1,5 +1,6 @@
 import $ from './jquery';
 import { createPopper } from '@popperjs/core';
+import DOMPurify from 'dompurify';
 
 const AUI_TOOLTIP_CLASS_NAME = 'aui-tooltip';
 const AUI_TOOLTIP_ID = 'aui-tooltip';
@@ -32,7 +33,10 @@ const defaultOptions = {
     html: false,
     live: false,
     enabled: true,
-    suppress: () => false
+    suppress: () => false,
+    aria: true,
+    sanitize: true,
+    maxWidth: 200
 }
 
 let $sharedTip;
@@ -70,7 +74,9 @@ class Tooltip {
 
         $triggerElement.attr('title', function (_, originalTitle) {
             tooltip.originalTitle = originalTitle;
-            $triggerElement.attr('aria-describedby', AUI_TOOLTIP_ID);
+            if (tooltip.options.aria) {
+                $triggerElement.attr('aria-describedby', AUI_TOOLTIP_ID);
+            }
             return null;
         });
     }
@@ -99,11 +105,21 @@ class Tooltip {
             $(document.body).append($sharedTip);
         }
 
+        const tooltipContentElement = $sharedTip.find('.aui-tooltip-content');
+
         if (options.html) {
-            $sharedTip.find('.aui-tooltip-content').html(title);
+            if (options.sanitize) {
+                title = DOMPurify.sanitize(title);
+            }
+            tooltipContentElement.html(title);
         } else {
-            $sharedTip.find('.aui-tooltip-content').text(title);
+            tooltipContentElement.text(title);
         }
+
+        if (options.maxWidth) {
+            tooltipContentElement.css("max-width", options.maxWidth + "px");
+        }
+
         return $sharedTip;
     }
 
@@ -117,7 +133,7 @@ class Tooltip {
                 () => this.originalTitle || '';
 
         let actualTitle = title.call(this.triggerElement);
-        return (actualTitle.trim().length === 0) ? undefined : actualTitle;
+        return (!actualTitle || !actualTitle.trim().length) ? undefined : actualTitle;
     }
 
     show() {

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;
-            }
-        }
-    }
 }