Skip to content

Navegación por teclado en el autocompletar de productos de la pantalla de revisión#27

Merged
erseco merged 1 commit into
mainfrom
copilot/add-keyboard-navigation-autocomplete
May 31, 2026
Merged

Navegación por teclado en el autocompletar de productos de la pantalla de revisión#27
erseco merged 1 commit into
mainfrom
copilot/add-keyboard-navigation-autocomplete

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 22, 2026

Implementa el #26: navegación por teclado en el autocompletar de productos de la pantalla de revisión (la que aparece tras escanear una factura de proveedor).

Qué hace

En cada línea, el campo de producto ahora se maneja por completo con el teclado, sin soltar las manos del teclado al revisar muchas líneas seguidas:

  • Flechas ↑/↓: mueven el resaltado entre las sugerencias, con scroll automático si la lista es larga.
  • Primera sugerencia resaltada por defecto: pulsar Intro elige directamente la mejor coincidencia (útil cuando AiScan ya detectó un emparejamiento claro por SKU).
  • Intro: selecciona la sugerencia resaltada y cierra el desplegable (el foco permanece en el campo).
  • Tabulador: selecciona la sugerencia resaltada y mueve el foco al siguiente campo de la línea (cantidad/precio).
  • Escape: cierra el desplegable sin seleccionar, conservando el texto escrito.
  • Clic con ratón sigue funcionando igual.

Detalles técnicos

  • La lógica de teclado se extrae a una función pura resolveAutocompleteKeyAction() (mapea tecla + estado → acción), con tests unitarios.
  • Accesibilidad completa de tipo listbox: role="listbox"/"option", aria-expanded, aria-activedescendant, aria-selected, aria-controls.
  • Búsqueda con debounce (250 ms) contra el endpoint existente AiScanInvoice?action=search-products, con control de carreras (se ignoran respuestas obsoletas).
  • Se reutiliza la lógica de la insignia/asignación de producto (buildProductMatchBadge / setLineProductMatch) en vez de duplicarla.
  • Corrige de paso un fallo: la búsqueda del modal leía data-field="description" cuando el campo real es descripcion (la descripción llegaba siempre vacía).

Verificación

Closes #26

Copilot AI changed the title [WIP] Add keyboard navigation for product autocomplete in review screen Add keyboard navigation to review-screen product autocomplete Apr 22, 2026
Copilot AI requested a review from erseco April 22, 2026 21:46
@github-actions
Copy link
Copy Markdown

FacturaScripts Playground Preview

Open this PR in FacturaScripts Playground
Try this PR in your browser

This preview is generated automatically for the copilot/add-keyboard-navigation-autocomplete branch and loads the plugin directly from the PR branch ZIP in FacturaScripts Playground.

On the post-scan review screen, the per-line product autocomplete can now
be driven entirely from the keyboard (#26):

- Arrow up/down move the highlight (with auto-scroll), the first suggestion
  is highlighted by default.
- Enter selects the highlighted suggestion; Tab selects it and moves focus
  to the next field; Escape closes the dropdown keeping the typed text.
- Full ARIA listbox semantics (role, aria-activedescendant, aria-selected).

Keyboard logic is extracted into the pure resolveAutocompleteKeyAction()
helper and unit-tested. Also dedupes the product-match badge/assignment
logic and fixes a stale data-field="description" lookup (should be
"descripcion").
@erseco erseco force-pushed the copilot/add-keyboard-navigation-autocomplete branch from f00e7f8 to f35826d Compare May 31, 2026 20:13
@erseco erseco changed the title Add keyboard navigation to review-screen product autocomplete Navegación por teclado en el autocompletar de productos de la pantalla de revisión May 31, 2026
@erseco erseco marked this pull request as ready for review May 31, 2026 20:19
@erseco erseco merged commit 62bf2ee into main May 31, 2026
8 checks passed
@erseco erseco deleted the copilot/add-keyboard-navigation-autocomplete branch May 31, 2026 20:20
erseco added a commit that referenced this pull request May 31, 2026
…S.md (#54)

- Document the live upload -> AI extraction -> review -> import flow (make up,
  port, login, provider selection, fixtures) so the merged features can be
  exercised against a real provider, mirroring the ScheduledMail recipe.
- Add Test/e2e-smoke.php: a non-interactive helper that runs the extraction +
  map + import path over the fixtures and reports invoice/attachment/warnings.
- Fix outdated CI matrix references (8.1-8.4 -> 8.1-8.5 after the 8.5 addition).
- Exclude the dev-only smoke helper from PHPCS, like the other Test/ scripts.

No functional defects were found end-to-end testing today's merged PRs
(#27 keyboard nav, #29 image attachments, #46 stock/purchase data, #48 payment
method, #41 localized warnings, #31 tax-inclusive receipts); this PR only adds
the validation guide, the smoke helper and the doc fixes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Navegación por teclado (flechas y tabulador) en el autocompletar de productos de la pantalla de revisión

2 participants