Building accessibility into a canvas-based product

This post details the technical implementation of Figma's canvas accessibility layer, focusing on the creation of a 'Mirror DOM' that synchronizes with the internal scenegraph. It explains the architecture of the internal accessibility tree, the React-based Mirror DOM component, and the bidirectional synchronization system for focus and selection. The post also elaborates on the use of live regions for announcing user actions and changes, including coalescing multiple events into single announcements. It highlights the decision to lay out Mirror DOM elements for assistive technology interpretation and the use of affine transforms for positioning.