DHTML Style Guide Updated with Tree Grid Discussion

http://dev.aol.com/dhtml_style_guide#treegrid
 

Tree Grid (Under Discussion - Stefan)


*	Example: A Tree Grid is a combination of a Treeview and a Table with rows that are expandable. Examples include a threaded view of an email grid; a calendar that opens month, week and day view; or a File Browser which shows directories, subdirectories and files.
	
	Types	 Color	 Shape	
	→ Fruits (Tree is Closed)	  	  	
	↓Cars (Tree is Opened)	  	  	
	  Mini	 Red	 Small	
	  Truck	 Black	 Big	
	→ Instruments (Tree is Closed)	  	  	

*	Tab 

	*	The initial tab enters the grid with focus on the first header cell. 
	*	Once in the grid a second tab moves out of the grid to the next tab stop. 
	*	Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. 

*	Left and Right Arrow Navigation between columns. If the next cell in the row is empty, focus should not move. 
*	Up and Down Arrow Navigation between Rows. If the next cell in the column is empty, focus should move to the first column in the next row. If the next cell in the column is not empty, focus should move directly to that cell. 
*	Control and +/- or Num Pad and +/- Expand or collapse rows. 
*	Note: The Num Pad +/- conflicts with Jaws commands. 
*	Note: If the cell contains an editable field, the Enter key is used to enter edit mode and the esc key used to exit edit mode.

 
Donald F. Evans
Sr. Program Manager,
Office of Accessibility,
AOL LLC
AIM: donaldfevans
Phone 703.265.5952