ClickableList
Une rangée cliquable qui mène ailleurs : une tête facultative, un libellé, un chevron. C'est un bouton, pas un lien, et il s'étire sur toute la largeur qu'on lui laisse.
Utilisation
import { ClickableList, ListContainer } from "@monstera/ui"Tête de rangée
La tête est soit un logo de marque, posé dans un carré navy de 32 px, soit une icône nue de 24 px, soit rien. Le chevron de fin, lui, est toujours là. ListContainer empile les rangées, ici resserrées à 4 px.
Sélection
selected garde la rangée retenue sur un fond cyan clair, identique en clair comme en sombre, et pose aria-current pour les lecteurs d'écran. Le composant ne retient rien : c'est le parent qui décide quelle rangée porte selected.
Accessibilité
Posées dans un ListContainer, les rangées forment une liste : un lecteur d'écran annonce le nombre d'éléments, puis la position de chacun. Chaque rangée est enveloppée dans un élément de liste sans boîte (display: contents), la mise en page ne bouge pas. Des rangées posées hors d'un ListContainer ne sont pas annoncées comme une liste.
Le libellé d'une rangée passe à la ligne quand il ne tient pas, plutôt que d'être tronqué : rien n'est perdu à grande taille de texte.
API
ClickableList
Prop
Type
ListContainer
Prop
Type