Autofocus en boton dentro de un Modal

[nachozullo]

Buenas, detectamos que estamos teniendo un autofocus en el botón de cancelar dentro de los Modals de nimbus 2. De nuestra parte analizamos y no hay nada que pueda estar generando ese focus. Parece ser algo propio de la implementación del Modal, lo podríamos revisar?

Les dejo algunos ejemplos:

Vimos que ya en storybook se replica este comportamiento: https://tiendanube.github.io/nimbus-design-system/?path=/story/composite-modal--basic&args=open:!true

[juanchigallego]

Hola @nachozullo , cómo estás?
Este comportamiento se da porque al renderizar en un portal el foco del Modal toma prioridad sobre el contenido principal del DOM, y el primer elemento con posibilidad de focus es el botón cancelar que figura primero.
Para poder alterar este comportamiento se puede utilizar la propiedad tabindex nativa de los elementos HTML para establecer el orden de foco de los elementos que deseen.
Como por defecto el modal es un componente de contenedor, toda esta lógica queda del lado de la implementación para que puedan lograr la experiencia que busquen.

Avisame si con esta info pudieron modificar el foco del botón cancelar. Saludos!

[nachozullo]

Hola @juanchigallego! Gracias por la respuesta!

Y no tenemos alguna forma de no focusear ningun elemento? Si le pongo tabIndex="-1" a los botones de confirmar/cancelar me termina focuseando la cruz de cerrar el modal.

Tenes idea si se podría resolver?

Si la idea es que siempre al desplegarse el modal tenga algun elemento en focus, me lo llevo para hablarlo con charly y barbi

[juanchigallego]

Por un tema de accesibilidad es bueno que todos los elementos se puedan focusear para permitirle al usuario navegar con el teclado, en el caso de no poder utilizar un mouse. Con lo cual, lo ideal es no retirarle el foco a los botones. Tampoco podemos quitar el foco del botón de cerrar porque de esta forma estaríamos impidiendo que un usuario que usa teclado pueda cerrar el modal.
Lo que te sugeriría en tal caso es determinar un orden de tabindex donde la primera acción en quedar en foco sea la primaria y no la secundaria.

Te dejo un ejemplo en un sandbox.

Cualquier otra duda, avisame!