Accordion accessible y reutilizable solo con la etiqueta <details> y CSS

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-accessible.netlify.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 o space
• 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 etiqueta <summary>.
• 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 una propiedad opcional que puede usarse para identificar el accordion.

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.

¡Hasta la próxima!
Micaela Avigliano