@atlassian/aui 9.5.2 → 9.6.0

package/src/js/aui/select.js

@@ -16,11 +16,12 @@ import SuggestionsView from './internal/select/suggestions-view';
 import template from './internal/select/template';
 import uniqueId from './unique-id';
 import { INPUT_SUFFIX } from './internal/constants';
-import {ifGone} from './internal/elements';
+import { ifGone } from './internal/elements';
 
-var DESELECTED = -1;
-var NO_HIGHLIGHT = -1;
-var DEFAULT_SS_PDS_SIZE = 20;
+const DESELECTED = -1;
+const NO_HIGHLIGHT = -1;
+const DEFAULT_SS_PDS_SIZE = 20;
+const ASSISTIVE_STATUS_DELAY_MS = 50;
 
 function decodeHtmlEntities(input) {
     var doc = new DOMParser().parseFromString(input, 'text/html');
@@ -42,7 +43,7 @@ function hasResults(element) {
 }
 
 function waitForAssistive (callback) {
-    setTimeout(callback, 50);
+    setTimeout(callback, ASSISTIVE_STATUS_DELAY_MS);
 }
 
 function setBusyState (element) {
@@ -64,9 +65,16 @@ function matchPrefix (model, query) {
     return value.indexOf(query.toLowerCase()) === 0;
 }
 
-function hideDropdown (element) {
-    element._suggestionsView.hide();
+function resetDropdown (element) {
     element._input.setAttribute('aria-expanded', 'false');
+    element._button.setAttribute('aria-expanded', 'false');
+    element._input.removeAttribute('aria-activedescendant');
+    updateAssistiveStatus(element, '');
+}
+
+function resetAndCloseDropdown (element) {
+    element._suggestionsView.hide();
+    resetDropdown(element);
 }
 
 function setInitialVisualState (element) {
@@ -74,7 +82,7 @@ function setInitialVisualState (element) {
 
     element._suggestionModel.highlight(initialHighlightedItem);
 
-    hideDropdown(element);
+    resetAndCloseDropdown(element);
 }
 
 function setElementImage (element, imageSource) {
@@ -129,7 +137,7 @@ function clearValue (element) {
 function selectHighlightedSuggestion (element) {
     setValueAndDisplayFromModel(element, element._suggestionModel.highlighted());
     setInputImageToHighlightedSuggestion(element);
-    setInitialVisualState(element);
+    resetAndCloseDropdown(element);
 }
 
 function convertOptionToModel (option) {
@@ -238,25 +246,26 @@ function initialiseProgressiveDataSet (element) {
             data.results.push(createNewValueModel(element));
         }
 
-        if (!state(element).get('should-include-selected')) {
-            var indexOfValueInResults = getIndexInResults(element.value, data.results);
-
-            if (indexOfValueInResults >= 0) {
-                data.results.splice(indexOfValueInResults, 1);
-            }
-        }
+        let indexOfValueInResults = getIndexInResults(element.value, data.results);
+        indexOfValueInResults = indexOfValueInResults === -1 ? 0 : indexOfValueInResults;
 
         const resultsChanged = clearAndSet(element, data);
-        const optionToHighlight = element._suggestionModel.highlighted() || data.results[0];
+        const optionToHighlight = data.results[indexOfValueInResults];
 
         if (element._autoHighlight) {
             element._suggestionModel.setHighlighted(optionToHighlight);
             waitForAssistive(function () {
-                element._input.setAttribute('aria-activedescendant', getActiveId(element));
+                const activeId = getActiveId(element);
+                if (activeId !== undefined && activeId !== null) {
+                    element._input.setAttribute('aria-activedescendant', activeId);
+                } else {
+                    element._input.removeAttribute('aria-activedescendant');
+                }
             });
         }
 
         element._input.setAttribute('aria-expanded', 'true');
+        element._button.setAttribute('aria-expanded', 'true');
 
         // If the response is async (append operation), has elements to append and has a highlighted element, we need to update the status.
         if (!element._isSync && resultsChanged && element._suggestionsView.getActive() && state(element).get('should-flag-new-suggestions')) {
@@ -295,19 +304,25 @@ export function bindSelectMousedown (element) {
             element._suggestionModel.highlight($(e.target).index());
             selectHighlightedSuggestion(element);
 
-            element._suggestionsView.hide();
-
             if ($(element).closest('.aui-layer').length > 0) {
                 preventClosingContainerLayer = true;
             }
-
-            element._input.removeAttribute('aria-activedescendant');
         } else {
             return false;
         }
     });
 }
 
+function updateAssistiveStatus (element, status) {
+    clearTimeout(element.assistiveStatusTimerId);
+    element.assistiveStatusTimerId = setTimeout(() => {
+        const assistiveStatusText = element._assistiveStatus.innerText;
+        if (status !== assistiveStatusText) {
+            element._assistiveStatus.innerText = status;
+        }
+    }, ASSISTIVE_STATUS_DELAY_MS);
+}
+
 function initialiseValue (element) {
     var option = element._datalist.querySelector('aui-option[selected]');
 
@@ -323,9 +338,7 @@ function isQueryInProgress (element) {
 function focusInHandler (element) {
     //if there is a selected value the single select should do an empty
     //search and return everything
-    var searchValue = element.value ? '' : element._input.value;
-    var isInputEmpty = element._input.value === '';
-    state(element).set('should-include-selected', isInputEmpty);
+    const searchValue = element.value ? '' : element._input.value;
     suggest(element, true, searchValue);
 }
 
@@ -370,14 +383,7 @@ function focusOutHandler (element) {
     cancelInProgressQueries(element);
     handleInvalidInputOnFocusOut(element);
     handleHighlightOnFocusOut(element);
-    hideDropdown(element);
-}
-
-function handleTabOut (element) {
-    var isSuggestionViewVisible = element._suggestionsView.isVisible();
-    if (isSuggestionViewVisible) {
-        selectHighlightedSuggestion(element);
-    }
+    resetAndCloseDropdown(element);
 }
 
 const SelectEl = skate('aui-select', {
@@ -389,29 +395,38 @@ const SelectEl = skate('aui-select', {
         element._dropdown = element.querySelector('.aui-popover');
         element._datalist = element.querySelector('datalist');
         element._button = element.querySelector('button');
+        element._assistiveStatus = element.querySelector('.aui-select-status.assistive');
         element._suggestionsView = new SuggestionsView(element._dropdown, element._input);
         element._suggestionModel = new SuggestionsModel();
 
         element._suggestionModel.onChange = function (oldSuggestions) {
-            var suggestionsToAdd = [];
+            const suggestionsToAdd = [];
 
             element._suggestionModel._suggestions.forEach(function (newSuggestion) {
-                var inArray = oldSuggestions.some(function (oldSuggestion) {
-                    return newSuggestion.id === oldSuggestion.id;
-                });
-
+                const inArray = oldSuggestions.some((oldSuggestion) => newSuggestion.id === oldSuggestion.id);
                 if (!inArray) {
                     suggestionsToAdd.push(newSuggestion);
                 }
             });
+            const results = convertOptionsToModels(element);
+            const indexOfValueInResults = getIndexInResults(element.value, results);
+            const numberOfItems = oldSuggestions.length + suggestionsToAdd.length;
+            const status = numberOfItems ? '' : `${I18n.getText('aui.select.no.suggestions')}`;
 
-            element._suggestionsView.render(suggestionsToAdd, oldSuggestions.length, element._listId);
+            element._suggestionsView.render(suggestionsToAdd, oldSuggestions.length, element._listId, indexOfValueInResults);
+            updateAssistiveStatus(element, status);
         };
 
         element._suggestionModel.onHighlightChange = function () {
-            var active = element._suggestionModel.highlightedIndex();
+            const active = element._suggestionModel.highlightedIndex();
             element._suggestionsView.setActive(active);
-            element._input.setAttribute('aria-activedescendant', getActiveId(element));
+
+            const activeId = getActiveId(element);
+            if (activeId !== undefined && activeId !== null) {
+                element._input.setAttribute('aria-activedescendant', activeId);
+            } else {
+                element._input.removeAttribute('aria-activedescendant');
+            }
         };
     },
 
@@ -420,7 +435,6 @@ const SelectEl = skate('aui-select', {
         initialiseProgressiveDataSet(element);
         associateDropdownAndTrigger(element);
         element._input.setAttribute('aria-controls', element._listId);
-        element.setAttribute('tabindex', '-1');
         bindHighlightMouseover(element);
         bindSelectMousedown(element);
         initialiseValue(element);
@@ -431,7 +445,7 @@ const SelectEl = skate('aui-select', {
     detached: function (element) {
         $(document).off('aui-close-layers-on-outer-click');
         ifGone(element).then(() => {
-            hideDropdown(element);
+            resetAndCloseDropdown(element);
             element._suggestionsView.destroy();
         });
     },
@@ -445,6 +459,9 @@ const SelectEl = skate('aui-select', {
 
         name(element, data) {
             element.querySelector('select').setAttribute('name', data.newValue);
+            element.querySelector('select').setAttribute('aria-label', `${data.newValue} list`);
+            element.querySelector('button').setAttribute('aria-label', `${data.newValue} list`);
+            element.querySelector('ul[role="listbox"]').setAttribute('aria-label', `${data.newValue} list`);
         },
 
         placeholder(element, data) {
@@ -487,10 +504,9 @@ const SelectEl = skate('aui-select', {
                 if (state(element).get('button-clicked-prevent-dropdown-hide')) {
                     state(element).set('button-clicked-prevent-dropdown-hide', false);
                 } else {
-                    hideDropdown(element);
+                    resetAndCloseDropdown(element);
                 }
             } else {
-                state(element).set('should-include-selected', true);
                 suggest(element, true);
             }
         },
@@ -501,7 +517,11 @@ const SelectEl = skate('aui-select', {
 
             if (e.keyCode === keyCode.ESCAPE) {
                 cancelInProgressQueries(element);
-                hideDropdown(element);
+                // There is no need to hide layer manually here. It will be handled by layering system.
+                // Otherwise, it can fire ESC event to the next layer, so
+                // it will close the next ESCapable layer.
+                // The only what we need is clean the state of the component.
+                resetDropdown(element);
                 return;
             }
 
@@ -513,7 +533,7 @@ const SelectEl = skate('aui-select', {
                     selectHighlightedSuggestion(element);
                     e.preventDefault();
                 } else if (e.keyCode === keyCode.TAB) {
-                    handleTabOut(element);
+                    selectHighlightedSuggestion(element);
                     handled = true;
                 } else if (e.keyCode === keyCode.UP) {
                     element._suggestionModel.highlightPrevious();

package/src/js/aui/tooltip.js

@@ -115,7 +115,7 @@ class Tooltip {
         }
 
         if (options.maxWidth) {
-            tooltipContentElement.css("max-width", options.maxWidth + "px");
+            tooltipContentElement.css('max-width', options.maxWidth + 'px');
         }
 
         return $sharedTip;