safari - not - tabindex negative

Safari ignorando tabindex

Question

Tengo 2 botones al lado de un cuadro de texto y otro cuadro de texto después de los 2 botones. El tabindex para el primer cuadro de texto es 1000, el primer botón es 1001 y el segundo es 1002. El segundo cuadro de texto tiene un tabindex de 1003.

Cuando presiono tab, el tabindex funciona bien en todos los navegadores, excepto en Safari, donde se mueve inmediatamente del primer cuadro de texto al segundo cuadro de texto, aunque el tabindex se ha configurado correctamente. ¿Alguna idea sobre cómo prevenir este problema?

Answer 1

Encontré el mismo problema y tuve que implementar la navegación de pestañas programáticamente. Afortunadamente, encontré este plugin jquery tabbable https://github.com/marklagendijk/jQuery.tabbable y lo usé bien, aquí está

require(''../../node_modules/jquery.tabbable/jquery.tabbable'');
$(document).ready(() => {
$(document).keydown((event) => {
if (event.keyCode === 9) {
window.$.tabNext();
event.preventDefault();
}
});
});

Answer 2

Hacer accesible Safari y Mac:

Prueba en una Mac: Preferencias del sistema -> Teclado -> Abreviaturas (pestaña) -> Acceso completo al teclado -> Todos los controles

Para que Tabbing funcione en Safari: Preferencias -> Avanzado -> Presione la pestaña para resaltar cada elemento en una página (verifique esto)

Answer 3

Intenté lo siguiente con Safari 5.1.5. No sé cómo funciona con versiones anteriores:

Cuando "resaltar cada elemento en una página" (ver respuesta por graphicdivine) está deshabilitado, puede usar esa función presionando Opción (alt) + tabulación.

Si no lo hace (y la opción está deshabilitada), Safari tabulará por defecto todos los campos de formulario (como input, textarea, select ...). Para este campo, también aceptará / considerará un tabindex. Primero, tabulará todos los elementos del formulario con un tabindex (en el orden de los índices dados) y luego a través del resto de los elementos del formulario en el orden de su definición en HTML.

Entonces, si define un tabindex = "1" (o 1001) y "3" (o 1003) para dos elementos de entrada, Safari primero enfocará estos campos y luego los demás.

Answer 4

Por defecto, el acceso a pestañas está deshabilitado en safari (!). Para habilitarlo, seleccione "Preferencias> Avanzado> Presione la pestaña para resaltar cada elemento en una página".

Answer 5

Si estás escribiendo tu propia página web, arreglaría escribir algo con un poco de jquery / javascript. Esto es lo que he usado en el mío.

El inconveniente es que evita el comportamiento predeterminado de la tecla de tabulación en la página, lo que puede ser un problema mayor para la accesibilidad en algunas situaciones. Pero lo dudo.

var Tab = {};
Tab.i = 1,
Tab.items = 0;
function fixTabulation () {
/* This can be used to auto-assign tab-indexes, or
# commented out if it manual tab-indexes have
# already been assigned.
*/
$(''input, select, textarea'').each(function(){
$(this).attr(''tabindex'', Tab.i);
Tab.i++;
Tab.items++;
});
Tab.i = 0;
/* We need to listen for any forward or backward Tab
# key event tell the page where to focus next.
*/
$(document).on({
''keydown'' : function(e) {
if (navigator.appVersion.match("Safari")) {
if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
e.preventDefault();
Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
$(''input[tabindex="'' + Tab.i + ''"], select[tabindex="'' + Tab.i + ''"], textarea[tabindex="'' + Tab.i + ''"]'').not(''input[type="hidden"]'').focus();
}
if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
e.preventDefault();
Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
$(''input[tabindex="'' + Tab.i + ''"], select[tabindex="'' + Tab.i + ''"], textarea[tabindex="'' + Tab.i + ''"]'').not(''input[type="hidden"]'').focus();
}
}
}
});
/* We need to update Tab.i if someone clicks into
# a different part of the form. This allows us
# to keep tabbing from the newly clicked input
*/
$(''input[tabindex], select[tabindex], textarea[tabindex]'').not(''input[type="hidden"]'').focus(function(e) {
Tab.i = $(this).attr(''tabindex'');
console.log(Tab.i);
});
}
$(document).ready(function() {
fixTabulation();
});

Esta no es la solución perfecta, pero es mucho mejor que decirle a todos tus usuarios que cambien sus configuraciones de Safari en System Prefs, lol.