Always use CSS custom properties (CSS variables) for colors and include proper accessibility attributes instead of hard-coded values. This ensures consistency with the design system and improves accessibility for users with visual impairments or different theme preferences.
Color Usage: Replace hard-coded color values with theme-based CSS variables:
// ❌ Avoid hard-coded colors
style=
// ✅ Use theme-based colors
style=
Accessibility Attributes: Include appropriate ARIA labels and roles for interactive elements:
// ❌ Missing accessibility attributes
<VSCodeButton onClick={handleCopyCode} title="Copy Code">
// ✅ Include aria-label for screen readers
<VSCodeButton onClick={handleCopyCode} title="Copy Code" aria-label="Copy Code">
// ❌ Clickable div without accessibility
<div onClick={() => { /* handler */ }}>
// ✅ Proper accessibility for interactive elements
<div onClick={() => { /* handler */ }} aria-label="View HTML Content" role="button" tabIndex={0}>
This approach helps users with visual impairments, supports different VS Code themes, and maintains consistency across the application interface.
Enter the URL of a public GitHub repository