Fix/2736 error container in pattern marked as hidden but has a focusa…

…ble element (#2801) * remove aria-hidden class * remove div when there are no results or too many results * remove aria-hidden from warning element * remove aria-hidden from warning element * fix screen reader repitition issue * fix failing visual test * remove list and results element whenever there is an error * update test * update test * Update src/components/autosuggest/autosuggest.ui.js Co-authored-by: rmccar <[email protected]> * Update src/components/autosuggest/autosuggest.spec.js Co-authored-by: rmccar <[email protected]> * revert changes * revert changes --------- Co-authored-by: rmccar <[email protected]>
ONSdigital · Sep 25, 2023 · b9c7d1e · b9c7d1e
1 parent 511c252
commit b9c7d1e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/...nents_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png b/...nents_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js
@@ -597,12 +597,20 @@ describe('script: autosuggest', () => {
       });
 
       it('shows the API error message', async () => {
-        const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length);
-        expect(listItemCount).toBe(1);
+        const resultsItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length);
+        expect(resultsItemCount).toBe(1);
         const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent);
         expect(warningText.trim()).toBe('!Sorry, there is a problem.');
       });
 
+      it('the list and results element should be removed from the page', async () => {
+        const hasListBox = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-js-autosuggest-listbox'));
+        const hasResultsTitle = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-autosuggest__results-title'));
+
+        expect(hasListBox).toBe(false);
+        expect(hasResultsTitle).toBe(false);
+      });
+
       it('the input should be disabled', async () => {
         const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', (node) => node.hasAttribute('disabled'));
         expect(hasDisabledAttribute).toBe(true);

diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js
@@ -43,6 +43,7 @@ export default class AutosuggestUI {
     this.input = context.querySelector(`.${baseClass}-input`);
     this.resultsContainer = context.querySelector(`.${baseClass}-results`);
     this.listbox = this.resultsContainer.querySelector(`.${baseClass}-listbox`);
+    this.resultsTitleContainer = this.resultsContainer.querySelector(`.ons-autosuggest__results-title`);
     this.instructions = context.querySelector(`.${baseClass}-instructions`);
     this.ariaStatus = context.querySelector(`.${baseClass}-aria-status`);
     this.form = context.closest('form');
@@ -376,7 +377,10 @@ export default class AutosuggestUI {
 
       if (this.resultLimit === 100 && this.foundResults > this.resultLimit) {
         let message = this.tooManyResults.replace('{n}', this.foundResults);
-        this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild);
+        this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild);
+        this.ariaStatus.setAttribute('aria-hidden', 'true');
+        this.listbox.remove();
+        this.resultsTitleContainer.remove();
       }
 
       this.setHighlightedResult(null);
@@ -414,9 +418,11 @@ export default class AutosuggestUI {
       this.input.value = '';
       this.label.classList.add('ons-u-lighter');
 
-      this.listbox.innerHTML = '';
-      this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild);
+      this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild);
+      this.ariaStatus.setAttribute('aria-hidden', 'true');
       this.setAriaStatus(ariaMessage);
+      this.listbox.remove();
+      this.resultsTitleContainer.remove();
     } else {
       message = this.noResults;
       this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
@@ -497,13 +503,12 @@ export default class AutosuggestUI {
   }
 
   createWarningElement(content) {
-    const warningListElement = document.createElement('li');
+    const warningContainer = document.createElement('div');
     const warningElement = document.createElement('div');
     const warningSpanElement = document.createElement('span');
     const warningBodyElement = document.createElement('div');
 
-    warningListElement.setAttribute('aria-hidden', 'true');
-    warningListElement.className = 'ons-autosuggest__warning';
+    warningContainer.className = 'ons-autosuggest__warning';
     warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 
     warningSpanElement.className = 'ons-panel__icon';
@@ -515,9 +520,9 @@ export default class AutosuggestUI {
 
     warningElement.appendChild(warningSpanElement);
     warningElement.appendChild(warningBodyElement);
-    warningListElement.appendChild(warningElement);
+    warningContainer.appendChild(warningElement);
 
-    return warningListElement;
+    return warningContainer;
   }
 
   storeExistingSelections(value) {