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.

Sign up for GitHub

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

Jump to bottom

Develop example of listbox pattern #123

Closed
mcking65 opened this issue Oct 16, 2016 · 8 comments
Closed

Develop example of listbox pattern #123

mcking65 opened this issue Oct 16, 2016 · 8 comments
Assignees
@mcking65
Labels
Example Page Related to a page containing an example implementation of a pattern
Milestone
1.1 APG Release 1

Comments

@mcking65
Copy link
Contributor

mcking65 commented Oct 16, 2016 •
edited
Loading

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
@mcking65 mcking65 added help wanted Task force is looking for an owner for the issue Example Page Related to a page containing an example implementation of a pattern labels Oct 16, 2016
@mcking65 mcking65 added this to the 1.1 PR milestone Oct 16, 2016
@mcking65 mcking65 removed the help wanted Task force is looking for an owner for the issue label Nov 11, 2016
@mcking65 mcking65 self-assigned this Nov 11, 2016
mcking65 added a commit that referenced this issue Dec 6, 2016
@mcking65
Merge listbox changes in pull request #175
9e2c7fa 
Changes to complete js and css for  list box example for issue #123.
@arbydev
Copy link

arbydev commented Dec 21, 2016

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
Copy link
Contributor Author

@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
Copy link

arbydev commented Dec 22, 2016

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
Copy link
Contributor Author

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

@DavidMacDonald
Copy link

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"
image

@mcking65
Copy link
Contributor Author

@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
Copy link

DavidMacDonald commented Mar 30, 2017 •
edited
Loading

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

@stevefaulkner stevefaulkner mentioned this issue Aug 29, 2017
Closed
mcking65 added a commit that referenced this issue Oct 6, 2017
@mcking65
Listbox Pattern and Examples: Breakout Examples to Separate Pages
94e4602 
For issue #123, made the following changes:

* renamed: examples/listbox/listbox.html -> examples/listbox/listbox-rearrangeable.html
* listbox-rearrangeable.html:
    - Change title, Remove example 3, add similar example link
    - add intro to keyboard and roles and props sections
    - update links to source files, update source rendering code.
* renamed:examples/listbox/js/main.js -> examples/listbox/js/listbox-rearrangeable.js
* listbox-rearrangeable.js: Remove example 3 code.
* new file:examples/listbox/listbox-scrollable.html
* new file:examples/listbox/js/listbox-scrollable.js
* modified aria-practices.html: Update links to example pages and ad ID listbox_kbd_interaction.
@mcking65 mcking65 mentioned this issue Oct 6, 2017
Closed
3 tasks
@mcking65 mcking65 modified the milestones: 1.1 Rec, 3Q17 Working Draft Oct 6, 2017
mcking65 added a commit that referenced this issue Oct 11, 2017
@mcking65
Rearrangeable Listbox Example: Add toolbar styling (pull #473)
f9c986a 
For issue #123, add styling to make the toolbar keyboard affordance perceivable by sighted users to address concerns raised by @DavidMacDonald.Styled buttons and toolbar in listbox example
mcking65 added a commit that referenced this issue Oct 17, 2017
@mcking65
Listbox Examples: Add typeahead functionality (pull #481)
c98a878 
For issue #123, add typeahead in the lists so that typing the first letters of the name of an option moves focus to the next option that starts with those letters.
mcking65 pushed a commit that referenced this issue Oct 18, 2017
@tatermelon @mcking65
Rearrangeable Listbox Examples: Update keyboard shortcuts (pull #479)
43f88c7 
For issue #123, change keyboard shortcuts so that:

* Shortcut for Add button is enter instead of delete
* Shortcut for Important button is enter instead of delete.

Fix bug where selecting the last items in the list and performing an action made the list unfocusable.
mcking65 pushed a commit that referenced this issue Oct 18, 2017
@tatermelon @mcking65
Rearrangeable Listbox Examples: Add live regions that announce comple…
36cfb46 
…ted actions

For issue #123, add a live region to each example that announces the result of pressing an action button that moves one of the listbox options.
@mcking65
Copy link
Contributor Author

The listbox examples are now code complete and ready for review.

  1. Scrollable Listbox Example
  2. Scrollable Listbox Example:
    Single-select listbox that scrolls to reveal more options, similar to HTML select with size attribute greater than one.
    • Example Listboxes with Rearrangeable Options

Closing and opening separate review issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mcking65 mcking65

Labels
Example Page Related to a page containing an example implementation of a pattern
Projects
Listbox Pattern and Examples Development Project
Status: Complete
Milestone
1.1 APG Release 1
Development

No branches or pull requests
3 participants
@DavidMacDonald @mcking65 @arbydev