Tutoriales
Claude Opus 5.5: reparar el teclado de un carrusel de productos
Entrega a Claude Opus 5.5 el DOM, el código de interacción y un contrato de estados explícito.
Hazlo con Panelly
De la inspiración al anuncio de tu producto
Empieza con una imagen y una idea. Crea un anuncio de cuatro viñetas, un conjunto de materiales o un vídeo con Panelly.
Crear con Panelly Edita la propuesta antes de generar.
Entrega a Claude Opus 5.5 el DOM, el código de interacción y un contrato de estados explícito. Pide revisar foco y rotación juntos. Añadir un listener a las flechas no resuelve enlaces invisibles que reciben foco ni una rotación que vuelve mientras alguien lee.
Observa el fallo antes de cambiar el componente
Una pregunta de desarrollo de 2016 describe flechas que solo funcionan con ratón. Es un problema concreto de una biblioteca antigua, no un parche moderno recomendado. Usa el patrón de carrusel de W3C: Tab normal, controles nativos cuando sea posible y control de rotación antes del contenido móvil.
| Síntoma | Ámbito de reparación | Verificar |
|---|---|---|
| Tab llega a una compra invisible | Exposición de diapositivas inactivas | Solo el contenido activo entra en Tab normal |
| Siguiente mueve el foco a la imagen | Activación del control | El foco permanece en Siguiente |
| La rotación vuelve al salir el foco | Estado de rotación | Hace falta reinicio explícito |
| Hover pausa pero el foco no | Disparadores de pausa | Ambas interacciones detienen |
No interceptes todas las flechas de la página. Un carrusel básico Anterior/Siguiente y un selector de pestañas tienen contratos distintos. Decide el patrón antes de generar código.
Conserva el estado de pausa
En una galería ilustrativa de cuatro diapositivas con dos enlaces cada una, desplazar tres fuera de pantalla puede dejar seis enlaces invisibles en Tab. Es una cuenta del ejemplo, no una auditoría real. Ocultar visualmente o añadir solo `aria-hidden` no arregla todo el foco. Utiliza una estrategia de renderizado o inactividad que retire los controles inactivos del teclado y exponga correctamente la diapositiva activa.
Define `activeIndex` y si la rotación está en marcha. La entrada del foco detiene; Siguiente cambia el índice sin moverlo. Salir no reinicia automáticamente. Una acción explícita de Inicio puede reanudar según el diseño; una entrada posterior del foco vuelve a detener. Atiende también hover. En este ejemplo, la preferencia de movimiento reducido desactiva inicialmente la rotación automática; es una decisión adicional, no un sustituto de los controles de pausa.
Prompt completo de revisión
Revisa DOM, CSS y manejadores de estado del carrusel. Usa un patrón básico Anterior/Siguiente, no pestañas salvo que el diseño existente las necesite. Conserva orden, enlaces, IDs de producto y variante seleccionada.
Enumera los controles enfocables de diapositivas activas e inactivas. En el ejemplo de 4 diapositivas/2 enlaces, identifica los seis enlaces inactivos que deben salir del Tab normal. No trates aria-hidden por sí solo como solución de teclado.
Usa botones nativos para Anterior, Siguiente e Iniciar/Detener. Mantén el foco en el control activado. Detén al entrar el foco y con hover; no reinicies automáticamente al salir. Exige Inicio explícito. En este diseño desactiva inicialmente la rotación automática con movimiento reducido.
Devuelve el parche mínimo, tabla de transiciones y pruebas. Comprueba Tab en ambos sentidos, Enter/Space, Siguiente repetido, vuelta en extremos, pausa por foco, reinicio explícito e inicio con movimiento reducido. Separa verificaciones ejecutadas de propuestas. No afirmes certificar la accesibilidad del sitio entero.Es una tarea hipotética acotada conforme a la guía oficial de prompts. Un pequeño ejemplo local de estados verifica transiciones propuestas, no el DOM, lector de pantalla ni temporizador reales.
Comprueba el componente entregado
Empieza fuera del carrusel y recórrelo con Tab en ambos sentidos. Comprueba foco visible y nombres claros; activa Siguiente repetidamente y verifica que el foco no desaparezca. Pausa sobre una descripción larga y espera más del intervalo normal. Prueba aparte el reinicio explícito. Repite con movimiento reducido y el diseño real de pantalla pequeña. Registra navegador y secuencia observada, no solo una captura correcta.
**¿Cada diapositiva necesita navegación con flechas?** No. Sigue el patrón elegido; los botones nativos ya admiten activación normal.
**¿Pueden los enlaces inactivos conservar `tabindex=0`?** No si están fuera de pantalla y no disponibles. Alinea disponibilidad visual y exposición al teclado.
Prepara las imágenes en Panelly Studio y prueba el carrusel por separado. El espaciado táctil trata geometría, no demuestra comportamiento del teclado. No se presupone integración de Opus en Panelly.
