WebSVN – Moodle – Diff – /lib/amd/src/form-autocomplete.js

     'core/templates',
     'core/notification',
     'core/loadingicon',
     'core/aria',
     'core_form/changechecker',
+    'core/popper2',
+    'theme_boost/bootstrap/dom/event-handler',
 ], function(
     $,
     log,
     str,
     templates,
     notification,
     LoadingIcon,
     Aria,
-    FormChangeChecker
+    FormChangeChecker,
+    Popper,
+    EventHandler,
 ) {
     // Private functions and variables.
     /** @var {Object} KEYS - List of keycode constants. */
     var KEYS = {
         DOWN: 40,
      * @param {Object} state State variables for this autocomplete element.
      * @param {Element} item The item to be deselected.
      * @param {Element} originalSelect The original select list.
      * @return {Promise}
      */
-    var deselectItem = function(options, state, item, originalSelect) {
+    const deselectItem = async(options, state, item, originalSelect) => {
         var selectedItemValue = $(item).attr('data-value');
         // Preprend an empty option to the select list to avoid having a default selected option.
         if (originalSelect.find('option').first().attr('value') !== undefined) {
                 if ($(ele).attr('data-iscustom')) {
                     $(ele).remove();
+                }
+            }
         });
+        const selectedItemText = item[0].childNodes[2].textContent?.trim();
+        await announceChanges(state.selectionId, selectedItemText, 'removed');
         // Rerender the selection list.
-        return updateSelectionList(options, state, originalSelect)
+        await updateSelectionList(options, state, originalSelect);
-        .then(function() {
-            // Notify that the selection changed.
-            notifyChange(originalSelect);
-            return;
+        // Notify that the selection changed.
-        });
+        notifyChange(originalSelect);
     };
     /**
         return $.Deferred().resolve();
     };
     /**
+     * Rebuild the list of suggestions based on the current values in the select list, and the query.
+     * Any options in the original select with [data-enabled=disabled] will not be included
-     * Rebuild the list of suggestions based on the current values in the select list, and the query.
+     * as a suggestion option in the enhanced field.
+     *
      * @method updateSuggestions
      * @private
      * @param {Object} options The original options for this autocomplete.
         var suggestionsElement = $(document.getElementById(state.suggestionsId));
         // Used to track if we found any visible suggestions.
         var matchingElements = false;
         // Options is used by the context when rendering the suggestions from a template.
-        var suggestions = rebuildOptions(originalSelect.children('option:not(:selected)'), true);
+        var suggestions = rebuildOptions(originalSelect.children('option:not(:selected, [data-enabled="disabled"])'), true);
         // Re-render the list of suggestions.
         var searchquery = state.caseSensitive ? query : query.toLocaleLowerCase();
             // Get the element again.
             suggestionsElement = $(document.getElementById(state.suggestionsId));
             // Show it if it is hidden.
+            Aria.unhide(suggestionsElement.get());
-            Aria.unhide(suggestionsElement.get());
+            Popper.createPopper(inputElement[0], suggestionsElement[0], {
+                placement: 'bottom-start',
+                modifiers: [{name: 'flip', enabled: false}],
-            suggestionsElement.show();
+            });
             // For each option in the list, hide it if it doesn't match the query.
             suggestionsElement.children().each(function(index, node) {
      * @param {Object} options The original options for the autocomplete.
      * @param {Object} state State variables for the autocomplete.
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
      * @return {Promise}
      */
-    var createItem = function(options, state, originalSelect) {
+    const createItem = async(options, state, originalSelect) => {
         // Find the element in the DOM.
         var inputElement = $(document.getElementById(state.inputId));
         // Get the current text in the input field.
         var query = inputElement.val();
         var tags = query.split(',');
                     option.attr('data-iscustom', true);
+                }
+            }
         });
-        return updateSelectionList(options, state, originalSelect)
-        .then(function() {
+        // Announce the changes to the assistive technology.
-            // Notify that the selection changed.
-            notifyChange(originalSelect);
-            return;
-        })
-        .then(function() {
-            // Clear the input field.
+        await announceChanges(state.selectionId, query.trim(), 'added');
-            inputElement.val('');
+        await updateSelectionList(options, state, originalSelect);
+        // Notify that the selection changed.
+        notifyChange(originalSelect);
-            return;
-        })
+        // Clear the input field.
-        .then(function() {
+        inputElement.val('');
-            // Close the suggestions list.
-            return closeSuggestions(state);
+        // Close the suggestions list.
-        });
+        await closeSuggestions(state);
     };
     /**
      * Select the currently active item from the suggestions list.
+     *
      * @method selectCurrentItem
      * @private
+     * @param {Object} options The original options for the autocomplete.
-     * @param {Object} options The original options for the autocomplete.
+     * @param {Object} state State variables for the autocomplete.
-     * @param {Object} state State variables for the autocomplete.
+     * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
-     * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
+     * @param {string|null} selectedItem The item to be selected.
      * @return {Promise}
      */
-    var selectCurrentItem = function(options, state, originalSelect) {
+    const selectCurrentItem = async(options, state, originalSelect, selectedItem) => {
         // Find the elements in the page.
         // If only one can be selected at a time, start by deselecting everything.
         if (!options.multiple) {
             originalSelect.children('option').prop('selected', false);
+        }
         // Look for a match, and toggle the selected property if there is a match.
-        originalSelect.children('option').each(function(index, ele) {
+        originalSelect.children('option').each(function (index, ele) {
             if ($(ele).attr('value') == selectedItemValue) {
                 $(ele).prop('selected', true);
+            }
         });
-        return updateSelectionList(options, state, originalSelect)
-        .then(function() {
-            // Notify that the selection changed.
-            notifyChange(originalSelect);
+        await announceChanges(state.selectionId, selectedItem, 'added');
+        await updateSelectionList(options, state, originalSelect);
-            return;
+        // Notify that the selection changed.
-        })
+        notifyChange(originalSelect);
-        .then(function() {
-            if (options.closeSuggestionsOnSelect) {
+        if (options.closeSuggestionsOnSelect) {
-                // Clear the input element.
+            // Clear the input element.
-                inputElement.val('');
+            inputElement.val('');
-                // Close the list of suggestions.
+            // Close the list of suggestions.
-                return closeSuggestions(state);
+            await closeSuggestions(state);
-            } else {
+        } else {
-                // Focus on the input element so the suggestions does not auto-close.
+            // Focus on the input element so the suggestions does not auto-close.
-                inputElement.focus();
+            inputElement.focus();
-                // Remove the last selected item from the suggestions list.
-                return updateSuggestions(options, state, inputElement.val(), originalSelect);
+            // Remove the last selected item from the suggestions list.
             await updateSuggestions(options, state, inputElement.val(), originalSelect);
         });
     };
                     return false;
                 case KEYS.ENTER:
                     var suggestionsElement = $(document.getElementById(state.suggestionsId));
                     if ((inputElement.attr('aria-expanded') === "true") &&
                             (suggestionsElement.children('[aria-selected=true]').length > 0)) {
+                        const selectedItemText = suggestionsElement.children('[aria-selected=true]')[0].textContent.trim();
                         // If the suggestion list has an active item, select it.
-                        pendingJsPromise.resolve(selectCurrentItem(options, state, originalSelect));
+                        pendingJsPromise.resolve(selectCurrentItem(options, state, originalSelect, selectedItemText));
                     } else if (options.tags) {
                         // If tags are enabled, create a tag.
                         pendingJsPromise.resolve(createItem(options, state, originalSelect));
                     } else {
                         pendingJsPromise.resolve();
             // Activate it.
             activateItem(current, state)
             .then(function() {
+                // And select it.
-                // And select it.
+                const selectedItemText = element[0].textContent.trim();
-                return selectCurrentItem(options, state, originalSelect);
+                return selectCurrentItem(options, state, originalSelect, selectedItemText);
             })
             .then(function() {
                 return pendingPromise.resolve();
             })
-            .catch();
+            .catch(notification.exception);
         });
         var selectionElement = $(document.getElementById(state.selectionId));
+                    }
                     $(e.currentTarget).data('last-value', query);
                 });
+            }
+        }
+        // Add a Bootstrap keydown handler to close the suggestions list preventing the whole Dropdown close.
+        EventHandler.on(document, 'keydown.bs.dropdown.data-api', '.dropdown-menu', (event) => {
+            const pendingPromise = addPendingJSPromise('addNavigation-' + state.inputId + '-' + event.key);
+            if (event.key === "Escape" && inputElement.attr('aria-expanded') === "true") {
+                event.stopImmediatePropagation();
+                return pendingPromise.resolve(closeSuggestions(state));
+            }
+            return pendingPromise.resolve();
+        });
     };
     /**
      * Create and return an unresolved Promise for some pending JS.
                 M.util.js_complete(pendingKey);
                 notification.exception(error);
             });
     };
+    /**
+     * Announces changes to a tag in the autocomplete form.
+     *
+     * Updates the text content of a status element to inform users about the addition or removal
+     * of a tag. This is useful for accessibility purposes, ensuring screen readers can notify users
+     * of changes in the autocomplete component.
+     *
+     * @param {string} selectionId - The ID of the selection element used to locate the announcer element.
+     * @param {string|null|undefined} tagname - The name of the tag that was added or removed.
+     * @param {string} action - The action performed on the tag (e.g., "added" or "removed").
+     */
+    const announceChanges = async(selectionId, tagname, action) => {
+        if (!tagname) {
+            return;
+        }
+        const status = document.getElementById(`${selectionId}-announcer`);
+        if (!status) {
+            return;
+        }
+        status.textContent = await str.get_string(action, 'core', tagname);
+        // Remove the status message after 4 seconds to prevent screen readers from announcing it.
+        setTimeout(() => {
+            status.textContent = '';
+        }, 4000);
+    };
     return {
         // Public variables and functions.
         enhanceField: enhanceField,

Proyectos de Subversion Moodle

(root)/lib/amd/src/form-autocomplete.js – Rev 1 → 1441