Как выставить состояние фокуса через Accessibility API для пользовательских элементов управления в React? Достаточно ли HTMLElement.focus ()? - PullRequest
Новая
       19

Как выставить состояние фокуса через Accessibility API для пользовательских элементов управления в React? Достаточно ли HTMLElement.focus ()?

0 голосов
/ 31 января 2020

При рассмотрении возможных сбоев по WCAG критерию успеха 4.1.2 я столкнулся с загадочным Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available"(https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F79).

Хотя в статье указана ошибка, в ней не разъясняется, как добиться соответствия для пользовательских компонентов.

Отсюда возникает вопрос - каков стандартный способ предоставления состояния фокуса через API-интерфейс специальных возможностей для пользовательских элементов управления в React? HTMLElement.focus () обрабатывает это изящно, или другие действия необходимы?

1 Ответ

0 голосов
/ 10 февраля 2020

Вы действительно можете вызвать focus() только для элемента с атрибутом tabindex. (Исключением из этого правила являются «нативные» элементы пользовательского интерфейса, такие как button, a и input, которые можно фокусировать по умолчанию).

Если вы хотите focus() что-то без Включая его в последовательность вкладок, используйте tabindex="-1".

Для компонентов вам придется тщательно выбирать, куда поместить tabindex. Обычно вы помещаете этот атрибут в элемент, который несет семантику. (т. е. если вы хотите сосредоточиться на <h1>, используйте <h1 tabindex="-1">, а не на каких-либо элементах-оболочках или потомках). С компонентами это может быть сложнее, особенно если компонент представляет собой составной виджет, но это уже другая история.

...