@atlassian/aui 9.9.3 → 9.10.0

package/src/js/aui/messages.js

@@ -6,10 +6,11 @@ import escapeHtml from './escape-html';
 import keyCode from './key-code';
 import skate from './internal/skate';
 import {CLOSE_BUTTON, CLOSE_BUTTON_CLASS_SELECTOR} from './close-button';
+import {I18n} from './i18n';
 
-var DEFAULT_FADEOUT_DURATION = 500;
-var DEFAULT_FADEOUT_DELAY = 5000;
-var FADEOUT_RESTORE_DURATION = 100;
+const DEFAULT_FADEOUT_DURATION = 500;
+const DEFAULT_FADEOUT_DELAY = 5000;
+const FADEOUT_RESTORE_DURATION = 100;
 
 function createMessageConstructor(type) {
     /**
@@ -18,6 +19,7 @@ function createMessageConstructor(type) {
      * @param {Object} obj - message configuration
      * @param {String} [obj.id] - ID to add to the message.
      * @param {String} [obj.title] - Plain-text title of the message. If provided, will appear above the message body.
+     * @param {String} [obj.a11yTypeLabel] - Accessibility label that will communicate type of message non-visually
      * @param {String} obj.body - Content of the message. Can be HTML content.
      * @param {boolean} [obj.closeable] - If true, the message can be manually closed by the end-user via the UI.
      * @param {boolean} [obj.removeOnHide] - If true, the message will be removed from the DOM after hide.
@@ -26,7 +28,7 @@ function createMessageConstructor(type) {
      * @param {boolean} [obj.delay]
      * @returns {*|HTMLElement}
      */
-    messages[type] = function (context, obj) {
+    this[type] = function (context, obj) {
         if (!obj) {
             obj = context;
             context = '#aui-message-bar';
@@ -43,6 +45,7 @@ function createMessageConstructor(type) {
 
         // Attach the optional extra behaviours
         if (obj.removeOnHide) {
+            console.warn && console.warn('Use of AUI Message `removeOnHide` is deprecated due to accessibility reasons and will be removed in AUI 10.0.0.')
             makeRemoveOnHide($message, obj.delay, obj.duration);
         }
 
@@ -51,6 +54,7 @@ function createMessageConstructor(type) {
         }
 
         if (obj.fadeout) {
+            console.warn && console.warn('Use of AUI Message `fadeout` is deprecated due to accessibility reasons and will be removed in AUI 10.0.0.')
             makeFadeout($message, obj.delay, obj.duration);
         }
 
@@ -60,16 +64,16 @@ function createMessageConstructor(type) {
 
 function makeRemoveOnHide(message, delay, duration) {
     $(message || '.aui-message.aui-remove-on-hide').each(function () {
-        var $this = $(this);
+        const $this = $(this);
         makeFadeout($this, delay, duration)
     })
 }
 
 function makeCloseable(message) {
     $(message || 'div.aui-message.closeable').each(function () {
-        var $this = $(this);
-        var $closeIcons = $this.find(CLOSE_BUTTON_CLASS_SELECTOR);
-        var $icon = $closeIcons.length > 0 ? $closeIcons.first() : $(CLOSE_BUTTON);
+        const $this = $(this);
+        const $closeIcons = $this.find(CLOSE_BUTTON_CLASS_SELECTOR);
+        const $icon = $closeIcons.length > 0 ? $closeIcons.first() : $(CLOSE_BUTTON);
 
         $this.addClass('closeable');
         $this.append($icon);
@@ -83,11 +87,11 @@ function makeFadeout(message, delay, duration) {
     duration = (typeof duration !== 'undefined') ? duration : DEFAULT_FADEOUT_DURATION;
 
     $(message || 'div.aui-message.fadeout').each(function () {
-        var $this = $(this);
+        const $this = $(this);
 
         //Store the component state to avoid collisions between animations
-        var hasFocus = false;
-        var isHover = false;
+        let hasFocus = false;
+        let isHover = false;
 
         //Small functions to keep the code easier to read and avoid code duplication
         function fadeOut(){
@@ -144,18 +148,7 @@ function makeFadeout(message, delay, duration) {
     });
 }
 
-/**
- * Utility methods to display different message types to the user.
- * Usage:
- * <pre>
- * messages.info("#container", {
-     *   title: "Info",
-     *   body: "You can choose to have messages without Close functionality.",
-     *   closeable: false,
-     * });
- * </pre>
- */
-var messages = {
+const messageFunctions = {
     setup: function () {
         makeRemoveOnHide();
         makeCloseable();
@@ -192,10 +185,51 @@ function insertMessageIntoContext($message, insertWhere, context) {
     }
 }
 
-function renderMessageElement ({id, closeable, removeOnHide, fadeout, title, body}, type) {
+function getMessageA11yTypeText(obj, type) {
+    const { a11yTypeLabel } = obj;
+
+    if (a11yTypeLabel === '') {
+        return '';
+    }
+
+    const isA11yTypeLabelNotEmpty = a11yTypeLabel != null;
+    if (isA11yTypeLabelNotEmpty) {
+        return a11yTypeLabel;
+    }
+
+    const isA11yTypeLabelNotPassed = a11yTypeLabel == null;
+    if (isA11yTypeLabelNotPassed) {
+        switch (type) {
+            case 'error':
+                return I18n.getText('aui.messagecomponent.error.label');
+            case 'warning':
+                return I18n.getText('aui.messagecomponent.warning.label');
+            case 'info':
+                return I18n.getText('aui.messagecomponent.info.label');
+            case 'confirmation':
+                return I18n.getText('aui.messagecomponent.confirmation.label');
+            case 'change':
+                return I18n.getText('aui.messagecomponent.change.label');
+            case 'generic':
+            case 'success':
+            case 'hint':
+                return '';
+            default:
+                throw Error(`Provide \`a11yTypeLabel\` for AUI message of custom type ${type}`);
+        }
+    }
+}
+
+function renderMessageElement (obj, type) {
+    const { id, closeable, removeOnHide, fadeout, title, body } = obj;
+
+    const messageTypeText = getMessageA11yTypeText(obj, type);
+    const messageTypeLabel = messageTypeText ? `<strong hidden>${messageTypeText}: </strong>` : '';
+
     // Convert the options in to template values
-    const titleHtml = title ? `<p class="title"><strong>${escapeHtml(title)}</strong></p>` : '';
-    const html = `<div class="aui-message">${titleHtml}</div>`;
+    const titleId = id ? `${id}-title` : '';
+    const titleHtml = title ? `<p class="title"  ${titleId ? `id="${titleId}" aria-hidden="true"` : ''}>${messageTypeLabel}<strong>${escapeHtml(title)}</strong></p>` : '';
+    const html = `<div class="aui-message" role="note" ${titleId ? `aria-labelledby="${titleId}"` : ''}>${titleHtml}</div>`;
 
     // Construct the message element
     const $message = $(html)
@@ -207,7 +241,7 @@ function renderMessageElement ({id, closeable, removeOnHide, fadeout, title, bod
 
     // Add ID if supplied
     if (id) {
-        if (/[#\'\"\.\s]/g.test(id)) {
+        if (/[#'".\s]/g.test(id)) {
             // reject IDs that don't comply with style guide (ie. they'll break stuff)
             logger.warn('Messages error: ID rejected, must not include spaces, hashes, dots or quotes.');
         } else {
@@ -219,7 +253,7 @@ function renderMessageElement ({id, closeable, removeOnHide, fadeout, title, bod
 }
 
 $.fn.closeMessage = function () {
-    var $message = $(this);
+    const $message = $(this);
     if ($message.hasClass('aui-message') && ($message.hasClass('closeable') || $message.hasClass('aui-remove-on-hide'))) {
         $message.stop(true); //Stop any running animation
         $message.trigger('messageClose', [this]); //messageClose event Deprecated as of 5.3
@@ -228,23 +262,37 @@ $.fn.closeMessage = function () {
     }
 };
 
-createMessageConstructor('generic'); //Deprecated Oct 2017
-createMessageConstructor('error');
-createMessageConstructor('warning');
-createMessageConstructor('info');
-createMessageConstructor('confirmation');
-createMessageConstructor('change');
-createMessageConstructor('success'); //Deprecated Oct 2017
-createMessageConstructor('hint'); //Deprecated Oct 2017
+
+/**
+ * Utility methods to display different message types to the user.
+ * Usage:
+ * <pre>
+ * messages.info("#container", {
+ *   title: "Info",
+ *   body: "You can choose to have messages without Close functionality.",
+ *   closeable: false,
+ * });
+ * </pre>
+ */
+messageFunctions.createMessage('generic'); //Deprecated Oct 2017
+messageFunctions.createMessage('error');
+messageFunctions.createMessage('warning');
+messageFunctions.createMessage('info');
+messageFunctions.createMessage('confirmation');
+messageFunctions.createMessage('change');
+messageFunctions.createMessage('success'); //Deprecated Oct 2017
+messageFunctions.createMessage('hint'); //Deprecated Oct 2017
 
 const MessageEl = skate('aui-message', {
     created: function (element) {
-        var body = element.innerHTML;
-        var type = element.getAttribute('type') || 'info';
+        const body = element.innerHTML;
+        const type = element.getAttribute('type') || 'info';
 
         element.innerHTML = '';
-        messages[type](element, {
+        messageFunctions[type](element, {
             body: body,
+            id: element.getAttribute('id'),
+            a11yTypeLabel: element.getAttribute('a11yTypeLabel'),
             removeOnHide: element.getAttribute('removeOnHide'),
             closeable: element.getAttribute('closeable'),
             delay: element.getAttribute('delay'),
@@ -252,41 +300,46 @@ const MessageEl = skate('aui-message', {
             fadeout: element.getAttribute('fadeout'),
             title: element.getAttribute('title')
         });
+        element.setAttribute('role', 'none');
     }
 });
 
 $(function () {
-    messages.setup();
+    messageFunctions.setup();
 });
 
-deprecate.prop(messages, 'makeCloseable', {
+deprecate.prop(messageFunctions, 'makeCloseable', {
     extraInfo: 'Use the "closeable" option in the constructor instead. Docs: https://aui.atlassian.com/latest/docs/messages.html'
 });
 
-deprecate.prop(messages, 'createMessage', {
+deprecate.prop(messageFunctions, 'createMessage', {
     extraInfo: 'Use the provided convenience methods instead e.g. messages.info(). Docs: https://aui.atlassian.com/latest/docs/messages.html'
 });
 
-deprecate.prop(messages, 'makeFadeout', {
-    extraInfo: 'Use the "fadeout" option in the constructor instead. Docs: https://aui.atlassian.com/latest/docs/messages.html'
+deprecate.prop(messageFunctions, 'makeRemoveOnHide', {
+    extraInfo: 'Use of the `makeRemoveOnHide` option is deprecated due to accessibility reasons. Docs: https://aui.atlassian.com/latest/docs/messages.html'
+});
+
+deprecate.prop(messageFunctions, 'makeFadeout', {
+    extraInfo: 'Use of the `fadeout` option is deprecated due to accessibility reasons. Docs: https://aui.atlassian.com/latest/docs/messages.html'
 });
 
-deprecate.prop(messages, 'generic', {
+deprecate.prop(messageFunctions, 'generic', {
     extraInfo: 'use the messages.info() method instead. Docs: https://aui.atlassian.com/latest/docs/messages.html'
 });
 
-deprecate.prop(messages, 'hint', {
+deprecate.prop(messageFunctions, 'hint', {
     extraInfo: 'use the messages.info() method instead. Docs: https://aui.atlassian.com/latest/docs/messages.html'
 });
-deprecate.prop(messages, 'success', {
+deprecate.prop(messageFunctions, 'success', {
     extraInfo: 'use the messages.confirmation() method instead. Docs: https://aui.atlassian.com/latest/docs/messages.html'
 });
 
 // Exporting
 // ---------
-globalize('messages', messages);
+globalize('messages', messageFunctions);
 
-export default messages;
+export default messageFunctions;
 export {
     MessageEl
 };

package/dist/aui/themes/typography.js

@@ -1,2 +0,0 @@
-"use strict";(window.webpackChunk_auiPrototyping=window.webpackChunk_auiPrototyping||[]).push([[767],{875:(n,s,a)=>{a.r(s),a.d(s,{default:()=>o});const o='\nhtml[data-theme~="typography:typography"] {\n  --ds-font-body: normal 400 0.875rem/1.25rem var(--ds-font-family-sans);\n  --ds-font-body-lg: normal 400 1rem/1.5rem var(--ds-font-family-sans);\n  --ds-font-body-sm: normal 400 0.75rem/1.25rem var(--ds-font-family-sans);\n  --ds-font-code: normal 400 0.875em/1 var(--ds-font-family-monospace);\n  --ds-font-heading-lg: normal 700 1.5rem/1.75rem var(--ds-font-family-sans);\n  --ds-font-heading-md: normal 700 1.25rem/1.5rem var(--ds-font-family-sans);\n  --ds-font-heading-sm: normal 700 1rem/1.25rem var(--ds-font-family-sans);\n  --ds-font-heading-xl: normal 700 1.75rem/2rem var(--ds-font-family-sans);\n  --ds-font-heading-xs: normal 700 0.875rem/1rem var(--ds-font-family-sans);\n  --ds-font-heading-xxl: normal 700 2.25rem/2.5rem var(--ds-font-family-sans);\n  --ds-font-heading-xxs: normal 700 0.75rem/1rem var(--ds-font-family-sans);\n  --ds-font-letterSpacing-0: 0;\n  --ds-font-letterSpacing-100: 0;\n  --ds-font-letterSpacing-200: 0;\n  --ds-font-letterSpacing-300: 0;\n  --ds-font-letterSpacing-400: 0;\n  --ds-font-ui: normal 400 0.875rem/1 var(--ds-font-family-sans);\n  --ds-font-ui-sm: normal 400 0.75rem/1 var(--ds-font-family-sans);\n  --ds-font-family-code: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;\n  --ds-font-family-monospace: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;\n  --ds-font-family-product: ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif;\n  --ds-font-family-sans: ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif;\n  --ds-font-family-brand: Charlie Sans;\n}\n'}}]);
-//# sourceMappingURL=typography.js.map

package/dist/aui/themes/typography.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"./themes/typography.js","mappings":"kJAAA,QAAgB,wmD","sources":["webpack://__auiPrototyping/./token-themes-generated/npm/themes/typography.js"],"sourcesContent":["export default `\nhtml[data-theme~=\"typography:typography\"] {\n  --ds-font-body: normal 400 0.875rem/1.25rem var(--ds-font-family-sans);\n  --ds-font-body-lg: normal 400 1rem/1.5rem var(--ds-font-family-sans);\n  --ds-font-body-sm: normal 400 0.75rem/1.25rem var(--ds-font-family-sans);\n  --ds-font-code: normal 400 0.875em/1 var(--ds-font-family-monospace);\n  --ds-font-heading-lg: normal 700 1.5rem/1.75rem var(--ds-font-family-sans);\n  --ds-font-heading-md: normal 700 1.25rem/1.5rem var(--ds-font-family-sans);\n  --ds-font-heading-sm: normal 700 1rem/1.25rem var(--ds-font-family-sans);\n  --ds-font-heading-xl: normal 700 1.75rem/2rem var(--ds-font-family-sans);\n  --ds-font-heading-xs: normal 700 0.875rem/1rem var(--ds-font-family-sans);\n  --ds-font-heading-xxl: normal 700 2.25rem/2.5rem var(--ds-font-family-sans);\n  --ds-font-heading-xxs: normal 700 0.75rem/1rem var(--ds-font-family-sans);\n  --ds-font-letterSpacing-0: 0;\n  --ds-font-letterSpacing-100: 0;\n  --ds-font-letterSpacing-200: 0;\n  --ds-font-letterSpacing-300: 0;\n  --ds-font-letterSpacing-400: 0;\n  --ds-font-ui: normal 400 0.875rem/1 var(--ds-font-family-sans);\n  --ds-font-ui-sm: normal 400 0.75rem/1 var(--ds-font-family-sans);\n  --ds-font-family-code: ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace;\n  --ds-font-family-monospace: ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace;\n  --ds-font-family-product: ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif;\n  --ds-font-family-sans: ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif;\n  --ds-font-family-brand: Charlie Sans;\n}\n`"],"names":[],"sourceRoot":""}

package/entry/token-themes-generated/npm/themes/typography.js

@@ -1,27 +0,0 @@
-export default `
-html[data-theme~="typography:typography"] {
-  --ds-font-body: normal 400 0.875rem/1.25rem var(--ds-font-family-sans);
-  --ds-font-body-lg: normal 400 1rem/1.5rem var(--ds-font-family-sans);
-  --ds-font-body-sm: normal 400 0.75rem/1.25rem var(--ds-font-family-sans);
-  --ds-font-code: normal 400 0.875em/1 var(--ds-font-family-monospace);
-  --ds-font-heading-lg: normal 700 1.5rem/1.75rem var(--ds-font-family-sans);
-  --ds-font-heading-md: normal 700 1.25rem/1.5rem var(--ds-font-family-sans);
-  --ds-font-heading-sm: normal 700 1rem/1.25rem var(--ds-font-family-sans);
-  --ds-font-heading-xl: normal 700 1.75rem/2rem var(--ds-font-family-sans);
-  --ds-font-heading-xs: normal 700 0.875rem/1rem var(--ds-font-family-sans);
-  --ds-font-heading-xxl: normal 700 2.25rem/2.5rem var(--ds-font-family-sans);
-  --ds-font-heading-xxs: normal 700 0.75rem/1rem var(--ds-font-family-sans);
-  --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-ui: normal 400 0.875rem/1 var(--ds-font-family-sans);
-  --ds-font-ui-sm: normal 400 0.75rem/1 var(--ds-font-family-sans);
-  --ds-font-family-code: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-monospace: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-product: ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif;
-  --ds-font-family-sans: ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif;
-  --ds-font-family-brand: Charlie Sans;
-}
-`

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

@@ -1,27 +0,0 @@
-export default `
-html[data-theme~="typography:typography"] {
-  --ds-font-body: normal 400 0.875rem/1.25rem var(--ds-font-family-sans);
-  --ds-font-body-lg: normal 400 1rem/1.5rem var(--ds-font-family-sans);
-  --ds-font-body-sm: normal 400 0.75rem/1.25rem var(--ds-font-family-sans);
-  --ds-font-code: normal 400 0.875em/1 var(--ds-font-family-monospace);
-  --ds-font-heading-lg: normal 700 1.5rem/1.75rem var(--ds-font-family-sans);
-  --ds-font-heading-md: normal 700 1.25rem/1.5rem var(--ds-font-family-sans);
-  --ds-font-heading-sm: normal 700 1rem/1.25rem var(--ds-font-family-sans);
-  --ds-font-heading-xl: normal 700 1.75rem/2rem var(--ds-font-family-sans);
-  --ds-font-heading-xs: normal 700 0.875rem/1rem var(--ds-font-family-sans);
-  --ds-font-heading-xxl: normal 700 2.25rem/2.5rem var(--ds-font-family-sans);
-  --ds-font-heading-xxs: normal 700 0.75rem/1rem var(--ds-font-family-sans);
-  --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-ui: normal 400 0.875rem/1 var(--ds-font-family-sans);
-  --ds-font-ui-sm: normal 400 0.75rem/1 var(--ds-font-family-sans);
-  --ds-font-family-code: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-monospace: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-product: ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif;
-  --ds-font-family-sans: ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif;
-  --ds-font-family-brand: Charlie Sans;
-}
-`