Vibeset

Galería de paneles

Un acordeón que parece una galería. La cabecera de cada panel es un botón con aria-expanded y aria-controls; lo que enseña al abrirse vive en su región. Un montón de divs que cambian de tamaño con el ratón no le dicen a un lector qué está abierto ni dejan llegar con el tabulador. Siempre hay uno abierto: una galería sin ninguno es una fila de tiras que no enseña nada. Lo cerrado lleva inert para que su enlace salga del tabulador. El ancho se anima con flex-grow de 1 a 6 y el navegador reparte el espacio, así que añadir paneles no obliga a tocar medidas. Y no trae fotos de ningún sitio: cada panel pone la suya o ninguna, porque una galería que pide imágenes a un tercero por defecto filtra las visitas de quien la usa.

Y el original de React Bits: Accordion Gallery

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Accordion Gallery, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para enseñar entre cuatro y seis proyectos, destinos o productos con foto, ocupando poco alto. Con fotos buenas: sin ellas no tiene gracia.

Ojo con

Trae cinco fotos de ejemplo cargadas desde picsum.photos: si no las cambias, tu web pide imágenes a un tercero. Y depende de GSAP, que no es MIT.

Accesibilidad

De las mejor cuidadas: siete señales aria, tres etiquetas, soporte de teclado y movimiento reducido.