Drill-Down Org Chart Team Block for React

Edit HEADS at the top of the file. A person is an id, a name, a role and, if they manage anyone, a reports list. The three columns are the three levels: LEVELS names them and says what to show before a pick above them. For a fourth level, add an entry to LEVELS, raise LAST to 3 and change the figure's lg:grid-cols-3 to four columns.

Each column is a listbox named for its level ("Heads of function", "Team leads", "Specialists"). Tab moves from one column to the next, the Up and Down arrows move the highlight within a column, and Enter or Space picks the person, which fills the next column. The picked row is marked as selected for assistive technology as well as with the bar. A polite status line, visible only to screen readers, says whose team is now showing and who is in it.

Below lg only the deepest column shows, so the chart is one list at a time. A breadcrumb row above it ("Fordwell, Nadia Farouk, Gustavo Pires") holds buttons that step back up: pressing "Fordwell" returns to the heads of function. The last crumb is the page you are on and is not a button. A caption under the figure says so.

A short hint in its place ("Pick a team lead to see who reports to them"). Someone with no reports simply has no chevron: picking them marks their row and the next column shows its hint. Every column has a minimum height, so the block keeps its size as you drill in and back out.

Yes: it's a nav named "Where you are in the chart" with an ordered list of crumbs, and it only appears on a phone. Its crumbs are native buttons rather than links, because they change what the chart shows and don't go to another page.

Guides draws the top rule and the frame with + marks on its corners; the two dividers between columns are the figure's own divide-x; every row draws a bottom border. The frame sits inside the rails, with the page's side lines running past it, and the block ends with its padding, so it draws no closing rule.