@holmdigital/components v2.7.0

React-komponenter som uppfyller WCAG och EN 301 549 som standard

@holmdigital/components är ett React-komponentbibliotek med 29 UI-komponenter byggda för regelefterlevnad. EN 301 549 är den europeiska tekniska standarden för digital tillgänglighet som EAA och DOS-lagen hänvisar till. ARIA-attribut, tangentbordsnavigering och färgkontrast är inte tillägg du lägger till efteråt. De är inbyggda från start.

Det är skillnaden mot de flesta komponentbibliotek på marknaden. Du slipper inte köpa tillgänglighet separat, retrofita befintliga komponenter eller göra om halvfärdiga implementationer inför en DIGG-tillsyn. Du importerar en komponent och den är compliant.

Totalt 9 874 nedladdningar för alla tre paket

Se källkoden på GitHub

Se på npmjs.com

Vad ingår i biblioteket

Lista över komponenter

29 komponenter för de vanligaste UI-mönstren: formulärfält, knappar, modaler, navigationsmenyer, tabeller, tooltips, datumväljare och mer.

Formulär

FormField
Select
Checkbox
RadioGroup
DatePicker

Navigation

NavigationMenu
Breadcrumb
Tabs
Pagination
SkipLink

Feedback och overlay

Modal
Tooltip
Alert
Toast
LoadingSpinner

Vad "compliant by default" innebär

Varje komponent har inbyggt stöd för:

✓ Korrekta ARIA-roller och attribut (inga glömda aria-label, inga saknade role)
✓ Tangentbordsnavigering som fungerar utan mus (Tab, Enter, Escape, piltangenter)
✓ Kontrast som uppfyller WCAG 2.2 AA (minst 4,5:1 för text, 3:1 för stora element)
✓ Stöd för prefers-reduced-motion (rörelsekänsliga användare slipper animationer de inte vill ha)
✓ Focus management i modaler och interaktiva widgets

Allt detta testas automatiskt mot standards som styr compliance vid varje release. Biblioteket har 162 tester, alla gröna.

Design system och UI

Tillgängliga komponenter som standard.

Biblioteket uppfyller EN 301 549 och stödjer 13 språklokaler. Det fungerar med React 18 och React 19, stödjer både App Router och Pages Router i Next.js och är fullt typat i TypeScript.

29 komponenter

Formulär, modaler, navigationsmenyer, tabeller.

EN 301 549

Konformans från dag ett, ingen eftermontering.

TypeScript

Typat i minsta detalj för säker utveckling.

React 18/19

Stöd för både App Router och Pages Router.

Nyheter i v2.7.0: WCAG 2.1 AA-konformans

Version 2.7.0 stänger 14 falsk-konformans-luckor som hittades i en post-2.3.0-granskning. Flera komponenter annonserade WCAG-konformans som koden inte levererade. Alla blockerande fynd är nu åtgärdade.

Nya delade hooks

Två nya hooks i src/_hooks/ som löser focus och scroll för staplade dialogs och toasts:

✓ useFocusTrap: fångar fokus i containern, återställer till öppnaren vid stängning
✓ useScrollLock: referensräknad singleton, staplade dialogs komponeras säkert

Dialog och Modal

✓ initialFocusRef: styr vilket element som får fokus vid öppning
✓ closeOnBackdropClick och closeOnEscape props (standard true)
✓ variant="alert" ger nu korrekt role="alertdialog"
✓ aria-modal="true" tillagd

Toast

✓ Error-toasts är sticky som standard (Infinity duration)
✓ Pausar vid hover och fokus, återupptar vid leave/blur
✓ Läshastighetsanpassad duration för icke-error-toasts
✓ Severity-aware aria-live: alert/assertive för error/warning, status/polite för info/success

NavigationMenu och övriga

✓ pattern="menubar" prop aktiverar W3C APG Menubar-kontrakt
✓ Combobox och Select: fullständigt APG-tangentbordskontrakt (Home, End, PageUp/Down)
✓ Tooltip: Escape-avvisning med korrekt stopPropagation, hover-delay 100 ms
✓ 162 tester totalt, alla gröna

Kom igång

Installation

npm install @holmdigital/components

Grundläggande användning

Komponenterna är utformade för att fungera i alla vanliga React-setup utan att kräva specifika CSS-ramverk eller temabibliotek. Du styr utseendet med dina egna stilar.

// Importera komponenter

import { FormField, Modal, NavigationMenu } from '@holmdigital/components'

// Korrekt ARIA, kontrast och tangentbordsnavigering är inbyggt.

// Du behöver inte konfigurera det.

<FormField

label="E-postadress"

type="email"

required

helpText="Vi skickar bekräftelsen hit."

Tillgänglighet i detalj

ARIA och tangentbordsnavigering

ARIA (Accessible Rich Internet Applications) är den tekniska standarden för hur hjälpmedel läser gränssnitt. Varje komponent implementerar korrekt ARIA-semantik, inklusive roller, tillstånd och egenskaper som skärmläsare behöver för att förstå och kommunicera gränssnittet till användaren.

Kontrastkrav

Från och med 28 juni 2025 gäller EAA för privata aktörer i Sverige. Det innebär att produkter och tjänster riktade till konsumenter måste uppfylla tillgänglighetskraven. För webbapplikationer och e-handel gäller EN 301 549 som teknisk standard.

Att bygga med components från start innebär att du inte behöver göra om arbetet när tillsynen kommer. Varje komponent är dokumenterat compliant mot EN 301 549 och WCAG 2.2 AA (uppfyller också 2.1 AA-kraven i EAA).

Öppen källkod och licens

Paketet är open source under MIT-licens. Källkoden finns på GitHub och bidrag välkomnas.

Se källkoden på GitHub

Se på npmjs.com

Relaterade paket

Components är byggda mot standards som styr compliance, regelverket som mappar varje komponentkrav mot gällande lag. Vill du automatisera testning av din webbplats i CI/CD finns engine som skannar live-sidor och kopplar felen till lagrummen.

Utforska biblioteket och bidra på GitHub eller kontakta oss om du behöver hjälp med implementation i ditt projekt.

Börja bygga tillgängligt idag.

Komponentbiblioteket är gratis. Behöver du hjälp med implementationen hjälper vi dig.

Testa tillgängligheten gratis

Gå till GitHub