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.   https://youtu.be/JKHAjYJ5T2o?embedable=true  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   del   . cdkTrapFocus 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   . Lo primero que debemos hacer para usarlo es importar el   . cdkTrapFocus 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   es una de ellas. cdkTrapFocus  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   tiene una función de enfoque automático incorporada. Podemos usar     . 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. cdkTrapFocus cdkTrapFocusAutoCapture @Input   <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   +   para navegar hacia atrás, iremos en orden inverso sin salir del modal.  shift tab  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.   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

Buy Me a Coffee

Este audio es producido en el idioma original de la historia!

Cómo utilizar la directiva Angular CDK Trap Focus

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Telegram: el puente de Crypto Island hacia el continente

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Telegram: el puente de Crypto Island hacia el continente

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps