Manejando el foco del teclado - el carousel

Tabindex: Indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado.

Valores de Tabindex:

• Valor negativo(-1): El elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación.
• Valor positivo (>0): Debe poder ser enfocado y su orden relativo es definido por el valor del atributo.
• Valor de 0: Debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.

wow… solo hasta cuando uno mismo empieza a hacer el proyecto se da cuenta la cantidad de cosas que pasan desapercibidas para que la página aparezca aparentemente “sencilla” y de fácil accesibilidad y navegabilidad. Considero que la mayoría, entre ellas yo, nunca imaginamos cuantos cambios se deben hacer, al principio del curso tan solo pensé que era agregar algunas herramientas y listo. Pero hay que revisar línea por línea el código, ahora entiendo porqué se debe tener en cuenta desde el inicio de nuestro proyecto. Me encantó el curso y desde la primera clase me mantuve a la expectativa. Desde hace años tuve la inquietud de reaizar una página accesible pero no sabía todo lo que se debía tener en cuenta y lo había olvidado. Super genial el curso.

Mi explicación a los números y funcionamiento del carrousel es:

Esta programado sumando y restando valores, para mostrar un contenido y sumar o resta dependiendo si se moverá a la izquierda o derecha.

El 0 es el inicial (Proyecto 1,2,3)
El -270 muestra Proyecto 2,3,4
El -540 muestra Proyecto 3,4,5

Cada que va la derecha resta y a la izquierda suma (Según veo en el JavaScript)

👉📖 Artículo de tab index por google developers

Alguna razón específica para que los números del switch sean esos?

El switch dentro del JavaScript, solo mejora en este caso la navegación del carrusel por el teclado. La accesibilidad por mouse se mantiene

Accesibilidad - JS

• Eliminar un elemento usando tabindex="-1"
• setAttribute: Agrega un nuevo atributo.
• remoteAttribute: Elimina un atributo

Si no les funciona, revisen en qué función están metiendo el switch; me pasó que la primera se la puse al clickLeft y la segunda no hallaba dónde meterla, entonces me perdí un poco.

0 es el valor por defecto de tabindex

No es recomendable utilizar tabindex > 0 ya que podría ser difícil ara el usuario saber cual elemento será el siguiente. Podría asignarse a cada uno de los elementos de la pagina en el orden deseado pero no seria mantenible. La mejor practica es tener siempre tab index 0 y que sigan el orden lógico de la pagina y usar el -1 para aquellos que no se muestran visualmente

El valor de tabindex es igual a la cantidad de gente que has matado: nunca debería ser mayor a cero

Una forma mas optima de hacer esto, es crear dos obetos para cada boton que contengan las funciones que va a realizar en cada caso:

const valuesRight = {
	'-270': function () {
		document.querySelector('.project1').setAttribute('tabindex', '-1');
		document.querySelector('.project4').removeAttribute('tabindex');
	},
	'-540': function () {
		document.querySelector('.project2').setAttribute('tabindex', '-1');
		document.querySelector('.project5').removeAttribute('tabindex');
	},
};

const valuesLeft = {
	'-270': function () {
		document.querySelector('.project5').setAttribute('tabindex', '-1');
		document.querySelector('.project2').removeAttribute('tabindex');
	},
	0: function () {
		document.querySelector('.project4').setAttribute('tabindex', '-1');
		document.querySelector('.project1').removeAttribute('tabindex');
	},
};

Asi, luego en cada funcion solo mandamos a llamar el objeto con su propiedad de acuerdo al valor que guarde la variable newValue y como sabemos que nos devolvera una funcion, la ejecutamos, de este modo:

En la funcion clickRight: valuesRight[`${newValue}`]();
En la funcion clickLeft: valuesLeft[`${newValue}`]();

Entiendo que la intención es que la navegación sea igual en teclado y mouse, pero no lo estamos haciendo más complicado en teclado ? No sería más facil para un persona con teclado navegar directamente entre todos los elementos con el Tab, y no ponerla a deslizar el slider cada 3 elementos ?