list-children-valid
Les listes ne doivent contenir directement que des éléments de liste
Vérifie que les éléments <ul>/<ol> n’ont que des <li>, <script> ou <template> comme enfants directs.
Applicabilité. S’applique aux éléments <ul>/<ol> qui ont au moins un enfant élément direct ou du texte non blanc directement à l’intérieur, et dont le rôle est list : pas d’attribut role, un attribut role qui se résout en list (son premier jeton désignant un rôle connu, sans tenir compte de la casse), ou un attribut qui ne nomme aucun rôle ARIA connu. Un <ul>/<ol> doté d’un autre rôle (listbox, menubar, tablist, none, ...) n’est pas une liste : ses enfants suivent alors les règles de ce rôle.
Attendu. Chaque élément enfant direct est un <li>, un <script> ou un <template>, SAUF s’il a un rôle explicite (le premier jeton de son attribut role désignant un rôle connu, sans tenir compte de la casse), auquel cas le rôle explicite l’emporte entièrement sur la balise : un enfant n’est valide que si ce rôle est « listitem » (ainsi <li role="presentation">/<li role="menuitem"> sont invalides malgré la balise <li> et, à l’inverse, un élément autre que <li> doté explicitement de role="listitem" ou role="foo LISTITEM" est valide). Un attribut role qui ne nomme aucun rôle connu laisse la balise décider. Un <div> d’enrobage utilisé pour la mise en forme (sans aucun rôle) casse toujours la sémantique de la liste, comme auparavant. Du texte non blanc placé directement dans la liste est aussi un enfant invalide : HTML n’y autorise que des <li> et des éléments de prise en charge des scripts, et ce texte n’appartient à aucun élément de liste.
Ce que rapporte un constat.
reasonCode:LIST_ITEM_ROLE_OVERRIDDENlorsque chaque enfant qui n’a pas sa place est un <li> dont le rôle explicite remplace listitem (<li role="presentation">,role="none",role="group"...), etLIST_INVALID_CHILDpour tout autre enfant : un élément qui n’est pas un <li>, ou du texte. Une liste qui a les deux estLIST_INVALID_CHILD.element: le nom de balise de la liste,ulouol.invalidChildren: les enfants qui n’ont pas leur place dans la liste, un nom de balise par enfant (#textpour du texte placé directement à l’intérieur).overriddenRoles: avecLIST_ITEM_ROLE_OVERRIDDEN, le rôle de chacun de ces <li>, dans l’ordre.elementest un contrat stable, contrairement au reste dedata.details.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<ul><li>Apple</li><li>Banana</li></ul>
Les seuls enfants directs de <ul> sont des <li>.
<ul><li>Elderberry</li><div>wrapper</div></ul>
Un <div> est un enfant direct de <ul>, à côté des <li>.