Icon rail

A narrow sidebar of icon keys, using the kit’s own icons. A lamp beside the current one is lit, a label shows as a tooltip on hover and on focus, and a key at the foot opens the rail out so every label is printed beside its icon. It remembers which way you left it.

Hover or Tab to an icon for its label. Press the key at the foot to print every label; reload and it stays as you left it.

• Every item is a link whose name is its label, which is always in the page: closed, the label is a tooltip made visible, not added, so an icon on its own is never the only name.
• The tooltip shows on hover and on keyboard focus, and on a touch screen a press goes straight to the link, where the page’s own heading says where you are.
• The current item has aria-current="page" and a lit lamp, and is let into the plate; the lamp is colour, the aria attribute and the sunk key are not.
• The foot key is a real button whose name says what it will do (“Show labels”, “Hide labels”). Opening the rail moves nothing: icons stay where they were and only the words appear.
• The choice is stored in localStorage, read and written inside try/catch; a browser that refuses storage starts the rail as it was marked up.
• With reduced motion the rail opens at once, without easing, and the tooltip appears without sliding.