Glossary Term Grid Features Block for React

Edit TERMS at the top of the file, in alphabetical order: each entry has a term, its speech, a definition and the related term it points to. The rail is built from the same list: a letter becomes a link when a term starts with it, and links to the first one, so adding a term needs no other edit. Keep related the name of another entry, because the link goes to that entry's cell.

The terms are a description list: each term is a dt with its definitions in dd elements, so a screen reader announces them as pairs. The rail is a nav named "Glossary index", and each link says its letter and its term ("A, Alias"). The letters without a term are decorative and hidden from assistive technology.

They are plain # links to each cell's id, so they work without JavaScript, jump with the browser's own scrolling and show up in the address bar. The cell you land on gets a :target tint, and scroll-margin keeps it clear of the top edge.

A grid with one pixel between its cells, on a border-coloured background, draws one line where two cells meet instead of doubling it. The page's rails and top rule come from the Guides spine, and each band draws its rule with Guides, so + marks land where it meets the rails. The last row draws no bottom rule, because the next block's top rule is the edge.

The header fades up once when the page loads, with a CSS transition. Nothing else moves. With reduced motion the transition is off and the section simply appears.

The 26 letters are too wide for a phone, so the rail becomes a row that scrolls sideways, with each link still reachable by keyboard. The terms stack in one column, so every definition has the full width. Nothing else scrolls sideways at 320 pixels.