Ace: Accesibilidad: Ace atrapa la tecla Tab, por lo que los usuarios del teclado no pueden escapar

Creado en 25 nov. 2016 · 8Comentarios · Fuente: ajaxorg/ace

He separado esto del # 2164. Ese problema se trata realmente del hecho de que los lectores de pantalla no pueden leer el contenido del editor. Quiero hablar sobre un problema de accesibilidad más simple:

Si tiene Ace en un formulario y está tabulando el formulario de un campo a otro, una vez que ingrese a Ace, se atascará, porque Tab sangra la línea de código actual (lo cual es muy natural). Este es un problema para nosotros, y la mejor solución que he podido encontrar es la siguiente:

Introducimos dos modos para cada instancia del editor:

Modo de captura de tabulación: tabulación y Mayús + tabulación sangría / sangría.
Modo de no captura: Tab y Shift + Tab mueven el foco del teclado al control siguiente / anterior.

Dado eso, el comportamiento es el siguiente:

Cuando el enfoque del teclado entra por primera vez en el editor, se establece en modo de no captura.
Tan pronto como escribe algo, el editor entra en modo de captura de pestañas.
Al presionar CTRL + M se cambia entre los dos modos (según lo recomendado por https://www.w3.org/TR/wai-aria-practices/#richtext).
Al presionar Esc se cambia al modo sin captura (parece ser el tipo de cosas que la gente podría intentar si se quedara con una interfaz).

Debido a 1), puede abrir paso a través de todo el formulario sin quedarse atascado, como es de esperar. Debido a 2), una vez que está escribiendo el código, Tab sangra la línea actual, como es de esperar. 3) y 4. Hacer posible la fuga.

Esto no es perfecto. Veo algunos problemas: ¿Es esto detectable para nuevos usuarios? ¿Debería haber una indicación visible (o auditiva) de en qué modo se encuentra? Siento que una indicación podría ser buena. Por otro lado, ocupar espacio en la pantalla o hacer que el lector de pantalla hable algo (cuando desea concentrarse en lo que está escribiendo o en dónde se encuentra en el formulario) parece indeseable. Si el comportamiento fuera lo suficientemente natural, no importaría.

Si a la gente le gusta esta sugerencia, estoy feliz de intentar codificarla.

Fuente

timhunt

👍5

Comentario más útil

Esta idea suena interesante y será útil como una extensión opcional, no estoy seguro de habilitarla por defecto ya que muchos sitios tienen su propia forma de navegación entre elementos, por ejemplo, en Cloud9 hay atajos para enfocar elementos específicos como árbol de archivos o terminal. y ctrl-cmd-arrow para cambiar el enfoque entre los paneles del editor.

nightwing en 2 dic. 2016

👍3

Todos 8 comentarios

nightwing en 2 dic. 2016

👍3

Gracias por la respuesta.

timhunt en 2 dic. 2016

Suena como una buena solución.

asgeir-inspera en 6 dic. 2016

@timhunt , ¿terminaste codificando esto? Lo usaríamos directamente en nuestra bifurcación o como una extensión. Feliz de hacer nuestra propia extracción de código si está abierto en algún lugar y no tienes tiempo para limpiarlo.

eah13 en 18 jul. 2017

Lo siento, no, al menos no dentro de Ace. Estábamos usando Ace dentro del tipo de pregunta CodeRunner para Moodle, y resultó ser más fácil implementar lo que queríamos en la capa de pegamento: https://github.com/trampgeek/moodle-qtype_coderunner/blob/master/amd/src /aceinterface.js.

Sin embargo, puede copiar cualquier parte de ese código.

timhunt en 19 jul. 2017

Me encuentro con el mismo problema con Ace, y esta es la solución que se me ocurrió.

Utilice la función setCommandEnabled de https://stackoverflow.com/questions/24963246/ace-editor-simply-re-enable-command-after-disabled-it

Luego configure el editor de esta manera:

        editor.on('focus', function() {
          setCommandEnabled(editor, "indent", true)
          setCommandEnabled(editor, "outdent", true)
        })

        editor.commands.addCommand({
          name: "escape",
          bindKey: {win: "Esc", mac: "Esc"},
          exec: function() {
            setCommandEnabled(editor, "indent", false)
            setCommandEnabled(editor, "outdent", false)
          }
        });

Funciona bastante bien. Presione Escape y Tab / Shift + Tab, y escapa del editor Ace y el elemento enfocable siguiente / anterior se enfoca.

cayhorstmann en 5 dic. 2018

👍1

Usar Ctrl + [en lugar de Shift + Tab y Ctrl +] en lugar de Tab funciona en el editor ace, así que simplemente eliminó el comando de tabulación y no hay trampa ahora
aceEditor.commands.removeCommand (aceEditor.commands.byName.indent);
aceEditor.commands.removeCommand (aceEditor.commands.byName.outdent);