Estoy usando la navegación de pestañas de la interfaz de usuario de material de ReactJS. Quiero deshabilitar la navegación de las teclas de flecha de las pestañas en Material UI.
Lo que quiero es navegar usando la tecla Tab y luego, después de presionar Enter, debería abrir la página debajo de esa pestaña entre dos <Tabs\> .
Y luego, después de Entrar, debería navegar el foco dentro de esa página de pestaña usando la tecla Tabulador.
¿Es esto alcanzable? Cómo puedo hacer eso ?
Material UI no proporciona este tipo de funcionalidad para navegar con la tecla de tabulación en lugar de la tecla de flecha.
puede deshabilitar la navegación con la tecla de flecha pero aún se enfoca con la tecla de flecha
puede verificar => https://mui.com/components/tabs/#heading-keyboard-navigation
Como ha dicho correctamente @foramkumar-patel, no es posible desactivar por completo el comportamiento de las teclas de flecha.
Sin embargo, aún puede agregar la tecla de tabulación de navegación.
Todo lo que necesita hacer es agregar la propiedad tabIndex de esta manera:
<Tab tabIndex={0} label="My tab" />Aquí hay un ejemplo de trabajo: https://codesandbox.io/s/basictabs-material-demo-forked-wzs4o?file=/demo.js
Presionar Tabulador avanza, pero en la última pestaña se moverá al siguiente elemento tabulado en una página. Al presionar Shift+Tab se mueve a la pestaña anterior, y fuera de la primera pestaña al elemento anterior que se puede tabular.
Para obtener más información sobre el atributo tabindex , puede consultar aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
Nota : la navegación del teclado (ya sea teclas de flecha o pestañas) no funciona en Safari en macOS