Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Review Example of Collapsible Dropdown Listbox #557

Open
mcking65 opened this Issue Nov 29, 2017 · 20 comments

Comments

@mcking65
Copy link
Contributor

mcking65 commented Nov 29, 2017

The collapsible dropdown listbox example developed for issue #470 is ready for review.

Task Force Member Reviews Requested as of Nov 29, 2017

@devarshipant

This comment has been minimized.

Copy link

devarshipant commented Nov 30, 2017

Type a character: focus moves to the next item with a name that starts with the typed character.

Does not work in IE edge.

Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

Does not work in IE edge.

Label (Transuranium elements:) is not programmatically tied to its control. Consider using for / id attributes.

@jnurthen

This comment has been minimized.

Copy link
Contributor

jnurthen commented Nov 30, 2017

Label (Transuranium elements:) is not programmatically tied to its control. Consider using for / id attributes.

I don't think that can work for a button. If you were to add a for/id labelling it would overwrite the value which we certainly don't want to happen. Really this should not be a button IMO as there is no way to label it correctly.

@mcking65 is this pattern correct? Is this how it is meant to be coded?

@devarshipant

This comment has been minimized.

Copy link

devarshipant commented Nov 30, 2017

Really this should not be a button IMO as there is no way to label it correctly.

I did not notice that the control has a button and an unordered list with role listbox. Although visually it is a single label and its control (listbox).

  • aria-labelledby creates that association ("exp_elem" on ul points to Transuranium elements), but I could not get JAWS / NVDA to speak the label. It could be due to button element receiving focus before ul.

transuranium-label

@mcking65

This comment has been minimized.

Copy link
Contributor Author

mcking65 commented Nov 30, 2017

This pattern is a way of making a custom element that replaces <select size="1"`. It is a hybrid of the best of what Mac and Windows offer for native html selects.

The visual rendering comes from Windows. On Windows, the popup does not cover up the button-looking thingy. On Mac it does.

From an accessibility API perspective, windows calls the button-thingy a combobox. However, that does not match the ARIA definition of a combobox. MacOS calls it a button, which works very well.

On MacOS, the popup is a menu, but it actually behaves more like a single-select listbox. On Windows, the popup is a single-select listbox, which works really well.

The reason button works so well is that its label is mutable by the JS but not the user except via the popup. And, with aria-haspopup, it effectively communicates the collapsed, popup nature.

Right now, the visible label is tied only to the listbox. However, I think it is right that it should be tied to both the button and the listbox. I will fix that.

This is just one way of doing this. Another is to use a menu of menuitem checkboxes like on MacOs.

Longer term, I would like to further tweak the ARIA definition of combobox to be more flexible still. We made good progress in ARIA 1.1, but I think we can do still better in ARIA 1.2. In the mean time, this is a very accessible way of making this kind of element and have it reliably rendered across platforms.

mcking65 added a commit that referenced this issue Nov 30, 2017

Collapsible Dropdown Listbox Example: Improve Button Label
Per feedback from @jnurthen and @devarshipant in issue #557,
modified examples/listbox/listbox-collapsible.html.
* Added aria-labelledby on the button to pick up both the button content and the adjacent label as the label.
* Simplified the label wording.
@mcking65

This comment has been minimized.

Copy link
Contributor Author

mcking65 commented Nov 30, 2017

With commit 56fd415, the button label includes both the adjacent label of "Choose an element:" and the button content that specifies the currently chosen element.

@mcking65 mcking65 changed the title Review Example of Expandable Dropdown Listbox Review Example of Collapsible Dropdown Listbox Nov 30, 2017

@aleventhal

This comment has been minimized.

Copy link

aleventhal commented Nov 30, 2017

Should it be saying "not selected" each time I down arrow? Using NVDA.

As far as I'm concerned, for this kind of widget, the selection should move with the focus.

@mcking65

This comment has been minimized.

Copy link
Contributor Author

mcking65 commented Nov 30, 2017

@aleventhal, It looks to me like selection is moving with focus and that is correctly reflected in both Firefox and Chrome and reported correctly by JAWS in both browsers. NVDA does not say that in Firefox, it only says not selected in Chrome. Almost seems like a strange NVDA bug.

@mcking65

This comment has been minimized.

Copy link
Contributor Author

mcking65 commented Nov 30, 2017

@devarshipant, type ahead is working for me in IE11. We are not making any statements about Edge support in the first release of practices.

@devarshipant

This comment has been minimized.

Copy link

devarshipant commented Dec 1, 2017

@mcking65 -- ok, edge is out then. I am not clear on the type ahead functionality. Is the user supposed to expand the listbox (after pressing spacebar) and then use type ahead? For me, type ahead does not work when the listbox is collapsed.

@annabbott

This comment has been minimized.

Copy link

annabbott commented Dec 3, 2017

No issues noted.

@goetsu

This comment has been minimized.

Copy link

goetsu commented Jan 5, 2018

Hi @mcking65 , with iOS last version it's currently impossible to open the dropdown when voiceover is turned on and impossible to close the dropdown when voiceover turned off and after touching the button to open it

@bramd

This comment has been minimized.

Copy link

bramd commented Mar 7, 2018

This seems to work fine in most cases. However, if NVDA is used and both the "Automatic focus mode" options in the Browse Mode preferences are turned off it will just announce list when pressing enter/space on the button in browse mode. With a native select, it would have entered focus mode.

Since listbox is intended for widgets that handle keyboard focus (e.g. should be used in focus mode), I consider this a bug in NVDA, but wonder how other screenreaders handle this.

@shirsha

This comment has been minimized.

Copy link

shirsha commented Jul 26, 2018

When the focus is on the button the keyboard user can expand and collapse the listbox with [enter] key, it is working as expected.
When the focus is on the button the keyboard user can expand it with [Spacebar], but can't collapse it.
Either disable the function of expanding the listbox with [spacebar] or allow the user to close it using [spacebar]

@scottaohara

This comment has been minimized.

Copy link
Member

scottaohara commented Aug 16, 2018

I opened an issue about a mobile VoiceOver bug. Apologies if that should have been in this thread.

@sidnc86

This comment has been minimized.

Copy link

sidnc86 commented Aug 31, 2018

In Windows, there is another behavior. In collapsed state, one can use up/down arrows on keyboard to change the selection of options without expanding the listbox. Any plans to include that behavior? Of course IOS doesn't let that happen in case of select element. It sticks to the current implementation that you have got out there of presenting it as menubutton. I don't know behavior of select element in Mac as haven't used one yet.

@sidnc86

This comment has been minimized.

Copy link

sidnc86 commented Aug 31, 2018

In this example, up/down arrow seems to work only in Focus Mode of NVDA. I tried it on NVDA+Chrome combination. But still, pressing up/down arrow on menu button automatically expands the listbox. Whereas in Windows, for a select element, pressing up/down arrow changes selected option without expanding the listbox. Can we get this part working? That what I meant to have in my previous comment.

@ianmcburnie

This comment has been minimized.

Copy link

ianmcburnie commented Sep 28, 2018

I'm sure this will be fairly obvious to most people, but I'm going to mention it anyway! Unlike a native select, the value of the listbox will not be submitted to the server as part of the form. Because, of course, buttons only pass their value if used to submit the form. Not much can be done about this I know, except perhaps clearly describe this situation (in the notes perhaps?) and provide a couple of workarounds (e.g. binding another, hidden input with the value of the button, or fully binding a hidden select). What do you think?

One benefit of the readonly combobox approach is that it uses a text input instead of a button, and so the value gets automatically submitted with the form. Sadly though, we at eBay have ran into several issues with a readonly combobox on iOS. Hence why we are exploring this newer pattern of yours.

@Cerberooo

This comment has been minimized.

Copy link

Cerberooo commented Nov 7, 2018

What about mentioning an alternative with select > option. Because the functionality is provided without JavaScript too.

@mrcsmcln

This comment has been minimized.

Copy link

mrcsmcln commented Jan 19, 2019

Is it just me or is aria-selected completely missing on the options from the JS example? It's referenced in the attributes column of the table, but I can't seem to find it via inspection or in the source code. Looks like this applies to the multiselectable examples too.

@mcking65

This comment has been minimized.

Copy link
Contributor Author

mcking65 commented Jan 24, 2019

@mrcsmcln,

If the listbox is not multiselect, selection follows focus and aria-selected is set on line 321 in listbox.js.

If it is multiselect, select is triggered with space and set with the function call on line 149.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.