@atlassian/aui 9.1.1 → 9.1.5-c484fdf49

package/package.json

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

package/src/js/aui/dropdown2.js

@@ -15,6 +15,7 @@ import skate from './internal/skate';
 import {ifGone} from './internal/elements';
 import {doIfTrigger, setTrigger} from './trigger';
 import generateUniqueId from './unique-id';
+import escapeHtml from './escape-html';
 
 function isHidden(el) {
     return el.hasAttribute('hidden') || el.classList.contains('hidden');
@@ -62,7 +63,7 @@ function makeAsyncDropdownContents (json) {
             var itemHtml = `
                 <${tagName} ${makeAttribute('for')} ${makeAttribute('href')} ${makeBooleanAttribute('interactive')}
                     ${makeBooleanAttribute('checked')} ${makeBooleanAttribute('disabled')} ${makeBooleanAttribute('hidden')}>
-                    ${itemData.content}
+                    ${escapeHtml(itemData.content)}
                 </${tagName}>`;
 
             return itemHtml;

package/src/js/aui/expander.js

@@ -55,9 +55,7 @@ var EXPANDER_EVENTS = {
         properties.$content.attr('aria-expanded', 'true');
         properties.$trigger.attr('aria-expanded', 'true');
 
-        if (properties.$content.outerHeight() > 0) {
-            properties.$content.removeAttr('hidden');
-        }
+        properties.$content.get(0).removeAttribute('hidden');
 
         //handle replace text
         replaceText(properties);
@@ -92,7 +90,7 @@ var EXPANDER_EVENTS = {
 
         //handle the height option
         if (properties.$content.outerHeight() === 0) {
-            properties.$content[0].setAttribute('hidden', '');
+            properties.$content.get(0).setAttribute('hidden', '');
         }
 
         properties.$trigger.trigger('aui-expander-collapsed');

package/src/js/aui/header-async.js

@@ -1,10 +1,15 @@
 import createHeader from './internal/header/create-header';
 import skate from './internal/skate';
 
-const Header = skate('aui-header', {
-    type: skate.type.CLASSNAME,
+const Header = skate('aui-header-end', {
+    type: skate.type.ELEMENT,
     created: function (element) {
-        createHeader(element);
+        const auiHeader = element.parentElement;
+        if (auiHeader && auiHeader.classList.contains('aui-header')) {
+            createHeader(auiHeader);
+        } else {
+            console.log('Could not async. initialise aui-header');
+        }
     }
 });
 

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

@@ -6,6 +6,8 @@ export default {
     'aui.header.home.link': 'Go to home page',
     'aui.dropdown.async.error': 'Error loading dropdown',
     'aui.dropdown.async.loading': 'Loading dropdown',
+    'aui.words.expand': 'Expand',
+    'aui.words.collapse': 'Collapse',
     'aui.words.add': 'Add',
     'aui.words.update': 'Update',
     'aui.words.delete': 'Delete',

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

@@ -16,7 +16,7 @@ export default skate('aui-option', {
         serialize: function () {
             var json = {};
             if (this.hasAttribute('img-src')) {
-                json['img-src'] = escapeHtml(this.getAttribute('img-src'));
+                json['img-src'] = encodeURI(this.getAttribute('img-src'));
             }
             json.value = this.value;
             json.label = escapeHtml(this.textContent);

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

@@ -64,7 +64,7 @@ SuggestionsView.prototype = {
             suggestions.forEach(function (sugg) {
                 var label = sugg.getLabel();
                 var imageSrc = sugg.get('img-src');
-                var image = imageSrc ? `<img src="${imageSrc}"/>` : '';
+                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++;

package/src/js/aui/navigation.js

@@ -52,11 +52,25 @@ function Navigation (selector) {
         });
 
     // Toggle expand on click
-    this.$el.find('> li[aria-expanded] > .aui-nav-subtree-toggle').on('click', function () {
+    var $togglers = this.$el.find('> li[aria-expanded] > .aui-nav-subtree-toggle');
+    $togglers.on('click', function () {
         var nav = navigationWidget($(this).siblings('.aui-nav'));
         nav.toggle();
     });
 
+    // Make sure subtree togglers have proper a11y label
+    $togglers.each(function () {
+        var $parent = $(this).parent('li[aria-expanded]');
+        var $icon = $(this).find('.aui-icon');
+        var isListItemExpanded = $parent.attr('aria-expanded') === 'true';
+
+        $icon.text(
+            isListItemExpanded ?
+                I18n.getText('aui.words.collapse') :
+                I18n.getText('aui.words.expand')
+        );
+    })
+
     return this;
 }
 
@@ -72,7 +86,8 @@ Navigation.prototype.expand = function () {
     this.$treeParent.attr('aria-expanded', 'true');
     this.$subtreeToggleIcon
         .removeClass('aui-iconfont-collapsed')
-        .addClass('aui-iconfont-expanded');
+        .addClass('aui-iconfont-expanded')
+        .text(I18n.getText('aui.words.collapse'));
     this.hideMoreItems();
     return this;
 };
@@ -81,7 +96,8 @@ Navigation.prototype.collapse = function () {
     this.$treeParent.attr('aria-expanded', 'false');
     this.$subtreeToggleIcon
         .removeClass('aui-iconfont-expanded')
-        .addClass('aui-iconfont-collapsed');
+        .addClass('aui-iconfont-collapsed')
+        .text(I18n.getText('aui.words.expand'));
     return this;
 };
 

package/src/js/aui/select.js

@@ -79,7 +79,7 @@ function setInitialVisualState (element) {
 
 function setElementImage (element, imageSource) {
     $(element._input).addClass('aui-select-has-inline-image');
-    element._input.setAttribute('style', 'background-image: url(' + imageSource + ')');
+    element._input.setAttribute('style', 'background-image: url(' + encodeURI(imageSource) + ')');
 }
 
 function suggest (element, autoHighlight, query) {

package/src/less/aui-appheader.less

@@ -103,54 +103,44 @@ aui-header,
         color: var(--aui-appheader-text-color);
         height: var(--aui-appheader-height, initial);
 
-        .aui-header-logo {
-            font-size: @aui-font-size-xxlarge;
-        }
-
         // Override the icon styles so that every icon in the header is a uniform size.
         .aui-icon {
             --aui-icon-size: 24px;
         }
 
-        .aui-header-primary,
-        .aui-header-secondary {
-            > .aui-nav {
-                > li > a {
-                    --aui-item-text: var(--aui-appheader-text-color);
-                    --aui-item-focus-bg: var(--aui-appheader-item-focus-bg-color);
-                    --aui-item-focus-text: var(--aui-appheader-item-focus-text-color);
-                    --aui-item-active-bg: var(--aui-appheader-item-active-bg-color);
-                    --aui-item-active-text: var(--aui-appheader-item-active-text-color);
-                }
-
-                > li > a:not(.aui-button) {
-                    #aui-nav.item-style(normal);
-                    display: flex;
-                    align-items: center;
-                    border-radius: var(--aui-appheader-item-border-radius);
-                    box-sizing: border-box;
-                    height: var(--aui-appheader-item-height, auto);
-                    padding: var(--aui-appheader-item-padding-y, 5px) var(--aui-appheader-item-padding-x, 10px);
-
-                    &:hover,
-                    &:focus {
-                        #aui-nav.item-style(hover);
-                    }
-
-                    #aui.focus(#aui.with-focus-ring(@inset: true));
-
-                    &:active,
-                    &.active {
-                        #aui-nav.item-style(active);
-                    }
-
-                    &.selected {
-                        #aui-nav.item-style(selected);
-                    }
-                }
+        // Target the links in the app header.
+        //   We need to use the direct child combinator to avoid applying styles to
+        //   dropdowns or other layers nested in the header.
+        //   We also avoid styling buttons, which might be placed inside nav lists for some reason.
+        .aui-header-primary > .aui-nav > li > a:not(.aui-button),
+        .aui-header-secondary > .aui-nav > li > a:not(.aui-button),
+        .aui-header-logo > a {
+            & {
+                display: flex;
+                align-items: center;
+                border-radius: var(--aui-appheader-item-border-radius);
+                box-sizing: border-box;
+                height: var(--aui-appheader-item-height, auto);
+                padding: var(--aui-appheader-item-padding-y, 5px) var(--aui-appheader-item-padding-x, 10px);
+                background-color: var(--aui-appheader-item-bg-color, transparent);
+                color: var(--aui-appheader-text-color, var(--aui-body-text));
+                text-decoration: none;
             }
-        }
 
+            &:hover,
+            &:focus {
+                background-color: var(--aui-appheader-item-focus-bg-color);
+                color: var(--aui-appheader-item-focus-text-color, inherit);
+            }
+
+            #aui.focus(#aui.with-focus-ring(@inset: true));
+
+            &:active,
+            &.active {
+                background-color: var(--aui-appheader-item-active-bg-color);
+                color: var(--aui-appheader-item-active-text-color);
+            }
+        }
 
         // Special-case padding to separate non-nav items from nav items.
         .aui-header-primary > .aui-nav > li > .aui-button,
@@ -161,5 +151,13 @@ aui-header,
         .aui-header-secondary > .aui-nav > li > .aui-quicksearch {
             margin-right: @section-gap / 2;
         }
+
+        .aui-header-logo {
+            font-size: @aui-font-size-xxlarge;
+        }
+
+        .aui-header-logo .aui-header-logo-text {
+            font-size: @aui-font-size-medium;
+        }
     }
 }

package/src/less/imports/mixins/focus.less

@@ -17,6 +17,11 @@
         outline: none;
         border-width: @outline-width;
         border-color: @color;
+
+        &:focus-visible {
+            // Undoing the implementation in .with-focus-ring() mixin
+            box-shadow: unset;
+        }
     }
 
     // Add a focus style to the element