@atlassian/aui 9.10.1 → 9.11.0

package/entry/token-themes-generated/p2/themes/typography-minor3.js

@@ -1,35 +1,41 @@
 export default `
 html[data-theme~="typography:typography-minor3"] {
   --ds-UNSAFE-textTransformUppercase: uppercase;
-  --ds-font-heading-xxlarge: normal 700 2rem/2.25rem var(--ds-font-family-heading);
-  --ds-font-heading-xlarge: normal 700 1.75rem/2rem var(--ds-font-family-heading);
-  --ds-font-heading-large: normal 700 1.5rem/1.75rem var(--ds-font-family-heading);
-  --ds-font-heading-medium: normal 700 1.25rem/1.5rem var(--ds-font-family-heading);
-  --ds-font-heading-small: normal 700 1rem/1.25rem var(--ds-font-family-heading);
-  --ds-font-heading-xsmall: normal 700 0.875rem/1rem var(--ds-font-family-heading);
-  --ds-font-heading-xxsmall: normal 700 0.75rem/1rem var(--ds-font-family-heading);
-  --ds-font-body-large: normal 400 1rem/1.5rem var(--ds-font-family-body);
-  --ds-font-body: normal 400 0.875rem/1.25rem var(--ds-font-family-body);
-  --ds-font-body-small: normal 400 0.75rem/1rem var(--ds-font-family-body);
-  --ds-font-ui: normal 400 0.875rem/1 var(--ds-font-family-body);
-  --ds-font-ui-small: normal 400 0.75rem/1 var(--ds-font-family-body);
-  --ds-font-code: normal 400 0.875em/1 var(--ds-font-family-code);
+  --ds-font-heading-xxlarge: normal 700 2rem/2.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xlarge: normal 700 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-large: normal 700 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-medium: normal 700 1.25rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-small: normal 700 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xsmall: normal 700 0.875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xxsmall: normal 700 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-large: normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body: normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-small: normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-UNSAFE_small: normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-ui: normal 500 0.875rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-ui-small: normal 400 0.75rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-code: normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
   --ds-font-letterSpacing-0: 0;
   --ds-font-letterSpacing-100: 0;
   --ds-font-letterSpacing-200: 0;
   --ds-font-letterSpacing-300: 0;
   --ds-font-letterSpacing-400: 0;
-  --ds-font-family-body: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   --ds-font-family-code: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-heading: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-heading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   --ds-font-family-monospace: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-sans: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
-  --ds-font-family-brand: Charlie Sans;
+  --ds-font-family-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-brand-body: "Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-brand-heading: "Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-weight-bold: 700;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-regular: 400;
+  --ds-font-weight-semibold: 600;
   @media not all and (min-width: 64rem) {
-    --ds-font-heading-xxlarge: normal 700 1.75rem/2rem var(--ds-font-family-heading);
-    --ds-font-heading-xlarge: normal 700 1.5rem/1.75rem var(--ds-font-family-heading);
-    --ds-font-heading-large: normal 700 1.25rem/1.5rem var(--ds-font-family-heading);
-    --ds-font-heading-medium: normal 700 1rem/1.25rem var(--ds-font-family-heading);
+    --ds-font-heading-xxlarge: normal 700 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+    --ds-font-heading-xlarge: normal 700 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+    --ds-font-heading-large: normal 700 1.25rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+    --ds-font-heading-medium: normal 700 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   }
 }
 `

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.10.1",
+    "version": "9.11.0",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -33,12 +33,12 @@
         "jquery": "^2 || ^3"
     },
     "dependencies": {
-        "@atlaskit/tokens": "1.33.0",
+        "@atlaskit/tokens": "1.43.0",
         "@atlassian/tipsy": "1.3.3",
         "@popperjs/core": "2.11.8",
-        "backbone": "1.5.0",
+        "backbone": "1.6.0",
         "css.escape": "1.5.1",
-        "dompurify": "2.4.7",
+        "dompurify": "2.5.0",
         "fancy-file-input": "2.0.4",
         "jquery-ui": "1.13.2",
         "skatejs": "0.13.17",

package/src/js/aui/flag.js

@@ -1,11 +1,14 @@
 import $ from './jquery';
+import { defaults } from 'underscore';
 import { recomputeStyle } from './internal/animation';
 import amdify from './internal/amdify';
 import globalize from './internal/globalize';
 import keyCode from './key-code';
 import CustomEvent from './polyfills/custom-event';
 import escapeHtml from './escape-html';
-import {CLOSE_BUTTON} from './close-button';
+import { CLOSE_BUTTON } from './close-button';
+import { FOCUSABLE_QUERY } from './internal/a11y/focusable-query';
+import getFocusManager from './focus-manager';
 
 const AUTO_CLOSE_TIME = 8000;
 const ID_FLAG_CONTAINER = 'aui-flag-container';
@@ -15,24 +18,38 @@ const DEFAULT_OPTIONS = {
     title: '',
     type: 'info',
     duration: AUTO_CLOSE_TIME,
+    ariaLive: 'polite'
 };
 
 function flag (flagOptions) {
-    const options = { ...DEFAULT_OPTIONS, ...flagOptions };
+    const options = defaults(flagOptions, DEFAULT_OPTIONS);
     options.title = (options.title || '').toString().trim();
-
     const $flag = renderFlagElement(options);
     extendFlagElement($flag);
 
     if (options.close === 'auto') {
         makeCloseable($flag);
-        makeAutoClosable($flag, options.duration);
+
+        if ($flag.attr('aui-focus-trap') === 'false') {
+            makeAutoClosable($flag, options.duration);
+        }
     } else if (options.close === 'manual') {
         makeCloseable($flag);
     }
 
     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)
 
     return $flag.get(0);
 }
@@ -45,15 +62,19 @@ function extendFlagElement ($flag) {
     };
 }
 
-function renderFlagElement ({body, title, close, type}) {
+function renderFlagElement ({ body, title, close, type, ariaLive }) {
     const titleHtml = title ? `<p class="title"><strong>${escapeHtml(title)}</strong></p>` : '';
     const html = `<div class="aui-message">${titleHtml}</div>`;
+    const ariaLabel = title ? escapeHtml(title) : '';
 
     const $message = $(html)
         .append($.parseHTML(body || ''))
         .addClass(close === 'never' ? '' : 'closeable')
         .addClass(`aui-message-${type}`);
-    return $('<div class="aui-flag" aria-live="polite"></div>').append($message);
+    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);
 }
 
 function makeCloseable ($flag) {
@@ -84,7 +105,12 @@ function closeFlag ($flagToClose) {
     const flag = $flagToClose.get(0);
 
     flag.removeAttribute('open');
-    flag.dispatchEvent(new CustomEvent('aui-flag-close', {bubbles: true}));
+    flag.setAttribute('inert', '');
+    flag.setAttribute('aria-hidden', true);
+    flag.dispatchEvent(new CustomEvent('aui-flag-close', { bubbles: true }));
+    if ($flagToClose.attr('aui-focus-trap')) {
+        getFocusManager.global.exit($flagToClose);
+    }
 
     return flag;
 }
@@ -113,7 +139,7 @@ function insertFlag ($flag) {
 
     $flag
         .removeAttr('hidden')
-        .attr('open','');
+        .attr('open', '');
 }
 
 amdify('aui/flag', flag);

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

@@ -105,7 +105,9 @@ FocusManager.prototype.enter = function ($el, $lastFocused) {
 
 FocusManager.prototype.exit = function ($el) {
     if (elementTrapsFocus($el)) {
-        this._focusTrapStack.pop();
+        this._focusTrapStack.splice(
+            this._focusTrapStack.indexOf($el), 1
+        );
         if (!this._focusTrapStack.length) {
             $(document).off('.aui-focus-manager', this._handler);
             delete this._handler;

package/src/js/aui/internal/a11y/focusable-query.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line max-len
+export const FOCUSABLE_QUERY = 'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable], audio[controls], video[controls], summary, [tabindex^="0"], [tabindex^="1"], [tabindex^="2"], [tabindex^="3"], [tabindex^="4"], [tabindex^="5"], [tabindex^="6"], [tabindex^="7"], [tabindex^="8"], [tabindex^="9"]';
+
+

package/src/js/aui/restful-table/edit-row.js

@@ -227,7 +227,7 @@ export default Backbone.View.extend({
 
         this.$el.addClass(this.classNames.DISABLED)
             .find(':submit')
-            .attr('disabled', 'disabled');
+            .prop('disabled', true);
 
         return this;
     },
@@ -254,7 +254,7 @@ export default Backbone.View.extend({
 
         this.$el.removeClass(this.classNames.DISABLED)
             .find(':submit')
-            .removeAttr('disabled');
+            .prop('disabled', false);
 
         return this;
     },

package/src/js/aui/tooltip.js

@@ -48,7 +48,8 @@ const getTipNode = () => {
 const toggleTooltipVisibility = (shouldBeHidden = false) => {
     const tipNode = getTipNode();
     if (tipNode) {
-        tipNode.classList.toggle('assistive', shouldBeHidden)
+        tipNode.classList.toggle('hidden', shouldBeHidden);
+        tipNode.setAttribute('aria-hidden', shouldBeHidden);
     }
 }
 
@@ -136,7 +137,7 @@ class Tooltip {
 
     initContainer() {
         if ($sharedTip === undefined || $sharedTip.get(0) && !$sharedTip.get(0).isConnected) {
-            $sharedTip = $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} assistive" role="tooltip"><p class="aui-tooltip-content"></p></div>`);
+            $sharedTip = $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} hidden" role="tooltip" aria-hidden="true"><p class="aui-tooltip-content"></p></div>`);
             $(document.body).append($sharedTip);
         }
     }