Canvas Re-Anchoring & Pin Navigation

Visualizing Findings in Live Context

Reviewing audit findings in an isolated spreadsheet or terminal log makes it difficult to understand where issues actually occur on the page. UIDesigner Audit maps every discovered issue back onto the live canvas using visual pin overlays.

Numbered Finding Badges

When viewing an audit report with the live canvas enabled:

• Numbered circular badges appear directly over offending elements on the webpage.
• Pin badge colors match issue severity:
• Red: Critical violations requiring immediate attention.
• Orange: Serious accessibility or responsive issues.
• Yellow: Moderate warnings and best practice improvements.

Two-Way Cross-Navigation

UIDesigner connects the issue list and the visual canvas seamlessly:

1. Sidebar to Canvas: Clicking any finding in the triage list automatically scrolls the canvas to that element, draws an animated bounding box, and opens the pin detail card.
2. Canvas to Sidebar: Clicking any numbered pin on the webpage highlights and expands the corresponding finding in the sidebar triage panel.

Rapid Keyboard Navigation

Audit large pages without leaving your keyboard:

• Press J to jump forward to the next unresolved finding.
• Press K to jump backward to the previous finding.
• Press E to mark the current active finding as resolved.
• Press Escape to close the active pin overlay.