Fix svg-img-alt accessibility violation - lucide-react and icons-pack SVGs

[yamcodes]

Issue

Accessibility tests are currently disabled for the svg-img-alt rule due to violations from third-party SVG libraries.

Problem

Lucide-react and @icons-pack/react-simple-icons SVGs with role="img" are being flagged by axe-core for missing accessible text. However, these SVGs are decorative and are inside buttons/links that already have accessible labels (via aria-label or text content).

Impact: SERIOUS accessibility violation

Location

Affects multiple pages:

• Homepage (/)
• Quickstart page (/docs/quickstart)
• Main docs pages (/docs, /docs/examples, /docs/morphs)
• Integration pages (/docs/integrations/vscode, /docs/integrations/jetbrains)

Test files:

• tooling/playwright-www/tests/homepage.test.ts:216
• tooling/playwright-www/tests/quickstart.test.ts:198
• tooling/playwright-www/tests/docs-navigation.test.ts:208, 236
• tooling/playwright-www/tests/accessibility.test.ts:179, 214

Current Workaround

The rule is temporarily disabled in accessibility tests:

disableRules: ["svg-img-alt"]

Potential Solutions

1. Add aria-hidden: Mark decorative SVGs as aria-hidden="true" since they're inside accessible buttons/links
2. Custom wrapper components: Create wrapper components that properly handle SVG accessibility
3. Remove role="img": If possible, configure libraries to not add role="img" for decorative icons
4. Add aria-label to SVGs: Add descriptive aria-labels directly to the SVG elements (though this may be redundant if parent has label)

Related

This is tracked in accessibility tests with:

// TODO: Fix svg-img-alt - lucide-react and icons-pack SVGs with role="img" inside accessible buttons/links
// These SVGs are decorative and inside buttons/links with accessible labels