Build an Accessible Code Diff With One Reading Order and Navigable Hunks

A side-by-side code diff is visually efficient. It can become incoherent when assistive technology reads the entire old file and then the entire new file.

Start with one semantic sequence of changes. Treat split view as a presentation of that sequence, not as the document structure.

Model hunks first

type DiffLine = {

oldNumber?: number;