edgar.friendly
7bb3ea22da
- Mueve el cambio (36/36 tareas, 4/4 artefactos) a changes/archive/ - Crea las specs principales de boton-flotante-proponer-local, pasarela-proponer-local y proveedores-ubicacion (con Purpose)
2.0 KiB
2.0 KiB
Botón flotante para proponer locales
ADDED Requirements
Requirement: Botón flotante fijo en la esquina inferior derecha
El sistema SHALL mostrar un botón de acción flotante (FAB) fijado en la esquina inferior derecha de la ventana, siempre visible sobre el contenido, tanto en PC como en móvil.
Scenario: Visible en escritorio
- WHEN la página se carga en una pantalla de escritorio
- THEN el botón flotante aparece fijado en la esquina inferior derecha, por encima del resto del contenido
Scenario: Visible en móvil
- WHEN la página se carga o se hace scroll en un dispositivo móvil
- THEN el botón flotante permanece fijo y accesible en la esquina inferior derecha, sin quedar oculto por el contenido ni interferir con la barra inferior existente
Scenario: Reemplazo del botón de cabecera
- WHEN la página se carga
- THEN ya no existe el botón "Proponer local" en la cabecera y el único punto de entrada para proponer un local es el botón flotante
Requirement: Tooltip explicativo al pasar el ratón
El botón flotante SHALL mostrar un tooltip al pasar el ratón por encima (hover) y al recibir foco por teclado, explicando que sirve para añadir un nuevo local.
Scenario: Tooltip en hover
- WHEN el usuario pasa el ratón por encima del botón flotante
- THEN aparece un tooltip con un texto explicativo del tipo "Añade un nuevo local al directorio"
Scenario: Tooltip accesible sin ratón
- WHEN el botón flotante recibe el foco por teclado o se consulta con un lector de pantalla
- THEN el botón expone su propósito mediante
aria-label, de modo que la función sea accesible sin depender del hover
Requirement: El botón abre la pasarela en un modal
El botón flotante SHALL abrir, al pulsarlo, la pasarela de propuesta de local en un modal por encima de la página.
Scenario: Apertura de la pasarela
- WHEN el usuario pulsa el botón flotante
- THEN se abre un modal con la pasarela de propuesta, comenzando por la primera pantalla (Ubicación)