Cómo utilizar la directiva Angular CDK Trap Focus

Una trampa de enfoque es una característica de accesibilidad muy importante dentro de una aplicación web. En esta publicación, primero lo ayudaré a comprender qué es, luego por qué es importante y, finalmente, le mostraré cómo agregar rápida y fácilmente el concepto dentro de sus aplicaciones Angular cuando sea necesario. Y es bastante fácil gracias a Angular CDK. Muy bien, vayamos a ello.

La accesibilidad puede ser un poco difícil de entender o incluso pensar en ella si eres alguien que puede ver, oír y utilizar la web fácilmente con diferentes dispositivos, por lo que también puede ser fácil crear cosas que no funcionen bien para aquellos que no poder.

¿Qué es una trampa de enfoque?

Una trampa de enfoque es una característica que ayuda a mejorar las experiencias de estas personas. Es una forma de gestionar el enfoque del usuario dentro de un contenedor determinado.

Tomemos, por ejemplo, un modal. Si un usuario abre un modal sin administrar el foco, cuando comienza a navegar a través del teclado usando la tecla tab, los elementos detrás del modal continúan recibiendo el foco. Esto es extraño y no es lo que el usuario esperaría, ¿verdad? Necesitamos enfocarlos programáticamente dentro del modal.

Pero esto no es suficiente; Si nos detenemos aquí, mientras avanzamos por el modal, eventualmente pasaremos por todos los elementos enfocables y luego volveremos a enfocar los elementos dentro del documento original detrás del modal nuevamente.

Lo que debemos hacer en su lugar es atrapar el foco para que cuando el usuario se centre en el último elemento del modal, el foco se vuelva a colocar en el primer elemento enfocable del modal en la siguiente pestaña.

Bien, ahora que sabemos qué es una trampa de enfoque, probablemente estemos empezando a darnos cuenta de que habrá algún esfuerzo para crear esta funcionalidad, ¿verdad?

Bueno, no dentro de Angular. Con el CDK, esto es bastante fácil usando la directiva cdkTrapFocus del A11yModule .

La directiva Angular cdkTrapFocus

Veamos un ejemplo. Aquí tenemos una aplicación web para la marca de zapatos Vans.

Arriba, en la parte superior, tenemos un botón de registro. Cuando hacemos clic en él y luego tabulamos, podemos ver que el foco se mueve alrededor de los elementos en el fondo.

No es lo que queremos, ¿verdad?

Bien, agreguemos cdkTrapFocus . Lo primero que debemos hacer para usarlo es importar el A11yModule .

registrarse-modal.component.ts

 import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }

Para aquellos de ustedes que no están familiarizados con este acrónimo, Ally es una abreviatura de la palabra accesibilidad. Proviene del concepto de que la palabra comienza con una A, termina con una Y y hay once caracteres en el medio.

Angular CDK tiene varias funciones de accesibilidad dentro de su módulo de accesibilidad, y la directiva cdkTrapFocus es una de ellas.

Entonces, una vez que lo hayamos importado, ya podremos usarlo dentro de la plantilla. Solo necesitamos agregarlo a un elemento que envuelva nuestro formulario.

registro-modal.component.html

 <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 

Proporcionar un enfoque en la inicialización con cdkTrapFocusAutoCapture @Input

Buenas noticias, la directiva cdkTrapFocus tiene una función de enfoque automático incorporada. Podemos usar cdkTrapFocusAutoCapture @Input . Esta entrada enfocará automáticamente el primer elemento enfocable dentro de la directiva cuando se inicialice. El valor predeterminado es falso, por lo que debemos proporcionar un valor de verdadero.

 <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>

Ahora, cuando abrimos el modal, el campo de nombre está correctamente enfocado cuando se abre. Y, a medida que avanzamos, cuando lleguemos al botón de cerrar, regresaremos al campo de nombre. Además, si presionamos shift + tab para navegar hacia atrás, iremos en orden inverso sin salir del modal.

Por lo tanto, no solo es muy útil para todos los usuarios, sino que también es muy fácil de implementar.

Una última cosa a tener en cuenta, la directiva trap focus realiza un seguimiento del último elemento enfocado antes de su inicialización, por lo que cuando cerramos el modal, el foco vuelve al botón que lo abrió.

Bien, acabamos de ahorrar un montón de trabajo e hicimos nuestro modal más accesible.

¿Quieres verlo en acción?

Consulte el código de demostración y los ejemplos de estas técnicas en el ejemplo de stackblitz a continuación. Si tienes alguna pregunta o idea, no dudes en dejar un comentario.