AQA-TC — Dashboard

Prompt

- goal: Navegar con teclado tier: flow entry: url: /es/agenda auth: guest steps: - action: navigate target: /es/agenda - action: assert target: see accept + notes for the exact checks and journey accept: - expect_url: //es/agenda/ - expect_visible: main - expect_visible: a.skip-link - expect_visible: nav[aria-label="Navegación principal"] - expect_visible: '#site-search-desktop' - expect_count: selector: nav[aria-label="CALENDARIO DE EVENTOS"] a count: 12 - expect_count: selector: nav[aria-label="CALENDARIO DE EVENTOS"] a[aria-current="true"] count: 1 - expect_url: /.*month=7/ - expect_text: selector: nav[aria-label="CALENDARIO DE EVENTOS"] a[aria-current="true"] text: JULIO - expect_url: //es/agenda$/ - expect_visible: nav[aria-label="CALENDARIO DE EVENTOS"] - expect_visible: nav[aria-label="Todos"] a:has-text("Todos") - expect_visible: nav[aria-label="Todos"] a:has-text("Gastronomía") - expect_url: /.*category=gastronomy/ - expect_visible: nav[aria-label="Todos"] a.border-text-placeholder - expect_count: selector: a[href*="cicle-cinema-fresca"]:focus-visible, a[href*="cicle-cinema"]:focus-visible count: 1 - expect_url: //es/agenda/esdeveniments/.+/ - expect_visible: main h1 notes: 'Journey (original intent): En la página de Agenda, navega usando solo el teclado (Tab, Enter, flechas). Verifica que puedes acceder a todos los controles: cambio de mes, filtros, eventos individuales. Confirma que el foco es visible y sigue un orden lógico. URL-fix: all absolute https://p565.tst.twentic.com URLs converted to relative baseUrl paths; footer/nav absolute href selectors relaxed to href$= suffix match. Keyboard nav; nav[aria-label="CALENDARIO DE EVENTOS"] has 12 month links, one aria-current="true".'

Pla de Test 4 pag · 50 passos · 19 validacions

Pàgines a visitar

/es/agenda Página principal de la Agenda con navegación de 12 meses, 7 filtros de categoría y cuadrícula de eventos del mes actual

/es/agenda?month=7 Vista de julio tras activar el enlace JULIO con Enter desde el teclado

/es/agenda?month=6&category=gastronomy Vista filtrada por Gastronomía tras activar el filtro de categoría con Enter

/es/agenda/esdeveniments/cicle-cinema-fresca Detalle del evento Ciclo de Cine al Aire Libre tras activar un enlace del calendario con Enter

Passos del test

Validacions

El skip link a.skip-link está presente en el DOM como primer elemento focusable de la página (antes del logo) a.skip-link[href='#main']

El skip link es visible (no clipeado) cuando tiene el foco de teclado — verifica la regla CSS .skip-link:focus { clip: auto; ... } a.skip-link

La navegación de meses contiene exactamente 12 enlaces (ENERO a DICIEMBRE) nav[aria-label='CALENDARIO DE EVENTOS'] a

El mes activo (JUNIO) tiene aria-current='true' en la navegación de meses nav[aria-label='CALENDARIO DE EVENTOS'] a[aria-current='true']

El enlace del mes activo JUNIO tiene las clases de indicador visual 'border-2' y 'border-brand' nav[aria-label='CALENDARIO DE EVENTOS'] a[aria-current='true']

Tras navegar a ?month=7 con Enter, el enlace JULIO tiene aria-current='true' y el enlace JUNIO ya no lo tiene nav[aria-label='CALENDARIO DE EVENTOS'] a[aria-current='true'][href='?month=7']

La navegación de categorías contiene exactamente 7 filtros: Todos, Gastronomía, Naturaleza y deporte, Cultura y espectáculos, Ferias y mercados, Cursos y talleres, Otros nav[aria-label='Todos'] a

El filtro activo 'Todos' tiene clase visual 'border-text-placeholder' (borde visible) cuando ninguna categoría está seleccionada nav[aria-label='Todos'] a[href='?month=6'].border-text-placeholder

Los filtros de categoría NO tienen atributo aria-current — gap de accesibilidad: el estado activo del filtro solo se comunica visualmente (borde CSS), sin indicador semántico para lectores de pantalla nav[aria-label='Todos'] a:not([aria-current])

Tras navegar a ?month=6&category=gastronomy, el enlace Gastronomía tiene la clase de estado activo 'border-text-placeholder' nav[aria-label='Todos'] a[href='?month=6&category=gastronomy']

El calendario contiene al menos un enlace de evento focusable en la cuadrícula del mes actual main a[href*='/agenda/esdeveniments/']

El enlace 'Todos los eventos' está presente y es focusable antes del carrusel main a[href*='/agenda/calendari/']

El botón 'Diapositiva anterior' del carrusel está presente y es focusable button[aria-label='Diapositiva anterior']

El botón 'Diapositiva siguiente' del carrusel está presente y es focusable button[aria-label='Diapositiva siguiente']

El orden de tabulación dentro del main es lógico: nav de meses → filtros de categoría → eventos del calendario → enlace Todos los eventos → botón prev carrusel → eventos carrusel → botón next carrusel main#main

El indicador de foco global (outline 2px solid) está definido para todos los elementos interactivos via :focus-visible — verificar en a:focus-visible, button:focus-visible, input:focus-visible nav[aria-label='CALENDARIO DE EVENTOS'] a:first-child

Tras activar con Enter el enlace JULIO desde el teclado, la URL de la página contiene 'month=7' nav[aria-label='CALENDARIO DE EVENTOS'] a[aria-current='true']

Tras activar con Enter el filtro Gastronomía, el calendario muestra únicamente eventos de categoría gastronómica (Ganxotapes de Primavera, Taller de Cocina Marinera) main a[href*='ganxotapes-primavera']

Tras activar con Enter un enlace de evento del calendario, se navega a la URL de detalle del evento (/es/agenda/esdeveniments/{slug}) — confirma que los eventos del calendario son activables por teclado main h1

Historial de validació 1 iteracions

#? FAIL

Navegar con teclado

Prompt

Pla de Test 4 pag · 50 passos · 19 validacions

Historial de validació 1 iteracions

Detalls

Tags

Features Desat!

KPIs

Cost IA

Últimes Execucions