Estaba tratando de hacer un div y todos sus descendientes fuera de foco. Usé un tabIndex -1 en el div raíz. Pero eso estaba haciendo que el foco se moviera a su primer hijo enfocable. (El comportamiento predeterminado) ¿Hay alguna solución para este problema?
Código de ejemplo
const SomeFunctionComponent = () => { // ... some logic ... const someTrustedHtml = `<p>Hello <a href="stackoverflow.com">World!</a></p>`; const content = React.createElement("div", { className: "some class name", dangerouslySetInnerHTML: { __html: someTrustedHtml; }, tabIndex: -1, /* "tabindex": -1 does not work */ // None of these options helped either // "data-is-focusable": false, // "aria-hidden": true, // disabled: true, // role: "presentation" }); // ... more logic ... return ( <div> {content} <button onClick={() => console.log("hello world")}></button> {/* some tab focusable elements */} </div> ); } comportamiento esperado: cuando SomeFunctionComponent obtiene el foco, el foco se movería al botón
Comportamiento real: el foco va al enlace en DangerlySetInnerHtml
tabindex no es heredable. Debe configurarlo en cada elemento que sea enfocable de forma nativa.
Curiosamente, la especificación dice que establecerlo en -1 no hace que un elemento no se pueda enfocar, pero lo uso todo el tiempo y funciona en todos los navegadores.
Tenga en cuenta que el atributo tabindex no se puede usar para hacer que un elemento no se pueda enfocar. La única forma en que el autor de una página puede hacerlo es deshabilitando el elemento o haciéndolo inerte.
Como han dicho otros, tabindex no es heredable. Sin embargo, ¿podría una trampa de enfoque ayudarlo a lograr algo similar, quizás de una manera ligeramente diferente? Las trampas de enfoque hacen lo que parecen: encierran el foco para permanecer dentro de un elemento y sus descendientes. Un poco lo contrario de lo que parece que estabas tratando de hacer, pero puede ser de ayuda. https://github.com/focus-trampa/focus-trampa
No hay una solución sencilla. Como dice la otra respuesta, debe iterar a través de todo lo que se puede enfocar dentro del div.
De hecho, en lugar de establecer tabindex=-1 en todos los elementos enfocables dentro del div, sería mejor ocultar el div por completo a través de display:none u hidden atributo, o usar el atributo deshabilitado para campos de formulario como segunda opción. Los elementos ocultos no son enfocables.
Tener el atributo deshabilitado establecido es importante para que el usuario vea visualmente que no puede usar el campo actualmente, así como para informar a los usuarios de lectores de pantalla de ese hecho. Entonces, es preferible. Establecer el atributo deshabilitado en verdadero implica automáticamente que el campo ya no se puede enfocar.
Como recordatorio, configurar tabindex=-1 no hace que un elemento sea totalmente desenfocable. Ya no permite que el usuario lo enfoque usando la pestaña u otras formas normales, pero sigue siendo enfocable programáticamente (usando el método focus()). Tenga en cuenta que es perfectamente posible omitir la falta de enfoque directo con scripts de usuario.