Aller au contenu
NexusUI
§9.3

Composants

Les primitives viennent de shadcn/ui, construites sur Radix : le comportement clavier, la gestion du focus et les rôles ARIA sont fournis par la primitive, pas réimplémentés. Dix composants Magic UI complètent la couche motion et pattern.

Contrat de présentation

src/components/sections/spec-block.tsx

Le cahier des charges impose que chaque composant montre son apparence, ses variantes, ses états, son comportement responsive et ses règles d'accessibilité. Les variantes et états complets de chaque famille, ainsi que les exemples de code, arrivent avec la page Documentation.

A11y — Chaque bloc ci-dessous déclare sa règle d'accessibilité. Un composant sans règle énoncée n'est pas considéré comme livré.

A

Contrôles

Button

ui/button.tsx

A11y — Élément <button> natif. cursor-pointer global, anneau de focus visible au clavier, état disabled non focusable.

Switch · Checkbox · Radio

ui/switch.tsx, checkbox.tsx, radio-group.tsx

A11y — Chaque contrôle est lié à un <Label> par htmlFor. La zone cliquable inclut le label, ce qui porte la cible tactile au-delà de 24 px.

Input · Select · Slider

ui/input.tsx, select.tsx, slider.tsx

A11y — Le Select Radix gère les flèches, Début/Fin, la recherche au clavier et le retour du focus au déclencheur à la fermeture.

Badge · Avatar · Progress

ui/badge.tsx, avatar.tsx, progress.tsx
ValidéPrévuRejetéNX

A11y — Progress porte role=progressbar et aria-valuenow. Le statut n'est jamais porté par la seule couleur : un mot l'accompagne.

B

Navigation, overlays et feedback

Tabs · Breadcrumb

ui/tabs.tsx, breadcrumb.tsx
Le panneau reçoit le focus après la liste d'onglets.

A11y — Tabs suit le motif ARIA : flèches pour changer d'onglet, Tab pour entrer dans le panneau. Breadcrumb marque la page courante avec aria-current.

Dialog · Tooltip · Toast

ui/dialog.tsx, tooltip.tsx, sonner.tsx

A11y — Le Dialog piège le focus, ferme sur Échap et le rend au déclencheur. Le Tooltip s'ouvre aussi au focus clavier, pas seulement au survol.

Accordion · Alert

ui/accordion.tsx, alert.tsx

A11y — L'en-tête d'accordéon est un bouton portant aria-expanded. L'alerte porte role=alert et son titre précède la description.

États de chargement et vide

ui/skeleton.tsx, card.tsx

Chargement des tokens…

Aucun résultat
Aucun composant ne correspond au filtre. Élargissez la recherche ou réinitialisez les critères.

A11y — Le squelette est aria-hidden et doublé d'un texte de statut en aria-live, sinon le lecteur d'écran n'annonce rien pendant l'attente.

C

Données et motion

Table

ui/table.tsx
Réf.TokenContrasteÉtat
TKN-001--signal-aa4.7:1Validé
TKN-002--ink-muted5.1:1Validé
TKN-003--warning4.6:1Corrigé

A11y — En-têtes <th scope=col>, chiffres en tabular-nums, conteneur défilant horizontalement sous 640 px plutôt qu'un tableau qui déborde.

NumberTicker · TextAnimate

ui/number-ticker.tsx, text-animate.tsx (Magic UI)

0 : 1

Ratio de contraste minimal rejeté par le détecteur.

Le mouvement sert la compréhension, sinon il est retiré.

A11y — Les deux respectent prefers-reduced-motion via la règle globale de motion.css : la valeur finale est rendue immédiatement, jamais un compteur figé à zéro.