Блог

Главная - Вопросы по программированию - Перехват фокуса неинтерактивного элемента

Перехват фокуса неинтерактивного элемента

#reactjs #focus #accessibility

#reactjs #фокус #Специальные возможности

Вопрос:

У меня есть неинтерактивный элемент, такой как div на странице, который служит в качестве загрузочного модала. Когда он загружается, я хочу показать этот модальный элемент, а также остальную часть страницы, содержащую интерактивные элементы с непрозрачностью 50%. Когда он загружается (отображается загружаемый модальный режим), я хочу, чтобы фокус был захвачен в этом модальном режиме и сделал так, чтобы пользователь не мог просматривать остальные элементы на странице. Я попробовал приведенный ниже код, добавив ReactFocusLock вокруг div и присвоив div значение tabIndex равное -1, чтобы его можно было фокусировать, и установил его фокусируемым в начале, но это не работает. Однако, если я помещаю ссылку или что-то интерактивное внутри div, оно работает хорошо, что означает, что ReactFocusLock в порядке. Не могли бы вы, пожалуйста, помочь?

 const MyComponent = () => {
 const {loading, data} = fetchData();
 return <>
  {loading amp;amp; <LoadingModal />}
  {data amp;amp; <div>data</div>}
  <input></input>
  <button></button>
 <>;
}

// original modal
const LoadingModal = () => {
 return <div>loading data....<div>; 
}

// modal that with ReactFocusLock from react-focus-lock 
const LoadingModal = () => {
 const ref = React.useRef(null);
 React.useEffect(() => {
      ref.current.focus();
 }, []);
 return <ReactFocusLock><div ref={ref} tabIndex={-1}>loading data....</div></ReactFocusLock>;
}

Комментарии:

1. <ReactFocusLock> не работает для программ чтения с экрана. Он останавливает табуляцию, и, похоже, это все после быстрого теста. Чтобы действительно перехват фокуса в модальном для всех, вам нужно добавить tabindex="-1" к любому другому интерактивному элементу на странице, а также добавить aria-hidden="true" ко всем контейнерам за пределами модального (поэтому модальный должен находиться вне <main> элемента). Это действительно скрывает все элементы на странице для всех. (Причина, по которой он не работает для программ чтения с экрана, заключается в том, что они перемещаются с помощью ссылок, заголовков, разделов и т. Д. Больше, Чем с помощью Tab, Поэтому вам также нужно остановить это, скрыв все.)

2. Я думал, что причина, по которой ReactFocusLock не работает, заключается в том, что он не может перехватить фокус элемента с tabIndex= -1, поскольку, когда я устанавливаю неактивный элемент с tabIndex = 0, он работает нормально. Итак, обходной путь, который я сейчас пытаюсь, — это присвоить div tabIndex=0, и теперь он захватывает его фокус. Остальных элементов много, и для меня невозможно дать им всем tabindex=»-1″ и aria-hidden=»true»

3. Извините, я что-то перепутал. ReactFocusLock требуется внутренний элемент, который можно фокусировать для работы, это правильно (следовательно, почему tabindex="-1" не работает, ему нужен один фокусируемый элемент). Я хочу сказать, что на самом деле он не работает должным образом, даже если вы это сделаете, все, что он делает, это останавливает вас от вкладок за пределами модального. Пользователи программы чтения с экрана обычно не переходят через вкладку, что вызывает проблему, когда они могут оставить модальный.

4. Извините, я узнал, что tabindex=-1 делает элемент невозможным для вкладок, но фокус может быть задан элементу программно (с помощью element.focus()).

Метки: