MikeS listbox-notes

From Level Access Web Labs
Jump to navigation Jump to search

About this listbox


Design: This is an ARIA-based button that, when activated, triggers an ARIA-based listbox to appear and expand. After the user makes a selection, the listbox is hidden again. What differs across the three variants is what the desired post-selection action is (see Purpose above). Note: the link and text field are not relevant to the implementation, but exist here solely to support keyboard testing.

Keyboard & touch support:

  • Tab to the button, or arrow or swipe to it with a mobile screen reader
  • Screen reader hotkeys and gestures also navigate to the button
  • Display/Expand the listbox by pressing Enter, spacebar, or Alt+Down arrow, or by double-tapping in mobile screen readers
  • Use arrow keys or standard mobile screen reader gestures (left/right) to move between the listbox options
  • To make a selection, press Enter or double-tap in mobile screen readers
  • Keyboard only: Press Home or End to jump to the first or last option. Press PageUp or PageDown to scroll the listbox by several options (configurable).
  • Press Esc key to abort/collapse the listbox without changing the selection
  • After making a selection from the listbox, the action specified under 'Purpose' above is performed.
  • Visible keyboard focus is displayed on the triggering button and on the listbox options as the user navigates through them
  • Focus is set to the current/selected option when the listbox is expanded.

Differences between a standard SELECT element and this listbox

  • When a standard SELECT element has keyboard focus, the user can immediately use arrow keys to navigate through the options, without the need to expand it first with Alt+Down arrow. In this listbox, the button must be activated to display and expand the listbox. However, the scripting could be extended to support the Up or Down arrow keys triggering the button to display and expand the listbox and change the option by one.
  • A standard SELECT element supports first-letter jumps, such as pressing "t" to quickly jump to the first/next option beginning with the letter "t". This listbox does not currently support this capability but could be extended to do so.
  • When this listbox expands, it pushes the content below it furthr down the screen. The actual implementation should overlay that content.