Added by Paul Zablosky, last edited by Justin Obara on Dec 17, 2008  (view change)

Labels:

Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

Default Keyboard Interactions

Work in Progress
This page is a work in progress. All content is subject to change.

This page captures in a single table the default actions for common keyboard controls for each Fluid component. Having this information in one place helps us to:

  • Discover gaps
  • Discover inconsistencies
  • Create a reference for designers of new components

Issues:

  • Some keystroke combinations are used for more than one purpose within a component. This is hard to express in a simple table.
  • We don't have a consistent way of specifying keyboard behaviour for all components. Information on this page has been gathered from the reference pages listed below.
  • We need to have some codified conventions for things. For example, is it a rule that Space and Enter always have the same function except during text entry?
  • In exploring the keystroke effects through the test sites and demos, it is sometimes difficult to distinguish the behaviour of the component from the behaviour of the application employing it.

Keystroke Actions by Component

   Key
— / —
Component 		Tab Back
Tab 		Enter Space Del Left Arrow Ctrl-LA Up Arrow Ctrl-UA Down Arrow Ctrl-DA Right Arrow Ctrl-RA Backspace i

Ctrl-i 		j

Ctrl-j 		k

Ctrl-k 		m

Ctrl-m 		Esc End Home
Inline Uploader
  • navigate
 Next Previous Select Select
~browse-files 		          Browser Back              
  • in file queue
         Remove   Prev Next                  
Popup Uploader
  • navigate
 Next Previous Select Select           Browser Back              
  • in file queue
         Remove   Prev Next                  
Simple Text Inline Edit
  • navigate
 Next Previous Select Select           Browser Back              
  • in selected text
       Space Char Delete Char Right Previous Char     Next Char Delete Char Left              
Pager
Next Previous Select Select           Browser Back              
Reorderer
Layout Customizer
  • Navigate
 Next and Focus Previous

    Scroll Up Scroll Down   Browser Back              
  • Portlet Focus
           Col L (prev line)
Move Left 		Col Up (roll)

Move Up 		Col Dn (roll)

Move Dn 		Col R (next line)
Move Right 		  Col Up (roll)
Move Up 		Col L (prev line)
Move Left 		Col R (next line)
Move Right 		Col Dn (roll)

Move Dn 		     
Reorderer
Lightbox
  • Navigate
 Next and Focus                                
  • Image Focus
           Col L (prev line)
Move Left 		Col Up (roll)

Move Up 		Col Dn (roll)

Move Dn 		Col R (next line)
Move Right 		  Col Up (roll)
Move Up 		Col L (prev line)
Move Left 		Col R (next line)
Move Right 		Col Dn (roll)

Move Dn 		     

References

Uploader

Inline Edit

Pager

Reorderer - Layout Customizer

Reorderer - Lightbox

DHTML Style Guide

  • http://dev.aol.com/dhtml_style_guide
  • This is a baseline for our work in Fluid. The group is fairly technology driven and much of the rules are based on current interaction in windows. As Fluid, it's important that we think critically and creatively about how we can make interactions better. We want and need to take a leadership role in thinking through creative interaction for people with disabilities.m