From a32a1a6eafc49546c7aa10d9909c47297178456d Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Mon, 21 Dec 2020 14:23:43 -0800 Subject: [PATCH 1/6] issue 1619: Remove 'blur' event on combobox --- examples/combobox/js/combobox-autocomplete.js | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/examples/combobox/js/combobox-autocomplete.js b/examples/combobox/js/combobox-autocomplete.js index accda175b9..16f23d5f1c 100644 --- a/examples/combobox/js/combobox-autocomplete.js +++ b/examples/combobox/js/combobox-autocomplete.js @@ -57,7 +57,12 @@ class ComboboxAutocomplete { 'focus', this.onComboboxFocus.bind(this) ); - this.comboboxNode.addEventListener('blur', this.onComboboxBlur.bind(this)); + + document.body.addEventListener( + 'mouseup', + this.onBackgroundMouseUp.bind(this), + true + ); // initialize pop up menu @@ -507,11 +512,16 @@ class ComboboxAutocomplete { this.setCurrentOptionStyle(null); } - onComboboxBlur() { - this.comboboxHasVisualFocus = false; - this.setCurrentOptionStyle(null); - this.removeVisualFocusAll(); - setTimeout(this.close.bind(this, false), 300); + onBackgroundMouseUp(event) { + if ( + !this.comboboxNode.contains(event.target) && + !this.listboxNode.contains(event.target) + ) { + this.comboboxHasVisualFocus = false; + this.setCurrentOptionStyle(null); + this.removeVisualFocusAll(); + setTimeout(this.close.bind(this, true), 300); + } } onButtonClick() { @@ -564,6 +574,5 @@ window.addEventListener('load', function () { var buttonNode = combobox.querySelector('button'); var listboxNode = combobox.querySelector('[role="listbox"]'); var cba = new ComboboxAutocomplete(comboboxNode, buttonNode, listboxNode); - cba.init(); } }); From 733c67f19fbf5d5fb3eb2f68a863f805800e6d6d Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Mon, 21 Dec 2020 16:08:27 -0800 Subject: [PATCH 2/6] issue 1619: add tests --- test/tests/combobox_autocomplete-list.js | 87 ++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/test/tests/combobox_autocomplete-list.js b/test/tests/combobox_autocomplete-list.js index c79d5273d2..7cd1535ab0 100644 --- a/test/tests/combobox_autocomplete-list.js +++ b/test/tests/combobox_autocomplete-list.js @@ -14,6 +14,7 @@ const ex = { optionsSelector: '#ex1 [role="option"]', buttonSelector: '#ex1 button', numAOptions: 5, + exampleHeadingSelector: '.example-header', }; const waitForFocusChange = async (t, textboxSelector, originalFocus) => { @@ -850,6 +851,92 @@ ariaTest( } ); +ariaTest( + 'Clicking outside of textbox and listbox when focus is on listbox closes listbox', + exampleFile, + 'test-additional-behavior', + async (t) => { + // Send key "a" to open listbox then key "ARROW_DOWN" to put the focus on the listbox + await t.context.session + .findElement(By.css(ex.textboxSelector)) + .sendKeys('a', Key.ARROW_DOWN); + + // click outside the listbox + await t.context.session + .findElement(By.css(ex.exampleHeadingSelector)) + .click(); + + await t.context.session.wait( + async function () { + let listbox = await t.context.session.findElement( + By.css(ex.listboxSelector) + ); + return !(await listbox.isDisplayed()); + }, + t.context.waitTime, + 'Error waiting for listbox to close after outside click' + ); + + // Confirm the listbox is closed and the textboxed is cleared + await assertAttributeValues( + t, + ex.textboxSelector, + 'aria-expanded', + 'false' + ); + t.is( + await t.context.session + .findElement(By.css(ex.textboxSelector)) + .getAttribute('value'), + 'a', + 'Click outside of a textbox will close the testbox without selecting the highlighted value' + ); + } +); + +ariaTest( + 'Clicking outside of textbox and listbox when focus is on textbox closes listbox', + exampleFile, + 'test-additional-behavior', + async (t) => { + // Send key "a" to open listbox to put focus on textbox + await t.context.session + .findElement(By.css(ex.textboxSelector)) + .sendKeys('a'); + + // click outside the listbox + await t.context.session + .findElement(By.css(ex.exampleHeadingSelector)) + .click(); + + await t.context.session.wait( + async function () { + let listbox = await t.context.session.findElement( + By.css(ex.listboxSelector) + ); + return !(await listbox.isDisplayed()); + }, + t.context.waitTime, + 'Error waiting for listbox to close after outside click' + ); + + // Confirm the listbox is closed and the textboxed is cleared + await assertAttributeValues( + t, + ex.textboxSelector, + 'aria-expanded', + 'false' + ); + t.is( + await t.context.session + .findElement(By.css(ex.textboxSelector)) + .getAttribute('value'), + 'a', + 'Click outside of a textbox will close the testbox without selecting the highlighted value' + ); + } +); + ariaTest( 'left arrow from focus on list puts focus on listbox and moves cursor right', exampleFile, From acc75770813fa1d762ef07c2418b4dd53f16c9da Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Tue, 12 Jan 2021 14:03:33 -0800 Subject: [PATCH 3/6] Satisfy linter --- examples/combobox/js/combobox-autocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/combobox/js/combobox-autocomplete.js b/examples/combobox/js/combobox-autocomplete.js index 16f23d5f1c..32c0d20807 100644 --- a/examples/combobox/js/combobox-autocomplete.js +++ b/examples/combobox/js/combobox-autocomplete.js @@ -573,6 +573,6 @@ window.addEventListener('load', function () { var comboboxNode = combobox.querySelector('input'); var buttonNode = combobox.querySelector('button'); var listboxNode = combobox.querySelector('[role="listbox"]'); - var cba = new ComboboxAutocomplete(comboboxNode, buttonNode, listboxNode); + new ComboboxAutocomplete(comboboxNode, buttonNode, listboxNode); } }); From f7c6f5caebaefe6f4c5ded0399ff2101694208b3 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 27 Jan 2021 15:36:50 -0600 Subject: [PATCH 4/6] added the button to the list of mousedown elements to be tested --- examples/combobox/js/combobox-autocomplete.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/combobox/js/combobox-autocomplete.js b/examples/combobox/js/combobox-autocomplete.js index 32c0d20807..27f1c10385 100644 --- a/examples/combobox/js/combobox-autocomplete.js +++ b/examples/combobox/js/combobox-autocomplete.js @@ -515,7 +515,8 @@ class ComboboxAutocomplete { onBackgroundMouseUp(event) { if ( !this.comboboxNode.contains(event.target) && - !this.listboxNode.contains(event.target) + !this.listboxNode.contains(event.target) && + !this.buttonNode.contains(event.target) ) { this.comboboxHasVisualFocus = false; this.setCurrentOptionStyle(null); From c44d05ccccca0165464e937f3580a18d9f5c1140 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 27 Jan 2021 15:43:06 -0600 Subject: [PATCH 5/6] fixed spelling issues with test file --- test/tests/combobox_autocomplete-list.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/tests/combobox_autocomplete-list.js b/test/tests/combobox_autocomplete-list.js index 7cd1535ab0..e082f16601 100644 --- a/test/tests/combobox_autocomplete-list.js +++ b/test/tests/combobox_autocomplete-list.js @@ -833,7 +833,7 @@ ariaTest( .findElement(By.css(ex.textboxSelector)) .sendKeys('a', Key.ARROW_DOWN, Key.ESCAPE); - // Confirm the listbox is closed and the textboxed is cleared + // Confirm the listbox is closed and the textbox is cleared await assertAttributeValues( t, @@ -877,7 +877,7 @@ ariaTest( 'Error waiting for listbox to close after outside click' ); - // Confirm the listbox is closed and the textboxed is cleared + // Confirm the listbox is closed and the textbox is cleared await assertAttributeValues( t, ex.textboxSelector, @@ -920,7 +920,7 @@ ariaTest( 'Error waiting for listbox to close after outside click' ); - // Confirm the listbox is closed and the textboxed is cleared + // Confirm the listbox is closed and the textbox is cleared await assertAttributeValues( t, ex.textboxSelector, From c169ff541bf4a37894da4fb23cff43f660918644 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 27 Jan 2021 15:47:15 -0600 Subject: [PATCH 6/6] fixed spelling issues with test file --- test/tests/combobox_autocomplete-list.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/tests/combobox_autocomplete-list.js b/test/tests/combobox_autocomplete-list.js index e082f16601..ad0d00be10 100644 --- a/test/tests/combobox_autocomplete-list.js +++ b/test/tests/combobox_autocomplete-list.js @@ -889,7 +889,7 @@ ariaTest( .findElement(By.css(ex.textboxSelector)) .getAttribute('value'), 'a', - 'Click outside of a textbox will close the testbox without selecting the highlighted value' + 'Click outside of a textbox will close the textbox without selecting the highlighted value' ); } ); @@ -932,7 +932,7 @@ ariaTest( .findElement(By.css(ex.textboxSelector)) .getAttribute('value'), 'a', - 'Click outside of a textbox will close the testbox without selecting the highlighted value' + 'Click outside of a textbox will close the textbox without selecting the highlighted value' ); } );