Ace: Доступность: Ace перехватывает клавишу Tab, поэтому пользователи клавиатуры не могут убежать

Созданный на 25 нояб. 2016 · 8Комментарии · Источник: ajaxorg/ace

Я выделил это из # 2164. Эта проблема действительно связана с тем, что программы чтения с экрана не могут прочитать содержимое редактора. Я хочу поговорить о более простой проблеме доступности:

Если у вас есть Ace в форме, и вы перемещаетесь по форме от поля к полю, то, как только вы попадаете в Ace, вы застреваете, потому что тогда Tab делает отступ для текущей строки кода (что очень естественно). Это проблема для нас, и лучшее решение, которое я смог придумать, это следующее:

Мы вводим два режима для каждого экземпляра редактора:

Режим захвата табуляции: Tab и Shift + Tab с отступом / выступом.
Режим без захвата: Tab и Shift + Tab перемещают фокус клавиатуры к следующему / предыдущему элементу управления.

При этом поведение выглядит следующим образом:

Когда фокус клавиатуры впервые попадает в редактор, он переходит в режим без захвата.
Как только вы что-то набираете, редактор переходит в режим захвата табуляции.
Нажатие CTRL + M переключает между двумя режимами (в соответствии с рекомендациями https://www.w3.org/TR/wai-aria-practices/#richtext).
Нажатие Esc переключает в режим без захвата (похоже, что люди могут попробовать, если застряли в интерфейсе).

Из-за 1) вы можете просто пройти через всю форму, не застревая, как и следовало ожидать. Из-за 2), когда вы набираете код, Tab делает отступ для текущей строки, как и следовало ожидать. 3) и 4. Сделайте возможным побег.

Это не идеально. Я вижу некоторые проблемы: могут ли это обнаружить новые пользователи? Есть ли видимая (или звуковая) индикация того, в каком режиме вы находитесь? Я чувствую, что указание может быть хорошим. С другой стороны, занимать место на экране или заставлять программу чтения с экрана что-либо говорить (когда вы хотите сконцентрироваться на том, что вы набираете, или на том, где вы находитесь в форме), кажется нежелательным. Если бы поведение было достаточно естественным, это не имело бы значения.

Если людям нравится это предложение, я с радостью попробую его кодировать.

Источник

timhunt

👍5

Самый полезный комментарий

Эта идея звучит интересно и будет полезна в качестве дополнительного расширения, я не уверен, что включить ее по умолчанию, поскольку на многих сайтах есть собственный способ навигации между элементами, например, в Cloud9 есть ярлыки для фокусировки определенных элементов, таких как дерево файлов или терминал. и ctrl-cmd-arrow для переключения фокуса между панелями редактора.

nightwing 2 дек. 2016

👍3

Все 8 Комментарий

nightwing 2 дек. 2016

👍3

Спасибо за ответ.

timhunt 2 дек. 2016

Звучит как хорошее решение.

asgeir-inspera 6 дек. 2016

@timhunt , ты это

eah13 18 июл. 2017

К сожалению, нет - по крайней мере, не в Ace. Мы использовали Ace внутри типа вопроса CodeRunner для Moodle, и оказалось, что проще реализовать то, что мы хотели, в слое клея: https://github.com/trampgeek/moodle-qtype_coderunner/blob/master/amd/src /aceinterface.js.

Однако вы можете скопировать любой из этих кодов.

timhunt 19 июл. 2017

У меня та же проблема с Ace, и это обходной путь, который я придумал.

Используйте функцию setCommandEnabled из https://stackoverflow.com/questions/24963246/ace-editor-simply-re-enable-command-after-disabled-it

Затем настройте редактор следующим образом:

        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)
          }
        });

Работает сносно. Нажмите Escape и Tab / Shift + Tab, и вы покинете редактор Ace, и следующий / предыдущий фокусируемый элемент получит фокус.

cayhorstmann 5 дек. 2018

👍1

Использование Ctrl + [вместо Shift + Tab и Ctrl +] вместо Tab работает в редакторе ace, поэтому просто удалена команда табуляции и теперь нет ловушки
aceEditor.commands.removeCommand (aceEditor.commands.byName.indent);
aceEditor.commands.removeCommand (aceEditor.commands.byName.outdent);