Merge branch 'feature/LF2976/search-progress-announcer' into 'master'

Feature/lf2976/search progress announcer

See merge request lfor/autocomplete-lhc!169

CHANGELOG.md

@@ -3,6 +3,10 @@
 This log documents significant changes for each release.  This project follows
 [Semantic Versioning](http://semver.org/).
 
+## [19.2.4] - 2024-04-17
+### Added
+- Announce that the search is in progress if it takes more than 1.5 seconds.
+
 ## [19.2.3] - 2024-04-04
 ### Changed
 - ajax() takes relative url path, mimicking jQuery ajax().

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "autocomplete-lhc",
-  "version": "19.2.3",
+  "version": "19.2.4",
   "main": [
     "source/auto_completion.css",
     "source/polyfill.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autocomplete-lhc",
-  "version": "19.2.3",
+  "version": "19.2.4",
   "description": "",
   "main": "source/index.js",
   "config": {

source/autoCompSearch.js

@@ -446,7 +446,7 @@
           }
           if (!results) { // i.e. if it wasn't cached
             if (this.showLoadingIndicator_)
-              this.progressElement?.classList.add('show');
+              this.showProgressBar();
             // Run the search
             if (searchFn)
               this.useSearchFn(searchStr, Def.Autocompleter.Search.EXPANDED_COUNT);
@@ -849,8 +849,10 @@
         if (this.lastAjaxRequest_ === resultData) {
           this.lastAjaxRequest_ = null;
         }
-        if (this.showLoadingIndicator_)
+        if (this.showLoadingIndicator_) {
           this.progressElement?.classList.remove('show');
+          clearTimeout(this.loadingAnnouncerTimeout);
+        }
         const usedSearchFn = !!resultData.results;
         if (resultData.status === 200 || usedSearchFn) { // 200 is the "OK" status
           if (usedSearchFn) {
@@ -940,6 +942,10 @@
               $('moreResults').style.display ='none';
             }
 
+            if (this.showLoadingIndicator_ && this.loadingAnnounced && totalCount === 0) {
+              Def.Autocompleter.screenReaderLog("No list items matched the field's value.");
+            }
+
             this.searchInProgress = false;
 
             // If the number of list items is too large, use the split area, otherwise
@@ -1169,7 +1175,7 @@
           }
           if (!results) {
             if (this.showLoadingIndicator_)
-              this.progressElement?.classList.add('show');
+              this.showProgressBar();
             if (this.search)
               this.useSearchFn(fieldVal, Def.Autocompleter.Base.MAX_ITEMS_BELOW_FIELD);
             else
@@ -1179,6 +1185,21 @@
       },
 
 
+      /**
+       * Shows the loading indicator.
+       * Creates a timeout to announce the loading if the search doesn't finish in 1.5 seconds.
+       */
+      showProgressBar: function() {
+        this.progressElement?.classList.add('show');
+        clearTimeout(this.loadingAnnouncerTimeout);
+        this.loadingAnnounced = false;
+        this.loadingAnnouncerTimeout = setTimeout(() => {
+          Def.Autocompleter.screenReaderLog('A list is being loaded for the field.');
+          this.loadingAnnounced = true;
+        }, 1500);
+      },
+
+
       /**
        *  Starts an AJAX call to find suggestions for a field value that does
        *  not match the list.

test/cypress/integration/searchList.cy.js

@@ -359,10 +359,24 @@ describe('search lists', function() {
       cy.get(po.searchCNESel + ' + progress', {timeout: 300}).should('not.exist');
     });
 
+    it('should remove wrapper element when the destroyed', function() {
+      cy.get('.loading-indicator-container ' + po.alleleSearch).should('exist');
+      cy.get('#dest_allele_search').click();
+      cy.get('.loading-indicator-container ' + po.alleleSearch).should('not.exist');
+      // multi-select search field
+      cy.get('.loading-indicator-container ' + po.multiSearchCWE).should('exist');
+      cy.get('#dest_multi_sel_search_cwe').click();
+      cy.get('.loading-indicator-container ' + po.multiSearchCWE).should('not.exist');
+    });
+
     it('should show loading indicator', function() {
       cy.get(po.alleleSearch).click().type('rs');
       cy.get(po.alleleSearch + ' + progress').should('have.class', 'show');
       cy.get(po.alleleSearch + ' + progress').should('not.have.class', 'show');
+      cy.window().then(win => {
+        const log = win.Def.Autocompleter.screenReaderLog_;
+        assert(log.logElement_.textContent.indexOf('A list is being loaded for the field') >= 0, 'announcing loading in progress');
+      });
       // multi-select search field
       cy.get(po.multiSearchCWE).click().type('rs');
       cy.get(po.multiSearchCWE + ' + progress').should('have.class', 'show');
@@ -381,15 +395,5 @@ describe('search lists', function() {
       // A shorter timeout than the ajax delay to make sure the <progress> element goes away before the ajax request finishes.
       cy.get(po.alleleSearch + ' + progress', {timeout: 300}).should('not.have.class', 'show');
     });
-
-    it('should remove wrapper element when the destroyed', function() {
-      cy.get('.loading-indicator-container ' + po.alleleSearch).should('exist');
-      cy.get('#dest_allele_search').click();
-      cy.get('.loading-indicator-container ' + po.alleleSearch).should('not.exist');
-      // multi-select search field
-      cy.get('.loading-indicator-container ' + po.multiSearchCWE).should('exist');
-      cy.get('#dest_multi_sel_search_cwe').click();
-      cy.get('.loading-indicator-container ' + po.multiSearchCWE).should('not.exist');
-    });
   });
 });

test/pages/autocomp_atr.html

@@ -268,6 +268,7 @@ <h2>FHIR</h2>
 
 
    <button class="rounded" id="fe_save" name="fe[save]" type="submit" value="1"><span>Save</span></button>
+   <button id="increase_ajax_delay" type="button" onclick="window.Def.jqueryLite.ajaxFactory(5000);">Increase delay in mock ajax to 5 seconds</button>
 
 </form>
     <br>