tengo lo siguiente:
class MyTextArea extends React.Component { handleClick = () => { this.focus(); } focus = () => this.ref.focus; handleRef = (component) => { this.ref = component; }; render() { return ( <div className="magicHelper" onClick={this.handleClick}> <textarea></textarea> </div> ); } }Mi CSS:
.magicHelper { width: 100%; height: 100%; } textarea { line-height: 32px; }Necesito esto porque necesito que el marcador de posición del área de texto esté centrado horizontal y verticalmente en la página. Dado que las áreas de texto no pueden centrar verticalmente el texto, necesito mantener corta la altura del área de texto. Por lo tanto, necesito hacer que cuando el usuario haga clic fuera del área de texto, pensando que está haciendo clic en el área de texto, el área de texto se enfoca automáticamente.
Esto está causando un error de ESLint:
"Visible, non-interactive elements with click handlers must have at least one keyboard listener" .
¿Cómo puedo actualizar lo anterior para pasar eslint?
Parece que esta regla es para hacer cumplir los estándares de accesibilidad.
Basado en esto, cambie su código para hacer algo como esto
<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>También podría deshabilitar la regla en eslint, supongo que depende de la preferencia.
de documentos ESLINT:
Enforce onClick va acompañado de al menos uno de los siguientes: onKeyUp, onKeyDown, onKeyPress. La codificación para el teclado es importante para los usuarios con discapacidades físicas que no pueden usar un mouse, compatibilidad con AT y usuarios de lectores de pantalla.
en este caso, puede deshabilitar la regla o actualizar su código. es mejor actualizar su código para cumplir con los estándares web.
class MyTextArea extends React.Component { handleClick = () => { this.focus(); } handleKeyDown = (ev) => { // check keys if you want if (ev.keyCode == 13) { this.focus() } } focus = () => this.ref.focus; handleRef = (component) => { this.ref = component; }; render() { return ( <div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleKeyDown}> <textarea></textarea> </div> ); } }Tengo este tipo de problema al enviar el mensaje de git. Tengo el siguiente código en ese momento.
<span onClick={myHome} className="home__home-header__mybb__mybb-links__ML1" >para evitarlo, utilicé el siguiente atributo en el elemento.
aria-hidden="verdadero"