🧪 Halytic Comprehensive Test Page

This page contains intentional accessibility violations to test all 16 Halytic fix types.

⚠️ Testing Instructions:
  1. Scan this page: http://localhost:3001/test
  2. Check that "Fixable" pill count matches issue list count
  3. Click "Apply Quick-Fix" - should show 11 auto-fixable issues
  4. Manual fixes should show 5 high-risk issues separately
  5. Test "Verify Now" to confirm fixes work

✅ LOW-RISK (4 rules) - CSS/JS Auto-Fixable

1️⃣ focus-visible - Missing Focus Indicators

These elements should have visible focus indicators:

Link (no focus outline)

🔧 Expected: Halytic will inject CSS for visible focus indicators

2️⃣ skip-link - Missing Skip Navigation

This page has no skip-to-content link for keyboard users.

🔧 Expected: Halytic will inject skip-link via JavaScript

3️⃣ color-contrast - Insufficient Contrast

This text fails WCAG AA (gray #999 on white = 2.8:1, needs 4.5:1)

🔧 Expected: Halytic will inject CSS to darken text/buttons

4️⃣ link-underlines - Links Without Underlines

This paragraph has a link with no underline that's hard to distinguish.

🔧 Expected: Halytic will inject CSS to add underlines

⚠️ MEDIUM-RISK (7 rules) - JavaScript Injection Auto-Fixable

5️⃣ link-name - Links Without Text

Empty aria-label link

🔧 Expected: Halytic will inject aria-label via JavaScript

6️⃣ button-name - Buttons Without Text

🔧 Expected: Halytic will inject aria-label via JavaScript

7️⃣ image-alt - Images Without Alt Text

🔧 Expected: Halytic will inject aria-label via JavaScript

8️⃣ form-field-label - Form Fields Without Labels

🔧 Expected: Halytic will inject aria-label via JavaScript

9️⃣ control-name - Custom Controls Without Names

Custom Button (no aria-label)

🔧 Expected: Halytic will inject aria-label via JavaScript

🔟 aria-hidden-focus - Focusable Hidden Elements

🔧 Expected: Halytic will remove aria-hidden or add tabindex="-1"

1️⃣1️⃣ duplicate-id - Multiple Elements Same ID

First element with id="test-duplicate"
Second element with same id="test-duplicate"
Third element with same id="test-duplicate"

🔧 Expected: Halytic will generate unique IDs via JavaScript

❌ HIGH-RISK (5 rules) - Manual Fixes Required (NOT Auto-Fixable)

1️⃣2️⃣ heading-order - Skipped Heading Levels

This H4 skips H3 (bad hierarchy)

📝 Expected: Shows in "Manual Fixes Required" - needs HTML structure changes

1️⃣3️⃣ landmark-one-main - Missing Main Landmark

This page has no <main> element

📝 Expected: Shows in "Manual Fixes Required" - needs <main> element added

1️⃣4️⃣ landmark-unique - Duplicate Landmarks

📝 Expected: Shows in "Manual Fixes Required" - needs unique aria-label on each nav

1️⃣5️⃣ region - Content Not in Landmarks

All content on this page is outside of proper landmark regions.

📝 Expected: Shows in "Manual Fixes Required" - needs semantic HTML structure

1️⃣6️⃣ page-has-heading-one - Missing H1

Note: This page HAS an H1 at the top, so this test may not trigger.

📝 Expected: Shows in "Manual Fixes Required" - needs H1 element added