Bienvenides a una nueva entrada de mi sección dedicada a realizar componentes reutilizables y, sobre todo, accesibles. En esta ocasión vamos a aprender cómo utilizar la etiqueta HTML details para realizar un accordion o acordión.
Repositorio: https://github.com/micaavigliano/accordion
Proyecto: https://accordion-five-sandy.vercel.app/
Para que nuestro accordion sea accesible debemos tener en cuenta los siguientes puntos:
- cuando el foco esta en el header del accordion debe poder colapsarse y expandirse presionando las teclas
enter
ospace
- al presionar
tab
el foco se mueve al siguiente accordion o al siguiente elemento interactivo dentro del accordion - al presionar
shift + tab
el foco se mueve al elemente interactivo anterior - el screen reader o lector de pantalla debe anunciar el estado del elemento, es decir, si esta colapsado o expandido. También debe anunciar su nombre accesible.
La etiqueta details
nos ayudará a pasar todos estos puntos, ya que de por sí es accesible de manera nativa.
¿Cómo utilizamos la etiqueta details
?
La etiqueta details
es una etiqueta nativa de HTML de estructura que se utiliza para crear un elemento que puedo ser expandido o colapsado. Dentro de esta etiqueta vamos a encontrar la etiqueta summary
que se utiliza como encabezado que actúa como el control para expandir o colapsar el contenido. Por último, el contenido a mostrar se coloca después de la etiqueta summary
y podrá ser cualquier elemento válido de HTML.
<details>
<summary>Mostrar más</summary>
<p>contenido</p>
</details>
Ahora que ya aprendimos cómo se conforma y para qué sirve la etiqueta details
vamos a realizar nuestro componente reutilizable.
Primero, vamos a hablar sobre las propiedades que el componente va a recibir:
interface AccordionProps {
title: string;
children: ReactNode | string;
icon: ReactNode | string;
name?: string;
}
-
title
será nuestro encabezado dentro de la etiquetasummary
. -
children
será el contenido a mostrar. Puede recibir un string o un ReactNode. -
icon
va a ser el ícono que va a suplantar el ícono nativo que contiene el elemento details. -
name
es opcional y será el valor que va a contener el atributoname
del cual hablaremos a continuación.
Atributo name
La etiqueta details
acepta el atributo name
y se utiliza para, si hay más de una etiqueta details
, que los elementos se comporten como un grupo. Es decir, si un accordion esta abierto y se abre otro, automáticamente el anterior se cierra.
Cómo sacar la flecha nativa del componente
Para poder sacar la flecha nativa tenemos que tener dos reglas en cuenta primero con el selector summary vamos a colocar el list-style: none
para eliminar la flecha en algunos navegadores.
details summary {
cursor: pointer;
position: relative;
list-style: none;
}
Para eliminar la flecha en navegadores como Chrome y Safari vamos a utilizar la propiedad -webkit-details-marker
details summary::-webkit-details-marker {
display: none;
}
¿Cómo anuncian los lectores de pantalla la etiqueta details
?
1) cuando el elemento esta colapsado
2) cuando el elemento esta expandido
y, ¡Listo! Ya con todos estos cambios y cero javascript tenemos un Accordion funcionando y 100% accesible.
Espero que esta información les sirva y comentenme si hay algo en particular que les gustaría aprender sobre accesibilidad o si hay algún componente en particular que les llama la atención para poder trabajar en esta sección.
Muchas gracias por leerme siempre <3
Top comments (0)