@atlassian/aui 9.7.1 → 9.7.2

package/package.json

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

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

@@ -1,37 +1,30 @@
 import skate from './internal/skate';
 
-const DEFAULT_VALUE = 'bottom-end'
+
+const DEFAULT_PLACEMENT_VALUE = 'bottom-end';
+const PLACEMENT_OPTIONS = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
 
 const setBadgedPlacement = (element, newValue, oldValue) => {
-    const placementOptions = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
-    const newPlacementClass = placementOptions.includes(newValue) ? newValue : DEFAULT_VALUE;
+    const newPlacement = PLACEMENT_OPTIONS.includes(newValue) ? newValue : DEFAULT_PLACEMENT_VALUE;
 
-    if (oldValue !== null) {
+    if (oldValue) {
         element.classList.remove(`aui-avatar-badged-${oldValue}`);
     }
-    element.classList.add(`aui-avatar-badged-${newPlacementClass}`);
+    element.classList.add(`aui-avatar-badged-${newPlacement}`);
 }
 
 const AvatarBadged = skate('aui-avatar-badged', {
-    attached(element) {
-        const value = element.getAttribute('placement');
-        if (value.length) {
-            setBadgedPlacement(element, value);
-        }
-    },
-
     attributes: {
         placement: {
-            value: DEFAULT_VALUE,
-
-            fallback: function(element, { newValue, oldValue}) {
+            value: DEFAULT_PLACEMENT_VALUE,
+            fallback(element, { newValue, oldValue}) {
                 setBadgedPlacement(element, newValue, oldValue);
             },
-        }
+        },
     },
 
     created: function(element) {
-        element.className = 'aui-avatar-badged';
+        element.classList.add('aui-avatar-badged');
     }
 });
 

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

@@ -2,14 +2,16 @@ import skate from './internal/skate';
 
 const DEFAULT_SIZE = 'medium';
 const sizes = {xsmall: 16, small: 24, medium: 32, large: 48, xlarge: 64, xxlarge: 96, xxxlarge: 128};
-let buttonDropdownIsActive = false;
+let isButtonDropdownActive = false;
 
-const setDefaultSizeValue = (value) => {
+const getAvatarGroupSize = (value) => {
     return Object.keys(sizes).includes(value) ? value : DEFAULT_SIZE;
 }
 
 const setAvatarGroupSize = (element, newValue, oldValue) => {
-    element.classList.remove(`aui-avatar-group-${oldValue}`);
+    if (oldValue) {
+        element.classList.remove(`aui-avatar-group-${oldValue}`);
+    }
     element.classList.add(`aui-avatar-group-${newValue}`);
 }
 
@@ -29,9 +31,7 @@ const setBadgedDropdownItem = (element) => {
     const badgedDropdown = element.parentNode.querySelector('.aui-avatar-group-dropdown')
     const hiddenAvatarsList = [... avatars].slice(4);
 
-    if (!buttonDropdownIsActive) {
-        buttonDropdownIsActive = true;
-
+    if (isButtonDropdownActive) {
         hiddenAvatarsList.forEach(avatar => {
             const avatarItemSrc = avatar.getAttribute('src');
             const avatarItemAlt = avatar.getAttribute('alt');
@@ -49,8 +49,6 @@ const setBadgedDropdownItem = (element) => {
             badgedDropdown.appendChild(avatarWrapper);
         });
     } else {
-        buttonDropdownIsActive = false;
-
         hiddenAvatarsList.forEach(()=> {
             const dropdownItems = document.querySelector('.aui-avatar-group-dropdown-item');
             if (dropdownItems) {dropdownItems.remove();}
@@ -60,8 +58,11 @@ const setBadgedDropdownItem = (element) => {
 }
 
 const handleClickOnBadged = (element) => {
-    const badgedDropdown = element.parentNode.querySelector('.aui-avatar-group-dropdown')
+    const badgedDropdown = element.parentNode.querySelector('.aui-avatar-group-dropdown');
     badgedDropdown.classList.toggle('aui-avatar-group-dropdown-show');
+    
+    isButtonDropdownActive = !isButtonDropdownActive;
+    element.setAttribute('aria-expanded', isButtonDropdownActive.toString());
 
     setBadgedDropdownItem(element);
 }
@@ -78,6 +79,8 @@ const createAvatarGroupBadged = (element, size, avatars, amount) => {
     groupBadged.classList.add('aui-avatar-group-badged', 'aui-avatar-inner');
     groupBadged.style.left = setLeftPosition(size, 4.5, multiplier);
     groupBadged.innerText = `+${amount}`;
+    groupBadged.setAttribute('aria-expanded', isButtonDropdownActive.toString());
+    groupBadged.setAttribute('aria-haspopup', 'dialog')
     element.appendChild(groupBadged);
 
     groupBadged.addEventListener('click', () => handleClickOnBadged(groupBadged))
@@ -111,21 +114,17 @@ const AvatarGroupEl = skate('aui-avatar-group', {
             value: DEFAULT_SIZE,
 
             fallback(element, { newValue , oldValue }) {
-                let value = setDefaultSizeValue(newValue);
+                const size = getAvatarGroupSize(newValue);
 
                 skate.init(element);
-                setAvatarGroupSize(element, value, oldValue);
-                tidyUpAvatarGroup(element, value);
+                setAvatarGroupSize(element, size, oldValue);
+                tidyUpAvatarGroup(element, size);
             }
         }
     },
 
     created(element) {
-        const avatarGroupSize = element.getAttribute('size')
-        const value = setDefaultSizeValue(avatarGroupSize);
-
-        element.className = 'aui-avatar-group';
-        setAvatarGroupSize(element, value);
+        element.classList.add('aui-avatar-group');
     }
 });
 

package/src/js/aui/avatar.js

@@ -9,6 +9,7 @@ const DEFAULT_AVATAR_IMAGES = new Map([
 ]);
 
 const getElementWrapper = (element, elementFind) => element.querySelector(elementFind);
+const containsBadge = (element) => element.querySelector('aui-avatar-badged') !== null;
 
 const replaceClass = (element, newValue, oldValue) => {
     const elementWrapper = getElementWrapper(element, '.aui-avatar');
@@ -48,20 +49,19 @@ const AvatarEl = skate('aui-avatar', {
         size(element, { newValue , oldValue}) {
             replaceClass(element, newValue, oldValue);
         },
-
         type(element, { newValue, oldValue}) {
             replaceClass(element, newValue, oldValue);
             setDefaultAvatarImage(element);
         },
-
         src(element, { newValue: value }) {
             setImageSrc(element, value);
         },
-
-        alt(element, {newValue: value}) {
-            setImageAlt(element, value);
+        alt: {
+            value: '',
+            fallback(element, {newValue: value}) {
+                setImageAlt(element, value);
+            }
         },
-
         title(element, {newValue: value}) {
             setImageTitle(element, value);
         },
@@ -70,6 +70,10 @@ const AvatarEl = skate('aui-avatar', {
     created: function(element) {
         element.className = 'aui-avatar';
         setDefaultAvatarImage(element);
+
+        if (containsBadge(element)) {
+            element.setAttribute('role', 'img')
+        }
     }
 });
 

package/src/js/aui/form-notification.js

@@ -119,7 +119,38 @@ function updateAriaInfo($field) {
         labels.push(`${id}-${ARIA_DESCRIPTION_POSTFIX}`);
     }
 
-    $field.attr(ARIA_INFO_ATTRIBUTE, !!labels.length ? labels.join(' ') : null);
+    const $ariaTarget = conditionallyGetFieldTarget($field);
+
+    $ariaTarget.attr(ARIA_INFO_ATTRIBUTE, !!labels.length ? labels.join(' ') : null);
+}
+
+/**
+ * During the process of improving A11Y in the project,
+ * we discovered that for some form elements we need to
+ * make a shift of the target where aria-* attributes
+ * are to be applied.
+ *
+ * This function contains the mapping and returns
+ * the desired target, if it was found.
+ *
+ * If not - the same $field is returned back.
+ */
+function conditionallyGetFieldTarget($field) {
+    const modifiers = {
+        'aui-select': 'input[type="text"][role="combobox"]'
+    };
+
+    for (let [source, selector] of Object.entries(modifiers)) {
+        if ($field.is(source)) {
+            const $target = $field.find(selector);
+
+            if ($target.length) {
+                return $target;
+            }
+        }
+    }
+
+    return $field;
 }
 
 function isJqueryObject(el) {
@@ -132,7 +163,7 @@ function errorMessageTemplate($field, messages) {
         .map(message => `<li><span class="aui-icon aui-icon-small aui-iconfont-error aui-icon-notification"></span>${message}</li>`)
         .join('');
 
-    return `<div class="error" id="${id}-${ARIA_ERROR_POSTFIX}"><ul>${list}</ul></div>`;
+    return `<div class="error" role="alert" id="${id}-${ARIA_ERROR_POSTFIX}"><ul>${list}</ul></div>`;
 }
 
 function descriptionTemplate($field, messages) {

package/src/js/aui/form-validation.js

@@ -183,6 +183,7 @@ function createArgumentAccessorFunction($field) {
 
 function changeFieldState($field, state, message) {
     $field.attr('data-' + ATTRIBUTE_FIELD_STATE, state);
+    $field.attr('aria-invalid', false);
 
     if (state === UNVALIDATED) {
         return;
@@ -205,6 +206,9 @@ function changeFieldState($field, state, message) {
         setFieldNotification($displayField, notificationType, message);
     }
 
+    if (state === INVALID) {
+        $field.attr('aria-invalid', true);
+    }
 }
 
 function showSpinnerIfSlow($field) {

package/src/js/aui/select2.js

@@ -39,34 +39,85 @@ $.fn.auiSelect2 = function (first) {
         updatedArgs = arguments;
     }
 
+    const options = updatedArgs[0];
+
+    /**
+     * AUI-5464: after the upgrade to select2 v3.5.4, custom error handling stopped
+     * working, as the `ajax.params.error` function is overriden by select2, and
+     * there is no alternative to this...
+     *
+     * This is a workaround for creating an array of ajax error handlers that will
+     * contain the default handler and the custom ones, which is supported starting
+     * from jQuery v1.5: http://api.jquery.com/jquery.ajax/
+     *
+     * Please note this issue is fixed starting from select2 v4, though the data format
+     * is different.
+     *
+     * @see https://atlassian.slack.com/archives/CFGN5350T/p1686741137056489
+     */
+    if (options.ajax && options.ajax.params && options.ajax.params.error) {
+        let customErrorHandlers = options.ajax.params.error;
+        if (!Array.isArray(customErrorHandlers)) {
+            customErrorHandlers = [customErrorHandlers];
+        }
+        let originalTransport = options.ajax.transport;
+        if (!originalTransport) {
+            originalTransport = originalSelect2.ajaxDefaults.transport
+        }
+
+        const newTransport = function(...args) {
+            args[0].error = [args[0].error, ...customErrorHandlers];
+            return originalTransport(...args);
+        };
+
+        options.ajax.transport = newTransport;
+    }
+
     const result = originalSelect2.apply(this, updatedArgs);
     const select2Instance = this;
-    const searchLabel = updatedArgs[0].searchLabel;
+    const searchLabel = options.searchLabel;
 
     select2Instance.on('select2-open', function () {
         const $selectInput = $(this);
 
-        if (updatedArgs[0].multiple || $selectInput.attr('multiple')) {
+        if (options.multiple || $selectInput.attr('multiple')) {
             // This is a multi-select, exiting
             return;
         }
 
-        const $selectDropdown = $selectInput.select2('dropdown')
+        const $selectDropdown = $selectInput.select2('dropdown');
 
         if (searchLabel) {
             $selectDropdown.find('.select2-search label').text(searchLabel);
         }
+    });
+
+    select2Instance.on('select2-close', function () {
+        const $selectInput = $(this);
+        $selectInput.removeData('was-ariadescribedby-cleared');
+    });
+
+    select2Instance.on('select2-loaded', function () {
+        const $selectInput = $(this);
+        const wasAriaDescribedByCleared = $selectInput.data('was-ariadescribedby-cleared');
+
+        if (options.multiple || $selectInput.attr('multiple') || wasAriaDescribedByCleared) {
+            return;
+        }
+
+        const $selectDropdown = $selectInput.select2('dropdown');
 
         // AUI-5461: when single select dropdown opens up, the first option is
         // instantly focused, making SRs announce it, while skipping the search field
         $selectDropdown.find('.select2-search .select2-input').attr('aria-activedescendant', '');
+        $selectInput.data('was-ariadescribedby-cleared', true);
     });
 
     select2Instance.on('select2-focus', function () {
         const $selectInput = $(this);
         const $container = $selectInput.parent().find('.select2-container');
 
-        if (updatedArgs[0].multiple || $selectInput.attr('multiple')) {
+        if (options.multiple || $selectInput.attr('multiple')) {
             if (searchLabel) {
                 $container.find('.select2-search-field label').text(searchLabel);
             }