Блог

Я пытаюсь создать пользовательский срез, который поддерживает навигацию с клавиатуры.

Я наткнулся на supportsKeyboardFocus свойство в capabilities.json, и я вижу, что это изменяет visual HTML-элемент, чтобы он выглядел как встроенный слайсер, который поддерживает навигацию по клавиатуре (удаляет aria-hidden="true" и добавляет keyboard-shortcuts="ctrl-ArrowRight scoped" ), но я все еще не могу получить фокус клавиатуры внутри простого пользовательского визуального элемента. Существуют ли какие-либо рабочие примеры пользовательского визуального элемента, поддерживающего навигацию с клавиатуры?

В поддержке фокусировки клавиатуры пользовательских визуальных элементов произошел регресс, это было исправлено несколько месяцев назад.

Чтобы включить фокус клавиатуры и навигацию, визуальный элемент должен:

1. Установите supportsKeyboardFocus: true в возможностях.файл json.
2. Содержат фокусируемые элементы¹

Также обратите внимание, что в отчете Power BI визуальные элементы ведут себя как контекстные группы, поэтому навигация между визуальными элементами осуществляется с помощью Tab , а навигация в контекст визуального элемента выполняется с помощью ctrl rightArrow (или cmd rightArrow для Apple).

¹: Хотя существует множество элементов DOM, которые можно фокусировать по умолчанию (например, кнопки, ввод текста и т.д.), Многие пользовательские визуальные элементы основаны исключительно на графике SVG, поэтому в конечном итоге они могут не содержать фокусируемых элементов. Для самой простой навигации на основе вкладок достаточно добавить tabindex=0 к элементу. Для обеспечения хорошей доступности, в зависимости от визуального элемента, обычно требуется добавить поддержку клавиатуры для выбора и множественного выбора, а также улучшенную навигацию (например, навигацию по сетке на основе стрелок или какую-либо разумную группировку элементов и т.д.)