# Example: WAI-ARIA Tree Grid - Prototype

This Fancytree Tree Grid has uses a prototypical extension to explore ARIA support as discussed here:
w3c/aria-practices/treegrid/examples/treegrid/treegrid-1.html

Extended mode adds this behavior:

- Embedded inputs get the focus, but we distinguish cell-nav-mode and cell-edit-mode. cell-nav-mode steals `Up`, `Down`, `Left`, `Right`, `Home`, `End` fromt input controls to always allow cell navigation.
- `Enter`: In row-mode: switch to cell-nav-mode. In cell-nav-mode: execute default action or switch to cell-edit-mode for embedded text input. In cell-edit-mode: switch back to cell-nav-mode.
- `Esc`: In cell-nav-mode: switch to row-mode. In cell-edit-mode: switch to cell-nav-mode.

See also the ARIA Tree View example.

cellFocus:
Extended mode (Please reload page for changes to take effect.)

Select | Item | In Stock | Favorite | Details | Qty | Link | Drop
--- | --- | --- | --- | --- | --- | --- | ---
> |  |  |  |  |  | link |

Text 2

jquery.fancytree.js project home Link to this page Example Browser View source code