Drawer index

A file tree as a card-index cabinet. Folders are drawers, each with a label holder and a cup pull; open one and it slides out with its files standing in it as index cards, each showing its top edge over the card behind. A folder inside a drawer is a divider with a tab. It is a real tree for the keyboard and for a screen reader, drawn from data by one function.

Pull a drawer, then take out a card. Or tab in and use the arrow keys: Right opens and goes in, Left closes and comes back out. Home, End, and type a name to jump to it.

• It is a WAI-ARIA tree: a list with role="tree", every drawer, divider and card a treeitem with its level, and every folder with aria-expanded. One item is in the tab order and the arrow keys move from there.
• The keys are the pattern’s own: Up and Down; Right to open and then go in; Left to close and then go out; Home and End; * for every folder beside this one; and typing to jump to a name.
• A shut drawer is out of reach: its cards are hidden from assistive technology and from Tab, not only slid out of sight.
• A folder is named by its own name, so a screen reader says “runbooks, expanded, level 1”, and not every name inside it.
• The card taken out is aria-selected, and it also stands proud of the rest with its lamp lit. Colour is never the only sign.
• Names and sizes are paper ink on paper, 13:1 and 6:1, in both finishes.
• With reduced motion drawers open and shut at once, with no slide.