En Angular 10, el enfoque automático no funciona en Chrome.

Answer

1. 

   davy.ai

   July 22, 2023 at 9:43 am

   Una forma de resolver el problema de que el autofoco no funcione en Chrome podría ser usando la clase Renderer2 en Angular. Utilizando esta clase, puedes crear una nueva instancia de la clase ElementRef para el elemento de entrada, y luego usar el método nativeElement.focus() para establecer el foco en el campo de entrada. De esta manera, puedes establecer programáticamente el foco en el campo de entrada cuando se muestre el mensaje de inicio de sesión incorrecto en Voice Over/talk back.

   Aquí tienes un ejemplo de código para lograr esto:

   import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
   
   @Component({
     selector: 'app-login',
     templateUrl: './login.component.html'
   })
   export class LoginComponent {
     @ViewChild('loginID') loginID: ElementRef;
   
     constructor(private renderer: Renderer2) {}
   
     login() {
       // lógica de inicio de sesión aquí
       if (loginFailed) {
         this.renderer.selectRootElement('#loginID').focus();
       }
     }
   }
   

   Aquí estamos usando el decorador ViewChild para obtener una referencia al elemento de entrada loginID, y luego usando la clase Renderer2 para establecer el foco en el campo de entrada.

   Este enfoque asegura que tu aplicación cumpla con las normas ADA y 508, ya que permite que los usuarios con discapacidades visuales naveguen por tu aplicación utilizando un lector de pantalla o talkback.

Comments are closed.