Aria-practices: Focus problem when clicking on combobox dropdown button with mouse

[carmacleod]

Platform: Windows/Chrome (maybe others)
(part of functional review for PR https://github.com/w3c/aria-practices/pull/1255)

Steps:

1. 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)
2. Focus the combobox, either by tabbing or with mouse
3. Type 'A' and observe combobox dropdown list of 5 US state names that begin with 'A'
4. 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]

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

• Editable Combobox With List Autocomplete Example
• Editable Combobox without Autocomplete Example

[LaurenceRLewis]

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]

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]

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]

Platform: Windows/Chrome (maybe others)

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

[mcking65]

@@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]

I retested steps 2, 3, and 4 (above) using the examples in PR https://github.com/w3c/aria-practices/pull/1276:

• Preview combobox autocomplete=both
• Preview combobox autocomplete=list
• Preview combobox autocomplete=none

This problem will be fixed after PR https://github.com/w3c/aria-practices/pull/1276 is merged.

[mcking65]

Thank you @carmacleod, linking to #1276.