Tengo una lista de ofertas, cada una de ellas con un botón de eliminar, que una vez que se hace clic abre un modal con otros 2 botones: eliminar y cancelar.
Cuando se haya abierto el modal, quiero poder tabular en estos 2 botones primero, pero en este momento, la pestaña continúa con los otros elementos que se pueden tabular que están después del botón Eliminar en la fila, eventualmente presionando los botones después de completar la ronda de tabulación.
¿Hay alguna manera de lograr eso?
<section tabIndex="-1" role="dialog" onClick={onCancel}> <section role="document" onClick={(e) => e.stopPropagation()}> <Button tabIndex="0" secondary className={Styles.cancel} onClick={onCancel}> {t("abort")} </Button> <Button tabIndex="0" secondary className={Styles.delete} onClick={onDelete}> {t("deleteModal.CTA")} </Button> </section> </section>La pestaña continúa donde se establece el enfoque. Su código ya incluye tabindex="-1" que permite enfocar el elemento de diálogo después de abrirlo, con .focus() en JavaScript.
Si el contenido del diálogo incluye estructuras semánticas […] entonces es recomendable agregar tabindex="-1" a un elemento estático al comienzo del contenido e inicialmente enfocar ese elemento.
En su caso, el diálogo es realmente simple, y sería más recomendable enfocar el botón principal en lugar del diálogo en sí.
Consulte Diálogo (modal) de la Guía de prácticas de creación de ARIA (APG)
Su diálogo necesita un nombre accesible. Por lo general, se usa un atributo aria-labelledby para hacer referencia al elemento de título del cuadro de diálogo; si no tiene un título visual, puede usar aria-label .
También es importante que establezca una trampa de enfoque en el cuadro de diálogo, lo que significa que uno no puede salir del cuadro de diálogo por medio de una pestaña, sino solo por medio de cerrar. Por lo general, el enfoque vuelve al elemento de diálogo.
El soporte del navegador para el elemento nativo <dialog> mejoró recientemente y podría considerar usarlo.