A production-ready component library built with React and TypeScript, focusing on strict Web Accessibility (WCAG standards).
npm install @carol8fml/a11y-coreThis package provides the core component library for a Web Accessibility-focused (WCAG) design system and automated code quality.




- ✅ WCAG 2.1 Level AA Compliant - All components meet accessibility standards
- ✅ Full Keyboard Navigation - Complete keyboard support for all interactive elements
- ✅ Screen Reader Optimized - Proper ARIA attributes and semantic HTML
- ✅ Internationalization Ready - All text strings are configurable via props
- ✅ TypeScript - Fully typed with strict type checking
- ✅ Zero Accessibility Violations - Tested with jest-axe (151 tests passing)
``bash`
npm install @carol8fml/a11y-core
`tsx
import { Button } from '@carol8fml/a11y-core';
import '@carol8fml/a11y-core/dist/style.css';
function App() {
return ;
}
`
React: 18.2.0+ (uses useId hook)
TypeScript: 5.3+ (recommended)
Browsers: Modern browsers with ES6+ support
Compatible with: Next.js, Vite, Create React App, Remix, Gatsby, and any React 18.2.0+ project.
This library is WCAG 2.1 Level AA compliant. All components meet accessibility standards including:
- ✅ Keyboard navigation (2.1.1, 2.1.2)
- ✅ Focus management (2.4.3, 2.4.7)
- ✅ Semantic HTML and ARIA (1.3.1, 4.1.2)
- ✅ Error identification (3.3.1, 3.3.2)
- ✅ Status messages (4.1.3)
Verification: All components tested with jest-axe - 0 accessibility violations.
All text strings are configurable via props for full i18n support:
`tsx
// TextField
hidePasswordLabel="Ocultar senha"
/>
// Modal
closeButtonSrText="Fechar"
>
defaultConfirmLabel="Confirmar"
/>
// Toast
closeButtonSrText="Fechar"
/>
// Link
External Link
`
Note: English fallbacks provided for backward compatibility.
- Button - Accessible button with variants
- Link - Accessible link with external link support
- TextField - Text input with label, error, and helper text
- Checkbox - Checkbox with label, error, and indeterminate state
- Switch - Toggle switch with keyboard support
- Modal - Accessible modal with focus trap
- Toast - Accessible toast notifications
- Storybook: Live Documentation
- Components: See Storybook for all component APIs and examples
`tsx`
`tsx`
type="email"
error="Email is required"
helperText="Enter your email address"
/>
`tsx
const [isOpen, setIsOpen] = useState(false);
Modal content
confirmButton={{ label: 'Confirm', onClick: handleConfirm }}
/>
`
`tsx
import { ToastContainer, useToast } from '@carol8fml/a11y-core';
function App() {
const { toasts, addToast, removeToast } = useToast();
return (
<>
onClick={() =>
addToast({
type: 'success',
title: 'Success!',
description: 'Operation completed',
})
}
>
Show Toast
>
);
}
`
| Technology | Purpose |
| :--------------------------------- | :------------------------------------------------ |
| React 18 | Core framework for building components |
| TypeScript | Type safety and developer experience |
| CSS Modules | Scoped styles to prevent conflicts |
| CVA (Class Variance Authority) | Type-safe component variants management |
| Vitest | Fast unit and integration testing |
| React Testing Library | User-centric component testing |
| Jest-Axe | Automated accessibility testing (WCAG compliance) |
| Storybook | Component documentation and visual testing |
| Vite | Fast build tool and development server |
| ESLint | Code quality and accessibility linting |
| Prettier | Code formatting consistency |
| Husky | Git hooks for pre-commit quality checks |
| Concept | Approach |
| :------------------- | :--------------------------------------------------------- |
| Accessibility | Jest-Axe in CI/CD - Automated tests ensure WCAG compliance |
| CSS Architecture | CSS Modules + CVA - Scoped styles with type-safe variants |
| Type Safety | TypeScript Strict Mode - Full type coverage |
| Testing | Vitest + RTL + Jest-Axe - 151 tests, 0 violations |
`bashClone and install
git clone https://github.com/carol8fml/a11y-core.git
cd a11y-core
npm install
MIT License
Carolina Gonçalves