WebSVN – Moodle – Diff – /lib/amd/src/comboboxsearch/search_combobox.js

 //
 // You should have received a copy of the GNU General Public License
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+import $ from 'jquery';
-import $ from 'jquery';
+import Dropdown from 'theme_boost/bootstrap/dropdown';
 import {debounce} from 'core/utils';
+import Pending from 'core/pending';
+import {get_string as getString} from 'core/str';
 import Pending from 'core/pending';
 /**
  * The class that manages the state of the search within a combobox.
 export default class {
     // Define our standard lookups.
     selectors = {
         component: this.componentSelector(),
-        toggle: '[data-toggle="dropdown"]',
+        toggle: '[data-bs-toggle="dropdown"]',
         instance: '[data-region="instance"]',
         input: '[data-action="search"]',
         clearSearch: '[data-action="clearsearch"]',
         dropdown: this.dropdownSelector(),
+     *
      * @param {Boolean} on Flag to toggle hiding or showing values.
      */
     toggleDropdown(on = false) {
         if (on) {
-            $(this.toggle).dropdown('show');
+            Dropdown.getOrCreateInstance(this.toggle).show();
         } else {
-            $(this.toggle).dropdown('hide');
+            Dropdown.getOrCreateInstance(this.toggle).hide();
+        }
+    }
     /**
     async filterrenderpipe() {
         this.updateNodes();
         this.setMatchedResults(await this.filterDataset(await this.getDataset()));
         this.filterMatchDataset();
         await this.renderDropdown();
+        await this.updateLiveRegion();
+    }
     /**
      * A combo method to take the matching fields and render out the results.
         await this.filterMatchDataset();
         // Replace the dropdown node contents and show the results.
         await this.renderDropdown();
         // Set the dropdown to open.
         this.toggleDropdown(true);
+        await this.updateLiveRegion();
+    }
     /**
      * The handler for when a user interacts with the component.
      */
     // eslint-disable-next-line no-unused-vars
     changeHandler(e) {
         // Components may override this method to do something.
+    }
+    /**
+     * Updates the screen reader live region with the result count.
+     */
+    async updateLiveRegion() {
+        if (!this.searchDropdown?.id) {
+            return;
+        }
+        const idParts = this.searchDropdown.id.split('-');
+        if (idParts.length < 3) {
+            return;
+        }
+        const [, instanceId, id] = idParts; // E.g. dialog-12-34 only want the last two parts.
+        const liveRegion = document.getElementById(`combobox-status-${instanceId}-${id}`);
+        if (!liveRegion) {
+            return;
+        }
+        const resultCount = this.getMatchedResults().length;
+        let message;
+        if (resultCount === 0) {
+            message = await getString('noitemsfound', 'core');
+        } else if (resultCount === 1) {
+            message = await getString('oneitemfound', 'core');
+        } else {
+            message = await getString('multipleitemsfound', 'core', resultCount);
+        }
+        liveRegion.textContent = message;
+        // Reset previous timeout if it exists.
+        if (this.liveRegionTimeout) {
+            clearTimeout(this.liveRegionTimeout);
+        }
+        // Clear the feedback message after 4 seconds. This is similar to the default timeout of toast messages
+        // before disappearing from view. It is important to clear the message to prevent screen reader users from navigating
+        // into this region and avoiding confusion.
+        this.liveRegionTimeout = setTimeout(() => {
+            liveRegion.textContent = '';
+            this.liveRegionTimeout = null;
+        }, 4000);
+    }
+}

Proyectos de Subversion Moodle

(root)/lib/amd/src/comboboxsearch/search_combobox.js – Rev 1 → 1441