Develop example of listbox pattern

[mcking65]

The listbox design pattern is at:
http://w3c.github.io/aria-practices/#Listbox

The HTML template and description for two listbox examples is in the examples/listbox/listbox.html file in the repo and can be viewed in RawGit at:
https://rawgit.com/w3c/aria-practices/master/examples/listbox/listbox.html

[arbydev]

Hi, the notes about this example state:
"Availability of the shortcuts is communicated to assistive technologies via the aria-keyshortcuts property on the button elements."
If a sighted keyboard-only users encounters this page, how are they expected to discover that only the Space key "triggers changes the selection state of the focused option"? My assumption would be that either Space or Enter would toggle a selected state for the item I have focus on similar to a button. If I pressed only the Enter key and saw my element move from one column to the other I might never know that multi-select was an option using the Space key. Do we have a responsibility to supplying these keyboard shortcuts details visually? Perhaps those shortcuts only appeared on the screen if keyboard actions were detected so mouse only users would not be overwhelmed with content on screen unnecessarily.

[mcking65]

@arbydev

We definitely need to reveal the keyshortcuts that activate the action buttons to sighted keyboard users.

On the other hand, your feedback on the enter key toggling a check mark that indicates a selected state is interesting, especially considering issue #233. Do you have any examples of platforms or environments where enter toggling a checkbox or selected state is conventional?

[arbydev]

Ah, that was my rookie mistake. Yes you are correct that checkboxes are triggered only with the spacebar and this should follow that specification.

[mcking65]

Added commit 3500257 from pull request #307 to include support for scrolling and a third implementation with a long list.

[DavidMacDonald]

Looks like the Down and "not important" buttons are not in the tab order when tabbing into the listbox and making a selection. Then tabbing out to try to click "not important"

[mcking65]

@DavidMacDonald, they are in a toolbar; use arrow keys.

Your feedback in this case is a perfect example of why I am hoping we can develop widely recognizable visual indicators that tell people when arrow key navigation is available. We need arrow key navigation to change from an affordance that is typically hidden to one that is always easily perceived. See example 1 on the layout grid examples page
for an experimental approach to such indicators.

[DavidMacDonald]

@mcking65 In windows desktop, once a dialogue box is open both the arrow and the tab move the focus between buttons.

But I like the idea of a tutorial popup. I teach JAWS users and a surprising number don't know what to do with a radio group. I would say 30% of average JAWS users don't know that they need to use the arrow keys.