@atlassian/aui 9.12.0 → 9.12.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.12.0",
+    "version": "9.12.2",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -36,12 +36,13 @@
         "jquery": "^2 || ^3"
     },
     "dependencies": {
+        "@atlassian/adg-server-iconfont": "3.1.0",
         "@atlaskit/tokens": "1.58.0",
         "@atlassian/tipsy": "1.3.3",
         "@popperjs/core": "2.11.8",
         "backbone": "1.6.0",
         "css.escape": "1.5.1",
-        "dompurify": "2.5.6",
+        "dompurify": "2.5.7",
         "fancy-file-input": "2.0.4",
         "jquery-ui": "1.13.3",
         "skatejs": "0.13.17",
@@ -55,17 +56,14 @@
         "jquery.hotkeys": "file:src/js-vendor/jquery.hotkeys"
     },
     "devDependencies": {
-        "@atlassian/adg-server-iconfont": "3.1.0",
         "@atlassian/aui-webpack-config": "3.0.1",
-        "@babel/core": "7.18.13",
-        "@babel/preset-env": "7.18.10",
-        "cross-env": "7.0.3",
-        "eslint": "9.7.0",
+        "@babel/core": "7.24.9",
+        "@babel/preset-env": "7.24.8",
         "fs-extra": "9.1.0",
         "ignore-emit-webpack-plugin": "2.0.6",
         "jquery": "3.5.1",
         "jquery-migrate": "3.5.2",
-        "less": "3.13.1",
+        "less": "4.2.0",
         "react": "18.3.1"
     },
     "scripts": {

package/src/js/aui/flag.js

@@ -9,6 +9,7 @@ import escapeHtml from './escape-html';
 import { CLOSE_BUTTON } from './close-button';
 import { FOCUSABLE_QUERY } from './internal/a11y/focusable-query';
 import getFocusManager from './focus-manager';
+import { I18n } from './i18n';
 
 const AUTO_CLOSE_TIME = 8000;
 const ID_FLAG_CONTAINER = 'aui-flag-container';
@@ -39,17 +40,12 @@ function flag (flagOptions) {
 
     handleFlagContainer();
     insertFlag($flag);
+
     setTimeout(function () {
         if ($flag.attr('aui-focus-trap') === 'true') {
             getFocusManager.global.enter($flag);
         }
-    }, 0);
-
-    setTimeout(function () {
-        $flag.attr({
-            'aria-hidden': false
-        });
-    }, 100)
+    }, 0)
 
     return $flag.get(0);
 }
@@ -62,10 +58,28 @@ function extendFlagElement ($flag) {
     };
 }
 
-function renderFlagElement ({ body, title, close, type, ariaLive }) {
+function getDefaultAriaLabelForFlagType(type) {
+    switch (type) {
+        case 'success':
+            return I18n.getText('aui.flag.default-aria-label.success');
+        case 'warning':
+            return I18n.getText('aui.flag.default-aria-label.warning');
+        case 'error':
+            return I18n.getText('aui.flag.default-aria-label.error');
+        default:
+            return I18n.getText('aui.flag.default-aria-label.info');
+    }
+}
+
+function renderFlagElement ({ body, title, close, type, ariaLive, ariaLabel, ariaDescription }) {
     const titleHtml = title ? `<p class="title"><strong>${escapeHtml(title)}</strong></p>` : '';
     const html = `<div class="aui-message">${titleHtml}</div>`;
-    const ariaLabel = title ? escapeHtml(title) : '';
+    if (!ariaLabel) {
+        ariaLabel = getDefaultAriaLabelForFlagType(type);
+    }
+    if (!ariaDescription) {
+        ariaDescription = '';
+    }
 
     const $message = $(html)
         .append($.parseHTML(body || ''))
@@ -74,7 +88,16 @@ function renderFlagElement ({ body, title, close, type, ariaLive }) {
     const isFocusable = $message.find(FOCUSABLE_QUERY).length > 0;
     const ariaRole = isFocusable ? 'alertdialog' : 'alert';
 
-    return $(`<div aui-focus-trap="${isFocusable}" class="aui-flag" aria-label="${ariaLabel}" aria-hidden="true" aria-live="${escapeHtml(ariaLive)}" role="${ariaRole}"></div>`).append($message);
+    return $('<div class="aui-flag"></div>')
+        .attr({
+            'aui-focus-trap': `${isFocusable}`,
+            'aria-label': escapeHtml(ariaLabel),
+            'aria-hidden': 'false',
+            'aria-live': escapeHtml(ariaLive),
+            'role': ariaRole,
+            ...(!!ariaDescription ? {'aria-description': escapeHtml(ariaDescription)} : {}),
+        })
+        .append($message);
 }
 
 function makeCloseable ($flag) {
@@ -104,13 +127,16 @@ function makeAutoClosable ($flag, duration) {
 function closeFlag ($flagToClose) {
     const flag = $flagToClose.get(0);
 
+    if ($flagToClose.attr('aui-focus-trap')) {
+        getFocusManager.global.exit($flagToClose);
+    }
+
     flag.removeAttribute('open');
     flag.setAttribute('inert', '');
     flag.setAttribute('aria-hidden', true);
+    flag.style.display = 'none';
     flag.dispatchEvent(new CustomEvent('aui-flag-close', { bubbles: true }));
-    if ($flagToClose.attr('aui-focus-trap')) {
-        getFocusManager.global.exit($flagToClose);
-    }
+
 
     return flag;
 }

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

@@ -78,5 +78,9 @@ export default {
     'ajs.datepicker.localisations.month-names.november': 'November',
     'ajs.datepicker.localisations.month-names.december': 'December',
     'ajs.datepicker.localisations.show-month-after-year': false,
-    'ajs.datepicker.localisations.year-suffix': ''
+    'ajs.datepicker.localisations.year-suffix': '',
+    'aui.flag.default-aria-label.info': 'New information message',
+    'aui.flag.default-aria-label.success': 'New confirmation message',
+    'aui.flag.default-aria-label.warning': 'New warning message',
+    'aui.flag.default-aria-label.error': 'New error message',
 }

package/src/js/aui/select.js

@@ -219,7 +219,6 @@ function initialiseProgressiveDataSet (element) {
     // Otherwise progressive data set can do everything else for us:
     // 1. Sync matching
     // 2. Async fetching and matching
-    /* eslint-disable complexity */
     element._progressiveDataSet.on('respond', function (data) {
         // This means that a query was made before the input was cleared and
         // we should cancel the response.

package/src/js/aui/sidebar.js

@@ -211,7 +211,6 @@ Sidebar.prototype.responsiveReflow = function responsiveReflow(isInitialPageLoad
             if (isAnimated) {
                 // We must trigger a CSS reflow (by accessing
                 // offsetHeight) otherwise the transition still runs.
-                // eslint-disable-next-line
                 this.$el[0].offsetHeight;
                 this.$el.addClass('aui-is-animated');
             }

package/src/less/aui-appheader.less

@@ -34,7 +34,7 @@ aui-header,
     @section-gap: 20px;
 
     box-sizing: border-box;
-    padding: 7px @aui-grid 10px @aui-grid;
+    padding: 7px @aui-grid 8px @aui-grid;
     position: relative;
 
     .aui-header-before {