diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png index 7f20b39e92..6ff63d5d1d 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67986068c453ec5534fd2138bd3974e43a6b837e2603416495be0e48679a66d6 -size 17441 +oid sha256:47df53d9a4630fa991d39f9420d0920c814cbf2b78891da45b678b1f45452b04 +size 17486 diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 30cec1c303..67c8d906a9 100644 --- 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 index 82c3f26777..95f1943a82 100644 --- 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 = `
  • ${message}
  • `; @@ -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) {