Tenemos algunos componentes personalizados que se pueden usar para la entrada del usuario ( CustomSelect , SegmentedControl , CustomCheckbox , etc.).
En algunos casos, estos usan internamente la etiqueta html semántica como radiogroup o select , pero en algunos casos, el marcado está completamente escrito usando elementos div y span y la accesibilidad se proporciona usando atributos aria. Para tales implementaciones, ¿hay alguna manera de asociarles un elemento de label , para que se comporten como entradas de forma nativa con comportamiento de etiqueta, o mejor, hay alguna manera de tratarlas como entradas de forma nativa?
Cosas que me vienen a la mente:
¿Hay algún patrón existente para esto?
Tienes que hacer tres cosas:
aria-labelledby . Tenga en cuenta que puede usar un elemento <label> real, pero sería principalmente para un código más legible, por lo que es fácil detectar la etiqueta asociada con el elemento. Lo más probable es que (*) no pueda usar el atributo for del elemento <label> porque el ID especificado debe ser de un " elemento etiquetable ", que se define como:
(*) Puede usar el atributo for si tiene un elemento personalizado con un atributo true form-associated . Se puede usar una <label> en un " elemento personalizado asociado a un formulario "
Consulte https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example .
No he creado un elemento de formulario personalizado antes, pero el documento parece que se puede usar un <label for="ID"> real, en cuyo caso no necesita aria-labelledby o javascript.