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)
37 lines
2.0 KiB
Markdown
37 lines
2.0 KiB
Markdown
# 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)
|