Focus problem when clicking on combobox dropdown button with mouse #1261

carmacleod · 2019-11-13T19:26:27Z

Platform: Windows/Chrome (maybe others)
(part of functional review for PR #1255)

Steps:

Go to Editable Combobox With Both List and Inline Autocomplete Example
(Note that the link to this example will change after the PR is merged)
Focus the combobox, either by tabbing or with mouse
Type 'A' and observe combobox dropdown list of 5 US state names that begin with 'A'
Now, using mouse, click the drop-down button

The list appears and takes focus, but then it immediately loses focus and disappears because focus has been moved to the combobox text input. This looks very strange.

carmacleod · 2019-11-13T19:42:43Z

Same problem in other combobox examples that have the dropdown button:

LaurenceRLewis · 2019-11-13T20:12:59Z

Just wondering

In the table under the ‘Text’ heading with role combobox, the attribute column that includes aria-haspopup is set to “true”. Because this example pops up a listbox, should this not be aria-haspopup=“listbox”?

According to the specification;

’The value of aria-haspopup matches the role of the popup container. ‘

and

’To provide backward compatibility with ARIA 1.0 content, user agents MUST treat an aria-haspopup value of true as equivalent to a value of menu.’

https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup

carmacleod · 2019-11-13T20:28:45Z

Oooh - good catch, @LaurenceRLewis !

That bug is not only in the example writeup, I see it in the example code as well.

The spec also says:

Elements with the role combobox have an implicit aria-haspopup value of listbox.

so maybe the cleanest fix is to delete aria-haspopup from any combobox example that has a listbox popup. Thanks!

zcorpan · 2019-11-13T20:29:00Z

The popup is behaving pretty strangely. It seems like it sometimes gets into a bad state where clicking the button opens and immediately closes again. Also the popup closes after "mouseout", which is annoying.

JAWS-test · 2019-11-14T04:25:59Z

Platform: Windows/Chrome (maybe others)

In Windows: The problem also occurs with IE 11 and Firefox.

mcking65 · 2019-11-14T10:24:45Z

@@LaurenceRLewis wrote:

In the table under the ‘Text’ heading with role combobox, the attribute column that includes aria-haspopup is set to “true”. Because this example pops up a listbox, should this not be aria-haspopup=“listbox”?

According to the specification;

’The value of aria-haspopup matches the role of the popup container. ‘

and

’To provide backward compatibility with ARIA 1.0 content, user agents MUST treat an aria-haspopup value of true as equivalent to a value of menu.’

https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup

Removed unnecessary aria-haspopup declarations and supporting documentation with commit e51ad04.

carmacleod · 2020-02-04T21:53:32Z

I retested steps 2, 3, and 4 (above) using the examples in PR #1276:

This problem will be fixed after PR #1276 is merged.

mcking65 · 2020-02-07T19:46:48Z

Thank you @carmacleod, linking to #1276.

…raction, visual design, and more (pull #1276) Fixes #785, #982, #983, #988, #1261, #1265, and #1268 with the following changes: * updated JavaScript to use single prototype * updated escape key behavior * removed unused files * fixed regression issues for escape key * updated tests for single and double escape key tests * fixed focus bug on enter and removed use of keycode property * fixed bug in opening list and improved property names for visual focus flags * fixed bug in opening list with alt key pressed * fixed bug with enter key not updating aria-expanded * fixed bugs with down arrow * added documentation and tests for ALT Down Arrow * fixed some styling bugs * Use only one SVG image to show listbox state * updated CSS for styling listbox focus * fixed scrolling issue in listbox * adjusted position of svg image button * fixed onclik bug where not selecting options when autocomplete is list or none * updated test for autocomplete, list and none * fixed bug with onclick behavior and documented option filtering as users type * updated documentation about filtering of options * Typo: character -> characters * fixed option filter bug with autocomplete=none * improved description of when listbox opens * use lowercase "the" in sentence * Minor editorial revision to alt+down in textbox keyboard table * udpated test file to check for aria-selected on option when listbox opens * fixed aria-selected tests * add tests for aria-selected to key down tests * Add aria-hidden=false and focusable=false to svg in button * Use fewer descendant combinators in selectors * Call function instead of setting a property on elements * Don't call setValue() when hitting backspace, to avoid moving the cursor to the end * Remove superfluous isPrintableCharacter() call * Remove unused variable textContent * Declare option outside for loop. Also use null instead of false * Set scrollTop once * Declare index variable in the if block * Move isPrintableCharacter to ComboboxAutocomplete.prototype * Add information about the id attribute for all combobox examples; fixes #785 Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com> Co-authored-by: Matt King <a11yThinker@Gmail.com> Co-authored-by: Valerie Young <spectranaut@gmail.com> Co-authored-by: Simon Pieters <zcorpan@gmail.com>

Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more (pull #1276) Fixes #785, #982, #983, #988, #1261, #1265, and #1268 with the following changes: * updated JavaScript to use single prototype * updated escape key behavior * removed unused files * fixed regression issues for escape key * updated tests for single and double escape key tests * fixed focus bug on enter and removed use of keycode property * fixed bug in opening list and improved property names for visual focus flags * fixed bug in opening list with alt key pressed * fixed bug with enter key not updating aria-expanded * fixed bugs with down arrow * added documentation and tests for ALT Down Arrow * fixed some styling bugs * Use only one SVG image to show listbox state * updated CSS for styling listbox focus * fixed scrolling issue in listbox * adjusted position of svg image button * fixed onclik bug where not selecting options when autocomplete is list or none * updated test for autocomplete, list and none * fixed bug with onclick behavior and documented option filtering as users type * updated documentation about filtering of options * Typo: character -> characters * fixed option filter bug with autocomplete=none * improved description of when listbox opens * use lowercase "the" in sentence * Minor editorial revision to alt+down in textbox keyboard table * udpated test file to check for aria-selected on option when listbox opens * fixed aria-selected tests * add tests for aria-selected to key down tests * Add aria-hidden=false and focusable=false to svg in button * Use fewer descendant combinators in selectors * Call function instead of setting a property on elements * Don't call setValue() when hitting backspace, to avoid moving the cursor to the end * Remove superfluous isPrintableCharacter() call * Remove unused variable textContent * Declare option outside for loop. Also use null instead of false * Set scrollTop once * Declare index variable in the if block * Move isPrintableCharacter to ComboboxAutocomplete.prototype * Add information about the id attribute for all combobox examples; fixes #785 Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com> Co-authored-by: Matt King <a11yThinker@Gmail.com> Co-authored-by: Valerie Young <spectranaut@gmail.com> Co-authored-by: Simon Pieters <zcorpan@gmail.com>

carmacleod mentioned this issue Nov 13, 2019

Combobox Pattern and Examples: Convert to support draft ARIA 1.2 specification #1255

Merged

7 tasks

mcking65 added bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern labels Nov 14, 2019

mcking65 added this to Next Steps in Combobox Patterns and Examples Development Project via automation Nov 14, 2019

mcking65 added this to the 1.2 Release 1 milestone Nov 14, 2019

carmacleod mentioned this issue Jan 23, 2020

Drop IE Support #1304

Closed

mcking65 mentioned this issue Jan 28, 2020

Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more #1276

Merged

6 tasks

carmacleod self-assigned this Feb 4, 2020

carmacleod mentioned this issue Feb 5, 2020

aria-haspopup incorrectly used for ARIA 1.2 Editable Combobox With List Autocomplete Example #1323

Closed

mcking65 linked a pull request Feb 7, 2020 that will close this issue

Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more #1276

Merged

6 tasks

mcking65 closed this as completed in #1276 Feb 14, 2020

Combobox Patterns and Examples Development Project automation moved this from Next Steps to Complete Feb 14, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Focus problem when clicking on combobox dropdown button with mouse #1261

Focus problem when clicking on combobox dropdown button with mouse #1261

carmacleod commented Nov 13, 2019 •

edited

carmacleod commented Nov 13, 2019 •

edited

LaurenceRLewis commented Nov 13, 2019

carmacleod commented Nov 13, 2019

zcorpan commented Nov 13, 2019

JAWS-test commented Nov 14, 2019

mcking65 commented Nov 14, 2019

carmacleod commented Feb 4, 2020

mcking65 commented Feb 7, 2020

Focus problem when clicking on combobox dropdown button with mouse #1261

Focus problem when clicking on combobox dropdown button with mouse #1261

Comments

carmacleod commented Nov 13, 2019 • edited

carmacleod commented Nov 13, 2019 • edited

LaurenceRLewis commented Nov 13, 2019

carmacleod commented Nov 13, 2019

zcorpan commented Nov 13, 2019

JAWS-test commented Nov 14, 2019

mcking65 commented Nov 14, 2019

carmacleod commented Feb 4, 2020

mcking65 commented Feb 7, 2020

carmacleod commented Nov 13, 2019 •

edited

carmacleod commented Nov 13, 2019 •

edited