@holmdigital/components

Prescriptive, accessible React components for regulatory compliance.

Why this package?

Building accessible components from scratch is hard. Ensuring they comply with EN 301 549 and national laws is even harder.

These components are Compliant by Default. They automatically handle:

• ARIA attributes: No need to manually manage aria-expanded, aria-controls, etc.
• Focus Management: Built-in keyboard navigation for modal traps, dropdowns, and menus.
• Contrast: Default styles are tested against WCAG AA/AAA requirements.

Using these components significantly reduces the risk of regulatory violations in your UI.

Installation

npm install @holmdigital/components

Usage

import { Button, FormField, Heading } from '@holmdigital/components';

function App() {
  return (
    <form>
      <Heading level={1}>Contact Us</Heading>
      <FormField 
        label="Email Address" 
        type="email" 
        required 
        autoComplete="email" 
        helpText="We'll never share your email."
      />
      
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </form>
  );
}

Compliance Features

• High Contrast: Default styles meet WCAG AA requirements.
• Keyboard Navigation: Full focus management and visible focus indicators.
• Screen Reader Support: Correct ARIA attributes and labels built-in.

License

MIT © Holm Digital AB