[Accessibility] Gutter and code content are disjoint in accessibility tree

[pedropaulovc]

Description

The diff viewer's gutter (line numbers and diff indicators like +/-) and the code content appear as separate, unrelated elements in the accessibility tree. This breaks the logical association between line numbers and their corresponding code, making the interface inaccessible to screen reader users.

When inspecting with browser accessibility snapshots, the gutter and code elements are not semantically connected, preventing assistive technologies from understanding that they form a coherent line unit.

Expected Behavior

Following WCAG guidelines and semantic HTML best practices, the gutter and code should be structured as a proper grid where screen readers can announce the line number and code content as an associated pair:

<div role="grid" aria-label="Code diff viewer">
  <div role="row" aria-rowindex="42">
    <div role="rowheader" aria-label="Line 42">42</div>
    <div role="gridcell">const x = 1;</div>
  </div>
</div>

With this structure, screen readers would announce "Line 42, const x = 1" as a coherent unit rather than reading them as disconnected elements.

Actual Behavior

Currently, the gutter and code content appear as separate, unrelated elements in the accessibility tree with no semantic association between them.

Technical Details

• Affected Component: Diff viewer
• Root Cause: CodeMirror's rendering approach may need custom accessibility extensions or DOM restructuring
• WCAG Guideline: Related to WCAG 1.3.1 Info and Relationships

Solution Outline

Implement proper ARIA roles and attributes:

1. Wrap the diff view with role="grid" and meaningful aria-label
2. Use role="row" for each line with aria-rowindex attribute
3. Mark line numbers/gutters as role="rowheader"
4. Mark code content as role="gridcell"
5. Add aria-label attributes to establish text relationships

This may involve:

• Creating a custom accessibility wrapper around CodeMirror
• Extending CodeMirror's DOM structure with accessibility attributes
• Testing with screen readers (NVDA, JAWS, VoiceOver) to validate announcements

Additional Context

This issue directly impacts users relying on screen readers for code review. Proper accessibility here is essential for inclusive code collaboration.