@atlassian/aui 9.11.4 → 9.11.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlassian/aui",
   "description": "Atlassian User Interface library",
-  "version": "9.11.4",
+  "version": "9.11.6",
   "author": "Atlassian Pty Ltd.",
   "homepage": "https://aui.atlassian.com",
   "license": "Apache-2.0",
@@ -33,6 +33,7 @@
     "jquery": "^2 || ^3"
   },
   "dependencies": {
+    "@atlassian/adg-server-iconfont": "3.1.0",
     "@atlaskit/tokens": "1.43.0",
     "@atlassian/tipsy": "1.3.3",
     "@popperjs/core": "2.11.8",
@@ -52,11 +53,9 @@
     "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",
-    "bundlesize": "1.0.0-beta.2",
     "cross-env": "7.0.3",
     "eslint": "7.32.0",
     "glob": "7.2.3",
@@ -64,7 +63,7 @@
     "jquery": "3.5.1",
     "jquery-migrate": "3.4.1",
     "less": "3.13.1",
-    "react": "^18.2.0"
+    "react": "18.3.1"
   },
   "scripts": {
     "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build && node scripts/prepublishOnly.js",
@@ -72,9 +71,6 @@
     "clean": "rm -rf ./dist",
     "dist/build:prototyping": "webpack --config webpack/dist.prototyping.webpack.config.js",
     "build": "yarn dist/build:prototyping",
-    "watch": "yarn dist/build:prototyping --watch",
-    "bundlesize/verify-dist": "node scripts/verify-dist-structure.js",
-    "bundlesize/gzipped": "node scripts/generate-bundlesize-config.js > configs/bundlesize-gzipped.json && bundlesize --config configs/bundlesize-gzipped.json",
-    "bundlesize/raw": "node scripts/generate-bundlesize-config.js raw > configs/bundlesize-raw.json && bundlesize --config configs/bundlesize-raw.json"
+    "watch": "yarn dist/build:prototyping --watch"
   }
 }

package/src/js/aui/avatar-group.js

@@ -90,23 +90,23 @@ document.addEventListener('click', (e) => {
     const isDropdownButton = e.target.matches('.aui-avatar-group-dropdown-button');
     const closestDropdown = e.target.closest('.aui-avatar-group-dropdown');
 
-    if (!isDropdownButton && closestDropdown !== null) return;
+    if (!isDropdownButton && closestDropdown !== null) {return;}
 
     if (isDropdownButton) {
         closestDropdown.classList.contains('aui-avatar-group-dropdown-show') ? closeDropdown(closestDropdown) : openDropdown(closestDropdown);
     }
 
     document.querySelectorAll('.aui-avatar-group-dropdown-show').forEach(dropdown => {
-        if (dropdown === closestDropdown) return;
+        if (dropdown === closestDropdown) {return;}
 
         closeDropdown(dropdown)
     })
 });
 
 document.addEventListener('keydown', (e) => {
-    if (e.key !== 'Escape') return;
+    if (e.key !== 'Escape') {return;}
     const dropdown = document.querySelector('.aui-avatar-group-dropdown-show');
-    if (!dropdown) return;
+    if (!dropdown) {return;}
 
     closeDropdown(dropdown);
 });

package/src/js/aui/banner.js

@@ -26,7 +26,7 @@ function createBannerElement({ body = '', type = 'error' }) {
     banner.className = `aui-banner aui-banner-${type}`;
     banner.setAttribute('role', 'alert');
     banner.innerHTML = body;
-    
+
     const screenReaderInfo = document.createElement('div');
     screenReaderInfo.innerText = `${type}`;
     screenReaderInfo.classList.add('assistive')
@@ -57,4 +57,4 @@ function renderBannerElement(bannerElement, bannerContainer) {
 
 amdify('aui/banner', banner);
 globalize('banner', banner);
-export default banner;
+export default banner;

package/src/js/aui/date-picker.js

@@ -334,14 +334,16 @@ const initPolyfill = function (datePicker) {
     // according to the spec...
     $field.attr('placeholder', options.placeholder);
 
-    // Override the browser's default date field implementation.
-    // There used to be a fix for AUI-3681 here, too, but my testing of Edge 15
-    // shows that changing the `type` of input does not erase its value.
-    // see https://codepen.io/chrisdarroch/pen/YzwgjyJ
-    $field.prop('type', 'text');
-    // Set default value on initialization to handle all date formats.
-    // It is possible, because of changing type to text on the line above.
-    $field.val($field.attr('value'));
+    if ($field.prop('type') !== 'text') {
+        // Override the browser's default date field implementation.
+        // There used to be a fix for AUI-3681 here, too, but my testing of Edge 15
+        // shows that changing the `type` of input does not erase its value.
+        // see https://codepen.io/chrisdarroch/pen/YzwgjyJ
+        $field.prop('type', 'text');
+        // Set default value on initialization to handle all date formats.
+        // It is possible, because of changing type to text on the line above.
+        $field.val($field.attr('value'));
+    }
     // Trigger change to update calendar popup value.
     $field.trigger('propertychange');
 

package/src/js/aui/design-tokens/design-tokens-init.js

@@ -1,7 +1,7 @@
-import { setGlobalTheme } from "@atlaskit/tokens";
+import { setGlobalTheme } from '@atlaskit/tokens';
 
 if (
     document.documentElement.hasAttribute('data-color-mode-auto')
 ) {
-    setGlobalTheme({ colorMode: "auto" });
+    setGlobalTheme({ colorMode: 'auto' });
 }

package/src/js/aui/design-tokens/design-tokens-testing-theme.js

@@ -1,9 +1,9 @@
-import TokenNames from "@atlaskit/tokens/token-names";
+import TokenNames from '@atlaskit/tokens/token-names';
 
 const testingThemeTargetElement = document.documentElement;
 const testingColorVariableName = '--aui-theme-testing-color';
 const defaultTestingColor = 'color(srgb 1 0.75 0.8 / 0.6)';
-const testingThemeTargetClass = "aui-theme-testing";
+const testingThemeTargetClass = 'aui-theme-testing';
 const testingThemeSelector =
     `html.${testingThemeTargetClass}[data-theme*="light:"], ` +
     `html.${testingThemeTargetClass}[data-theme*="dark:"]`;
@@ -15,7 +15,7 @@ const testingThemeSelector =
  */
 (function generateTestingTheme() {
 
-    const initialComment = "This theme is autogenerated using AJS.DesignTokens.generateTestingTheme()."
+    const initialComment = 'This theme is autogenerated using AJS.DesignTokens.generateTestingTheme().'
 
     // If function called many times theme should be only added once
     const isThemeAlreadyInitialised = !document.querySelector(testingThemeSelector)
@@ -27,20 +27,20 @@ const testingThemeSelector =
     const colorDeclaration = `${testingColorVariableName}: ${defaultTestingColor};`
     const themeCSSDeclarations = Object.values(TokenNames)
         .map(token => `\t${token}: var(${testingColorVariableName});`);
-    const allDeclarations = [ colorDeclaration, ...themeCSSDeclarations ];
+    const allDeclarations = [colorDeclaration, ...themeCSSDeclarations];
 
 
     const themeCSS = `/* ${initialComment} */\n${testingThemeSelector} {\n${allDeclarations.join('\n')}\n}`;
 
     const themeElement = document.createElement('style');
-    themeElement.id = "aui-design-tokens-testing-theme";
+    themeElement.id = 'aui-design-tokens-testing-theme';
     themeElement.innerText = themeCSS;
 
     const head = document.querySelector('head');
     if (head) {
         head.appendChild(themeElement);
     }
-})();
+}());
 
 /**
  * Overrides default testing color by setting css variable. If no color passed, will revert to default.

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';
@@ -62,10 +63,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 +93,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': 'true',
+            'aria-live': escapeHtml(ariaLive),
+            'role': ariaRole,
+            ...(!!ariaDescription ? {'aria-description': escapeHtml(ariaDescription)} : {}),
+        })
+        .append($message);
 }
 
 function makeCloseable ($flag) {

package/src/js/aui/focus-manager.js

@@ -127,6 +127,51 @@ FocusManager.prototype.exit = function ($el) {
     }
 };
 
+function findIndexOfNextTabbableElement(originElement, startingIndex, offset, $tabbableElements) {
+    function advance(index) {
+        return (index + offset) % $tabbableElements.length;
+    }
+
+    let nextIndex = advance(startingIndex);
+
+    if (originElement.type === 'radio' && originElement.name) {
+        // Advance to the element that's not another radio button of the same group.
+        while (
+            $tabbableElements.eq(nextIndex).attr('name') === originElement.name &&
+            // Stop at the start if we've wrapped around the whole list and everything is the same radio
+            // group.
+            nextIndex !== startingIndex
+        ) {
+            nextIndex = advance(nextIndex);
+        }
+    }
+
+    // Emulate the browser's behavior: jump to the selected radio of a group, or if none is selected, the
+    // first or last depending on the direction. Note: we assume the markup is sensible and doesn't
+    // interleave groups of radio buttons. Supporting that would complicate the code for a non-recommended
+    // use case.
+    if (nextIndex !== startingIndex && $tabbableElements.eq(nextIndex).attr('type') === 'radio') {
+        const name = $tabbableElements.eq(nextIndex).attr('name');
+        const $radiosOfGroup = $tabbableElements.filter(function () {
+            return this.type === 'radio' && this.name === name;
+        });
+        const $checkedElement = $radiosOfGroup.filter(':checked');
+
+        let $elementToFocus;
+        if ($checkedElement.length > 0) {
+            $elementToFocus = $checkedElement.first();
+        } else {
+            if (offset > 0) {
+                $elementToFocus = $radiosOfGroup.first();
+            } else {
+                $elementToFocus = $radiosOfGroup.last();
+            }
+        }
+        nextIndex = $tabbableElements.index($elementToFocus);
+    }
+    return nextIndex;
+}
+
 function focusTrapHandler(focusTrapStack, event) {
     if (focusTrapStack.length === 0) {
         return;
@@ -209,7 +254,12 @@ function focusTrapHandler(focusTrapStack, event) {
 
     if (newFocusIdx > -1) {
         // wrap around the focus trap.
-        newFocusIdx = (newFocusIdx + offset) % $tabbableElements.length;
+        newFocusIdx = findIndexOfNextTabbableElement(
+            focusOrigin,
+            newFocusIdx,
+            offset,
+            $tabbableElements
+        );
     } else {
         // we will focus the first element in the trap.
         newFocusIdx = 0;

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/imports/aui-theme/components/form-notification.less

@@ -24,7 +24,7 @@
 @aui-notification-icon-outside-field-padding-right: 16px;
 @aui-notification-icon-outside-field-padding-top: 5px;
 
-@aui-notification-line-height: unit(18px / @aui-font-size-medium);
+@aui-notification-line-height: unit((18px / @aui-font-size-medium));
 
 @aui-notification-info-icon: @aui-glyph-info-circle;
 @aui-notification-success-icon: @aui-glyph-check-circle;