Canvas Accessibility Layer

Figma has developed a comprehensive system to make its canvas-based product accessible to users of assistive technologies. This involves creating a 'Mirror DOM' that synchronizes with the internal scenegraph, an internal accessibility tree to cache accessibility details, a bidirectional synchronization system for focus and selection, and an announcement system for user actions. This system allows screen readers to navigate and operate the editor, and keyboard-only users to interact with Figma files. This post details the implementation of the Mirror DOM, including how it handles layout and positioning of elements, and the synchronization of focus and selection between the canvas and assistive technologies. It also describes the use of live regions for announcing user actions and changes.