Estoy creando una aplicación React que toma la forma de un calendario donde los usuarios deberían poder hacer clic en los días del calendario. Estos días están representados por cuadrados grandes, para que puedan contener información para ese día. Por razones de accesibilidad, usar <button> s parecía ser la opción más inteligente, pero mi investigación ( ¿Por qué un elemento <button> no puede contener un <div>? ) + ( https://www.w3.org/TR/ 2012/WD-html5-20120329/the-button-element.html#the-button-element ) indica que poner divs dentro de los botones no es correcto. La única otra opción que se me ocurre sería convertir los días en <div> s propios, pero hacer que se pueda hacer clic en ellos y darles manualmente funciones de tabIndex y role según corresponda para fines de accesibilidad.
¿Cuál es la etiqueta html o el enfoque correcto para un área en la que se puede hacer clic que también debería contener posiblemente múltiples <div> s dentro de ella?
Puede usar elementos <span> dentro de un <button> y ser HTML válido .
<button> <span>Three Different Spans</span> <span>But Perfectly Valid</span> <span>HTML!</span> </button>Como puede diseñar un lapso de la forma que desee, esto no debería causarle ningún problema.
Sin embargo: si descubre que necesita un área en la que se puede hacer clic (que cree que debería ser un botón, ¡lo que ciertamente suena correcto para un calendario!) requiere varios contenedores, lo más probable es que lo esté diseñando incorrectamente y es posible que deba reconsiderar el diseño. .
Puede recurrir a los pseudoselectores CSS :before y :after para agregar la complejidad que necesita (sin ver el diseño, es difícil dar un consejo sólido).
Si realmente no está seguro, puede agregar una aria-label al elemento <button> y (una vez más, dependiendo del contenido) agregar aria-hidden="true" a todos los elementos internos.
<button aria-label="function of the button, this will be read to screen readers and other assistive tech"> <!-- this should be unnecessary, but depending on the content this is a technique to fix any issues caused by the button content --> <span aria-hidden="true">Three Different Spans</span> <span aria-hidden="true">But Perfectly Valid</span> <span aria-hidden="true">HTML!</span> </button>Puedes envolver el div en un ancla:
<a href="javascript:void(0)"><div>Hello World!</div></a>