@atlassian/aui 9.11.5 → 9.11.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlassian/aui",
   "description": "Atlassian User Interface library",
-  "version": "9.11.5",
+  "version": "9.11.7",
   "author": "Atlassian Pty Ltd.",
   "homepage": "https://aui.atlassian.com",
   "license": "Apache-2.0",
@@ -39,31 +39,24 @@
     "@popperjs/core": "2.11.8",
     "backbone": "1.6.0",
     "css.escape": "1.5.1",
-    "dompurify": "2.5.0",
+    "dompurify": "2.5.7",
     "fancy-file-input": "2.0.4",
     "jquery-ui": "1.13.2",
     "skatejs": "0.13.17",
     "skatejs-template-html": "0.0.0",
     "trim-extra-html-whitespace": "1.3.0",
-    "underscore": "1.13.6",
-    "tablesorter": "file:./src/js-vendor/tablesorter",
-    "jquery-aop": "file:src/js-vendor/jquery-aop",
-    "jquery-form": "file:src/js-vendor/jquery-form",
-    "select2": "file:src/js-vendor/select2",
-    "jquery.hotkeys": "file:src/js-vendor/jquery.hotkeys",
-    "react": "18.3.1"
+    "underscore": "1.13.6"
   },
   "devDependencies": {
     "@atlassian/aui-webpack-config": "3.0.1",
     "@babel/core": "7.18.13",
     "@babel/preset-env": "7.18.10",
-    "cross-env": "7.0.3",
-    "eslint": "7.32.0",
     "glob": "7.2.3",
     "ignore-emit-webpack-plugin": "2.0.6",
     "jquery": "3.5.1",
     "jquery-migrate": "3.4.1",
-    "less": "3.13.1"
+    "less": "4.2.0",
+    "react": "18.3.1"
   },
   "scripts": {
     "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build && node scripts/prepublishOnly.js",

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/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 {