Skip to content

Comments

Add container visualization for accessibility snapshots#278

Draft
RoyalPineapple wants to merge 4 commits intomainfrom
a11y-container-graph
Draft

Add container visualization for accessibility snapshots#278
RoyalPineapple wants to merge 4 commits intomainfrom
a11y-container-graph

Conversation

@RoyalPineapple
Copy link
Collaborator

@RoyalPineapple RoyalPineapple commented Dec 2, 2025 •
edited
Loading

Summary

Adds optional rendering of accessibility containers as dashed borders in snapshots, with hierarchical legend display.

Depends on #300 (hierarchical parsing API)

Commit 1: Update snapshot rendering to use AccessibilityElement

Refactors the snapshot rendering code to use the new AccessibilityElement type and adds container visualization support:

  • LegendView: Updated to accept AccessibilityElement for rendering accessibility information
  • ContainerLegendView: New view for displaying container metadata in the legend
  • AccessibilitySnapshotView: Updated to render container overlays and build hierarchical legends
  • AccessibilitySnapshotConfiguration: Added showContainers option

Commit 2: Add container hierarchy demo and snapshot test

Adds a new demo view controller that showcases all accessibility container types:

  • Semantic groups (with and without labels)
  • Lists
  • Landmarks (banner, navigation, main, search, etc.)
  • Tab bars
  • Data tables

Includes testContainerHierarchy snapshot test with reference images for iOS 17.5 and iOS 18.5.

Commit 3: Update reference images from CI

Regenerated all reference images on CI runners:

  • iOS 17.5 images generated on macOS-14 runner
  • iOS 18.5 images generated on macOS-15 runner

Usage

// Enable container visualization
let config = AccessibilitySnapshotConfiguration.withContainers()
assertSnapshot(of: view, as: .accessibilityImage(configuration: config))

What It Shows

  • Dashed borders around containers (lists, landmarks, data tables, semantic groups)
  • Hierarchical legend with containers grouping their child elements
  • Container type and label information

🤖 Generated with Claude Code

@RoyalPineapple RoyalPineapple changed the title Add accessibility container visualization with hierarchy support [WIP] Add accessibility container visualization with hierarchy support Dec 3, 2025
@RoyalPineapple RoyalPineapple force-pushed the a11y-container-graph branch 3 times, most recently from 3d8c515 to 3733a88 Compare December 3, 2025 16:40
@RoyalPineapple RoyalPineapple changed the title [WIP] Add accessibility container visualization with hierarchy support Add hierarchical accessibility parsing API Dec 4, 2025
@RoyalPineapple RoyalPineapple force-pushed the a11y-container-graph branch 7 times, most recently from 452d709 to b531faf Compare December 9, 2025 12:45
RoyalPineapple
RoyalPineapple commented Jan 27, 2026
View reviewed changes
Copy link
Collaborator Author

@RoyalPineapple RoyalPineapple left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still in progress

@RoyalPineapple RoyalPineapple force-pushed the a11y-container-graph branch 9 times, most recently from e2c65ec to bb6609f Compare January 28, 2026 17:21
@RoyalPineapple RoyalPineapple changed the title Add hierarchical accessibility parsing API Add container visualization for accessibility snapshots Jan 28, 2026
@RoyalPineapple RoyalPineapple changed the base branch from main to a11y-hierarchy-parsing January 28, 2026 17:22
RoyalPineapple and others added 2 commits January 28, 2026 18:27
@RoyalPineapple @claude
Add hierarchical accessibility parsing API
a46f63a 
Introduces new data structures for representing accessibility hierarchies:
- AccessibilityElement: Represents individual accessible elements with all
  their properties (label, value, traits, hints, custom actions, etc.)
- AccessibilityContainer: Represents semantic containers (lists, landmarks,
  tab bars, data tables, semantic groups)
- AccessibilityHierarchy: Top-level structure containing root elements and
  all containers with their relationships

The parser extracts container information from UIAccessibilityContainerType
and builds a complete hierarchical representation that can be used for
visualization, testing, or export.

Includes Codable conformance for JSON serialization and comprehensive
unit tests for the parsing logic.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@RoyalPineapple @claude
Update snapshot rendering to use AccessibilityElement
c5c4e95 
Refactors the snapshot rendering code to use the new AccessibilityElement
type instead of the internal AccessibilityMarker:

- LegendView: Updated to accept AccessibilityElement for rendering
  accessibility information in the legend panel
- AccessibilitySnapshotView: Updated to work with the new element type
  and prepare for container visualization support
- AccessibilitySnapshotConfiguration: Minor formatting cleanup

This is a preparatory change for adding container visualization overlays.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
RoyalPineapple and others added 2 commits January 28, 2026 18:27
@RoyalPineapple @claude
Add container hierarchy demo and snapshot test
3a28f2d 
Adds a new demo view controller that showcases all accessibility container
types with visual examples:
- Semantic groups
- Lists
- Landmarks (banner, navigation, main, search, etc.)
- Tab bars
- Data tables

Includes a snapshot test (testContainerHierarchy) with reference images
for iOS 17.5 and iOS 18.5.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@RoyalPineapple @claude
Update reference images from CI
2635b9f 
Regenerated all reference images on CI runners to ensure pixel-perfect
matching with the updated rendering code:
- iOS 17.5 images generated on macOS-14 runner
- iOS 18.5 images generated on macOS-15 runner

Also adds Example/Pods to .gitignore.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@RoyalPineapple RoyalPineapple changed the base branch from a11y-hierarchy-parsing to main January 28, 2026 17:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@khanlou khanlou Awaiting requested review from khanlou khanlou will be requested when the pull request is marked ready for review khanlou is a code owner

@kyleve kyleve Awaiting requested review from kyleve kyleve will be requested when the pull request is marked ready for review kyleve is a code owner

@meherkasam meherkasam Awaiting requested review from meherkasam meherkasam will be requested when the pull request is marked ready for review meherkasam is a code owner

@meherkasam-square meherkasam-square Awaiting requested review from meherkasam-square meherkasam-square will be requested when the pull request is marked ready for review meherkasam-square is a code owner

@soroushsq soroushsq Awaiting requested review from soroushsq soroushsq will be requested when the pull request is marked ready for review soroushsq is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@RoyalPineapple