From 29d9d4d11fbab9eb58f059d5b16893816db34215 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 4 Sep 2023 23:06:57 +0100 Subject: [PATCH 01/13] remove aria-hidden class --- src/components/autosuggest/_macro.njk | 2 +- src/components/autosuggest/autosuggest.ui.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index 239f29e7c8..a217782425 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -42,7 +42,7 @@
{{ params.instructions }}
-
+ {#
#} {% endset %} {{ onsInput({ "id": params.id, diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js index 82c3f26777..b24f016dfe 100644 --- a/src/components/autosuggest/autosuggest.ui.js +++ b/src/components/autosuggest/autosuggest.ui.js @@ -502,7 +502,8 @@ export default class AutosuggestUI { const warningSpanElement = document.createElement('span'); const warningBodyElement = document.createElement('div'); - warningListElement.setAttribute('aria-hidden', 'true'); + //warningListElement.setAttribute('aria-hidden', 'true'); + warningListElement.setAttribute('role', 'status'); warningListElement.className = 'ons-autosuggest__warning'; warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel'; From 39c346de68f2639354a2fc30ba1484eac76aac86 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 8 Sep 2023 14:06:12 +0100 Subject: [PATCH 02/13] remove div when there are no results or too many results --- src/components/autosuggest/_macro.njk | 4 +++- src/components/autosuggest/autosuggest.ui.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index a217782425..57ebbeead1 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -42,7 +42,9 @@
{{ params.instructions }}
- {#
#} + {% if not params.tooManyResults and params.noResults %} +
+ {% endif %} {% endset %} {{ onsInput({ "id": params.id, diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js index b24f016dfe..f7d23de5d3 100644 --- a/src/components/autosuggest/autosuggest.ui.js +++ b/src/components/autosuggest/autosuggest.ui.js @@ -503,7 +503,7 @@ export default class AutosuggestUI { const warningBodyElement = document.createElement('div'); //warningListElement.setAttribute('aria-hidden', 'true'); - warningListElement.setAttribute('role', 'status'); + //warningListElement.setAttribute('role', 'status'); warningListElement.className = 'ons-autosuggest__warning'; warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel'; From 9c30fa6026f79d603945576e90ff139fed5ba732 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 11 Sep 2023 10:22:59 +0100 Subject: [PATCH 03/13] remove aria-hidden from warning element --- src/components/autosuggest/_macro.njk | 4 +--- src/components/autosuggest/autosuggest.ui.js | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index 57ebbeead1..13f54029af 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -42,9 +42,7 @@
    {{ params.instructions }}
    - {% if not params.tooManyResults and params.noResults %} -
    - {% endif %} +
    {% endset %} {{ onsInput({ "id": params.id, diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js index f7d23de5d3..4eceb88f05 100644 --- a/src/components/autosuggest/autosuggest.ui.js +++ b/src/components/autosuggest/autosuggest.ui.js @@ -377,6 +377,7 @@ 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.ariaStatus.setAttribute('aria-hidden', 'true'); } this.setHighlightedResult(null); @@ -416,6 +417,7 @@ export default class AutosuggestUI { this.listbox.innerHTML = ''; this.listbox.insertBefore(this.createWarningElement(message), this.listbox.firstChild); + this.ariaStatus.setAttribute('aria-hidden', 'true'); this.setAriaStatus(ariaMessage); } else { message = this.noResults; @@ -502,8 +504,6 @@ export default class AutosuggestUI { const warningSpanElement = document.createElement('span'); const warningBodyElement = document.createElement('div'); - //warningListElement.setAttribute('aria-hidden', 'true'); - //warningListElement.setAttribute('role', 'status'); warningListElement.className = 'ons-autosuggest__warning'; warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel'; From ef0017092b5007201776fe29107df6aa74dfd60a Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 11 Sep 2023 10:45:30 +0100 Subject: [PATCH 04/13] remove aria-hidden from warning element --- src/components/autosuggest/_macro.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index 13f54029af..239f29e7c8 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -42,7 +42,7 @@
      {{ params.instructions }}
      -
      +
      {% endset %} {{ onsInput({ "id": params.id, From caa0f369a09a07296cdf33c4d39e8e74fccdbcd7 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 15 Sep 2023 10:11:50 +0100 Subject: [PATCH 05/13] fix screen reader repitition issue --- ...s-input_example-address-input_0_document_0_desktop.png | 4 ++-- ...ss-input_example-address-input_0_document_1_tablet.png | 4 ++-- ...ss-input_example-address-input_0_document_2_mobile.png | 4 ++-- ...le-panel-with-timeout-warning_0_document_0_desktop.png | 4 ++-- ...le-address-input-non-editable_0_document_0_desktop.png | 4 ++-- ...ple-address-input-non-editable_0_document_1_tablet.png | 4 ++-- ...ple-address-input-non-editable_0_document_2_mobile.png | 4 ++-- ...ddresses_example-address-input_0_document_2_mobile.png | 4 ++-- src/components/autosuggest/autosuggest.spec.js | 8 ++++---- src/components/autosuggest/autosuggest.ui.js | 6 +++--- 10 files changed, 23 insertions(+), 23 deletions(-) diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png index 86be4d91d2..1239b2aeca 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5057aa96a495cbe5671b7f37e01ec74a0b23e5ec5dfccfb52cd26a0a53d75608 -size 25824 +oid sha256:88dbce45488457b7f9b75f61ebc75b376079f6ced6371a139590fb23fa369e72 +size 25831 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png index 60a1a9b5e5..975a57ed45 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8a889c4837dff30715e164ef94f9b25315d8e6475758358f65a889b287f46ae5 -size 20665 +oid sha256:8ccafba7502cc866b1ef558f111a6440291ebc915bbef669461b9cd336b02747 +size 20668 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png index 87b45175d7..d246efc4fd 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:38467130e0fca3e26f84ce9c32dcebe6c46a17d9d049272b3156785133358287 -size 20442 +oid sha256:0c75b296df3727eca38db092eb677d12446d570ef6ad5b5a3c6f6a047ee31f95 +size 20447 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/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png index 48eb7db495..1492ec08b4 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f39dff741e5e3b4da167eb03c27686f5ff16e2d1f97f6c0af4ada296ed1f579c -size 46541 +oid sha256:1e1610ec7161bf436f51e3471e44b778c458f4c2395cd711008d23fad1a0a463 +size 46545 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png index 07a4083a70..3fb432f937 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1c19d8d83f563127d21c8110d1e9c81bd054106509b6aadb437c46c3d3f9d5ed -size 39463 +oid sha256:1b1b9b29c041d9e0d55b492ff5cced21d54272a5c644203e77b1e521c77395aa +size 39473 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png index 123a05b369..0e0b0eabcc 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1efa9db98ffc0dd256c2897512bdd24fecc7a69e62f1ee0912f0129764cdc197 -size 39128 +oid sha256:99982d1ba0ef06175ef096420be824c088b91a128a7c4f1ac8db58f94966a5d5 +size 39137 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png index f7cac348fa..591247b157 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:aa8b5636ec14ffaf38da5d7b5227bd5b9be6990939c9f0c8285c9fe07ae0d21b -size 27157 +oid sha256:c7b329b95b01e4c54dcdbea594950334ee60a65f7c39270fd13031cc5d402425 +size 25756 diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 30cec1c303..1fc9e38d5e 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -566,8 +566,8 @@ describe('script: autosuggest', () => { }); it('shows the type more message', async () => { - const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length); - expect(listItemCount).toBe(1); + const listItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length); + expect(listItemCount).toBe(2); const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.innerText); expect(noResultsText.trim()).toBe('Continue entering to get suggestions'); }); @@ -597,8 +597,8 @@ 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 listItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length); + expect(listItemCount).toBe(3); const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent); expect(warningText.trim()).toBe('!Sorry, there is a problem.'); }); diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js index 4eceb88f05..d688f08860 100644 --- a/src/components/autosuggest/autosuggest.ui.js +++ b/src/components/autosuggest/autosuggest.ui.js @@ -376,7 +376,7 @@ 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'); } @@ -416,7 +416,7 @@ export default class AutosuggestUI { 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); } else { @@ -499,7 +499,7 @@ export default class AutosuggestUI { } createWarningElement(content) { - const warningListElement = document.createElement('li'); + const warningListElement = document.createElement('div'); const warningElement = document.createElement('div'); const warningSpanElement = document.createElement('span'); const warningBodyElement = document.createElement('div'); From 653cac7c420e44d0c9131b675933f096c22e6eda Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 15 Sep 2023 11:43:37 +0100 Subject: [PATCH 06/13] fix failing visual test --- ...xample-panel-with-timeout-warning_0_document_0_desktop.png | 4 ++-- ...ns_addresses_example-address-input_0_document_2_mobile.png | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 6ff63d5d1d..7f20b39e92 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:47df53d9a4630fa991d39f9420d0920c814cbf2b78891da45b678b1f45452b04 -size 17486 +oid sha256:67986068c453ec5534fd2138bd3974e43a6b837e2603416495be0e48679a66d6 +size 17441 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png index 591247b157..f7cac348fa 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c7b329b95b01e4c54dcdbea594950334ee60a65f7c39270fd13031cc5d402425 -size 25756 +oid sha256:aa8b5636ec14ffaf38da5d7b5227bd5b9be6990939c9f0c8285c9fe07ae0d21b +size 27157 From 45d019b8da6bd4967ee43a6e899f1a5b4ae61227 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 15 Sep 2023 16:36:54 +0100 Subject: [PATCH 07/13] remove list and results element whenever there is an error --- ...t_example-address-input_0_document_0_desktop.png | 4 ++-- ...ut_example-address-input_0_document_1_tablet.png | 4 ++-- ...ut_example-address-input_0_document_2_mobile.png | 4 ++-- ...el-with-timeout-warning_0_document_0_desktop.png | 4 ++-- ...ress-input-non-editable_0_document_0_desktop.png | 4 ++-- ...dress-input-non-editable_0_document_1_tablet.png | 4 ++-- ...dress-input-non-editable_0_document_2_mobile.png | 4 ++-- src/components/autosuggest/autosuggest.spec.js | 10 +++++++++- src/components/autosuggest/autosuggest.ui.js | 13 +++++++++---- 9 files changed, 32 insertions(+), 19 deletions(-) diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png index 1239b2aeca..86be4d91d2 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:88dbce45488457b7f9b75f61ebc75b376079f6ced6371a139590fb23fa369e72 -size 25831 +oid sha256:5057aa96a495cbe5671b7f37e01ec74a0b23e5ec5dfccfb52cd26a0a53d75608 +size 25824 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png index 975a57ed45..60a1a9b5e5 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8ccafba7502cc866b1ef558f111a6440291ebc915bbef669461b9cd336b02747 -size 20668 +oid sha256:8a889c4837dff30715e164ef94f9b25315d8e6475758358f65a889b287f46ae5 +size 20665 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png index d246efc4fd..87b45175d7 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0c75b296df3727eca38db092eb677d12446d570ef6ad5b5a3c6f6a047ee31f95 -size 20447 +oid sha256:38467130e0fca3e26f84ce9c32dcebe6c46a17d9d049272b3156785133358287 +size 20442 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/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png index 1492ec08b4..48eb7db495 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1e1610ec7161bf436f51e3471e44b778c458f4c2395cd711008d23fad1a0a463 -size 46545 +oid sha256:f39dff741e5e3b4da167eb03c27686f5ff16e2d1f97f6c0af4ada296ed1f579c +size 46541 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png index 3fb432f937..07a4083a70 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1b1b9b29c041d9e0d55b492ff5cced21d54272a5c644203e77b1e521c77395aa -size 39473 +oid sha256:1c19d8d83f563127d21c8110d1e9c81bd054106509b6aadb437c46c3d3f9d5ed +size 39463 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png index 0e0b0eabcc..123a05b369 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:99982d1ba0ef06175ef096420be824c088b91a128a7c4f1ac8db58f94966a5d5 -size 39137 +oid sha256:1efa9db98ffc0dd256c2897512bdd24fecc7a69e62f1ee0912f0129764cdc197 +size 39128 diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 1fc9e38d5e..23cbb0f5ef 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -598,11 +598,19 @@ describe('script: autosuggest', () => { it('shows the API error message', async () => { const listItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length); - expect(listItemCount).toBe(3); + expect(listItemCount).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 listboxCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length); + const resultsTitleCount = await page.$$eval('.ons-autosuggest__results-title > *', (nodes) => nodes.length); + + expect(listboxCount).toBe(0); + expect(resultsTitleCount).toBe(0); + }); + 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 d688f08860..18a7decd69 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'); @@ -378,6 +379,8 @@ export default class AutosuggestUI { let message = this.tooManyResults.replace('{n}', this.foundResults); this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild); this.ariaStatus.setAttribute('aria-hidden', 'true'); + this.listbox.remove(); + this.resultsTitleContainer.remove(); } this.setHighlightedResult(null); @@ -419,6 +422,8 @@ export default class AutosuggestUI { 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}
      • `; @@ -499,12 +504,12 @@ export default class AutosuggestUI { } createWarningElement(content) { - const warningListElement = document.createElement('div'); + const warningDivElement = document.createElement('div'); const warningElement = document.createElement('div'); const warningSpanElement = document.createElement('span'); const warningBodyElement = document.createElement('div'); - warningListElement.className = 'ons-autosuggest__warning'; + warningDivElement.className = 'ons-autosuggest__warning'; warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel'; warningSpanElement.className = 'ons-panel__icon'; @@ -516,9 +521,9 @@ export default class AutosuggestUI { warningElement.appendChild(warningSpanElement); warningElement.appendChild(warningBodyElement); - warningListElement.appendChild(warningElement); + warningDivElement.appendChild(warningElement); - return warningListElement; + return warningDivElement; } storeExistingSelections(value) { From 8765d66ce998abb7ac4ae11b482eecbafddee500 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 15 Sep 2023 16:42:18 +0100 Subject: [PATCH 08/13] update test --- src/components/autosuggest/autosuggest.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 23cbb0f5ef..893a3075f2 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -597,8 +597,8 @@ describe('script: autosuggest', () => { }); it('shows the API error message', async () => { - const listItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (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.'); }); From ccac132e8d5e1fbb6b263138486a3e7fde3a20fc Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 18 Sep 2023 15:18:35 +0100 Subject: [PATCH 09/13] update test --- src/components/autosuggest/autosuggest.spec.js | 12 ++++++------ src/components/autosuggest/autosuggest.ui.js | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 893a3075f2..409e21e169 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -566,8 +566,8 @@ describe('script: autosuggest', () => { }); it('shows the type more message', async () => { - const listItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length); - expect(listItemCount).toBe(2); + const resultsContainer = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length); + expect(resultsContainer).toBe(2); const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.innerText); expect(noResultsText.trim()).toBe('Continue entering to get suggestions'); }); @@ -604,11 +604,11 @@ describe('script: autosuggest', () => { }); it('the list and results element should be removed from the page', async () => { - const listboxCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length); - const resultsTitleCount = await page.$$eval('.ons-autosuggest__results-title > *', (nodes) => nodes.length); + 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(listboxCount).toBe(0); - expect(resultsTitleCount).toBe(0); + expect(hasListBox).toBe(false); + expect(hasResultsTitle).toBe(false); }); it('the input should be disabled', async () => { diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js index 18a7decd69..a66ae0bcf4 100644 --- a/src/components/autosuggest/autosuggest.ui.js +++ b/src/components/autosuggest/autosuggest.ui.js @@ -504,12 +504,12 @@ export default class AutosuggestUI { } createWarningElement(content) { - const warningDivElement = document.createElement('div'); + const warningContainer = document.createElement('div'); const warningElement = document.createElement('div'); const warningSpanElement = document.createElement('span'); const warningBodyElement = document.createElement('div'); - warningDivElement.className = 'ons-autosuggest__warning'; + warningContainer.className = 'ons-autosuggest__warning'; warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel'; warningSpanElement.className = 'ons-panel__icon'; @@ -521,9 +521,9 @@ export default class AutosuggestUI { warningElement.appendChild(warningSpanElement); warningElement.appendChild(warningBodyElement); - warningDivElement.appendChild(warningElement); + warningContainer.appendChild(warningElement); - return warningDivElement; + return warningContainer; } storeExistingSelections(value) { From b93b671cc45c38c52ed743a4c347c2dee84450b1 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 19 Sep 2023 16:05:55 +0100 Subject: [PATCH 10/13] Update src/components/autosuggest/autosuggest.ui.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/autosuggest.ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js index a66ae0bcf4..c8bfb8310c 100644 --- a/src/components/autosuggest/autosuggest.ui.js +++ b/src/components/autosuggest/autosuggest.ui.js @@ -43,7 +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.resultsTitleContainer = this.resultsContainer.querySelector(`.${baseClass}__results-title`); this.instructions = context.querySelector(`.${baseClass}-instructions`); this.ariaStatus = context.querySelector(`.${baseClass}-aria-status`); this.form = context.closest('form'); From 1cfb9de821e81bd92b9bff9a918bcdde124bb0d6 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 19 Sep 2023 16:06:40 +0100 Subject: [PATCH 11/13] Update src/components/autosuggest/autosuggest.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/autosuggest.spec.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 409e21e169..f585ee74e0 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -603,12 +603,9 @@ describe('script: autosuggest', () => { 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 results list and title elements should be removed from the page', async () => { + expect($('.ons-js-autosuggest-listbox').length).toBe(0); + expect($('.ons-autosuggest__results-title').length).toBe(0); }); it('the input should be disabled', async () => { From 2fc7a1f600c0caa5c681b8abdb6f772bbac1b927 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Tue, 19 Sep 2023 22:33:41 +0100 Subject: [PATCH 12/13] revert changes --- src/components/autosuggest/autosuggest.spec.js | 9 ++++++--- src/components/autosuggest/autosuggest.ui.js | 3 +-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index f585ee74e0..409e21e169 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -603,9 +603,12 @@ describe('script: autosuggest', () => { expect(warningText.trim()).toBe('!Sorry, there is a problem.'); }); - it('the results list and title elements should be removed from the page', async () => { - expect($('.ons-js-autosuggest-listbox').length).toBe(0); - expect($('.ons-autosuggest__results-title').length).toBe(0); + 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 () => { diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js index c8bfb8310c..95f1943a82 100644 --- a/src/components/autosuggest/autosuggest.ui.js +++ b/src/components/autosuggest/autosuggest.ui.js @@ -43,7 +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(`.${baseClass}__results-title`); + 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'); @@ -418,7 +418,6 @@ export default class AutosuggestUI { this.input.value = ''; this.label.classList.add('ons-u-lighter'); - this.listbox.innerHTML = ''; this.resultsContainer.insertBefore(this.createWarningElement(message), this.resultsContainer.firstChild); this.ariaStatus.setAttribute('aria-hidden', 'true'); this.setAriaStatus(ariaMessage); From 1f4db2cdc11f93e6b1507e1c163bdb4db35f13c1 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 20 Sep 2023 09:18:55 +0100 Subject: [PATCH 13/13] revert changes --- src/components/autosuggest/autosuggest.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 409e21e169..67c8d906a9 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -566,8 +566,8 @@ describe('script: autosuggest', () => { }); it('shows the type more message', async () => { - const resultsContainer = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length); - expect(resultsContainer).toBe(2); + const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length); + expect(listItemCount).toBe(1); const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.innerText); expect(noResultsText.trim()).toBe('Continue entering to get suggestions'); });