Issues Panel

The VertaaUX Issues Panel is a dedicated TreeView for browsing and navigating UX issues found in your code.

Accessing the Panel

Method 1: Activity Bar

Click the VertaaUX icon in the Activity Bar (left sidebar). The icon appears as a checklist.

Method 2: Command Palette

1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type "VertaaUX: Show Issues Panel"
3. Press Enter

Panel Overview

The Issues Panel displays scan results in a hierarchical tree structure:

VertaaUX Issues
├── Button.tsx (3 issues)
│   ├── [error] Line 12: Missing accessible name
│   ├── [warning] Line 15: Touch target too small
│   └── [info] Line 18: Consider aria-label
├── Form.tsx (2 issues)
│   ├── [warning] Line 8: Form lacks visible labels
│   └── [info] Line 22: Submit button text unclear
└── Header.tsx (1 issue)
    └── [warning] Line 5: Heading hierarchy skipped

Understanding Issues

Severity Levels

Each issue has a severity indicator:

Issue Information

Each tree item shows:

• Severity icon: Visual indicator of importance
• Line number: Location in the file
• Message: Brief description of the issue

Hover over an issue to see additional details in a tooltip:

• Full issue description
• Confidence score (if available)
• Category (accessibility, usability, etc.)

Navigating Issues

Click to Navigate

Click any issue in the tree to:

1. Open the file in an editor
2. Jump to the exact line
3. Highlight the affected code

The editor cursor moves to the issue location, making it easy to see the problem in context.

Keyboard Navigation

Working with Issues

Review and Fix Workflow

1. Scan your code using "Scan Current File" or "Scan Workspace"
2. Open the Issues Panel to see all found issues
3. Click an issue to navigate to it
4. Review the code and understand the problem
5. Make your fix in the editor
6. Re-scan to verify the issue is resolved

Quick Fixes

Some issues include recommended fixes. When available:

1. Position your cursor on the underlined code
2. Look for the lightbulb icon (or press Cmd+. / Ctrl+.)
3. Select "Apply VertaaUX fix" from the menu
4. Review the suggested change
5. Save the file

Issue Details

In the Editor

Issues appear as diagnostics in your code:

• Underlines: Squiggly lines under problematic code
• Hover information: Mouse over the underline to see the issue message
• Problems Panel: Full list in View > Problems (Cmd+Shift+M / Ctrl+Shift+M)

Confidence Indicator

If an issue includes a confidence score, it appears in the hover tooltip:

Touch target may be too small
Confidence: 85%
Category: Accessibility

Higher confidence means the issue is more likely to be a real problem. Adjust the confidence threshold to filter issues by confidence.

Refreshing Issues

The Issues Panel updates automatically after each scan. To refresh:

1. Run "Scan Current File" to update the current file's issues
2. Run "Scan Workspace" to update all issues

Issues persist until you run a new scan or close VS Code.

Panel Behavior

When Empty

If no issues are found, the panel displays:

No issues found
Run a scan to check your code for UX issues

After Scan

Issues appear immediately after a scan completes. The panel groups issues by file, with the most affected files at the top.

File Changes

When you edit a file:

• Existing issues remain visible (until you re-scan)
• Line numbers may shift if you add/remove lines
• Re-scan to get accurate positions after major changes

Compared to Problems Panel

VS Code has a built-in Problems panel. Here's how it compares to the VertaaUX Issues Panel:

Use the Problems Panel when you want to see all diagnostics from all sources.

Use the VertaaUX Issues Panel when you want to focus specifically on UX and accessibility issues.

Troubleshooting

Related

• Commands - Scan commands reference
• Configuration - Adjust confidence and limits
• Quickstart - Initial setup guide