Непоследовательное поведение среди браузеров при нажатии на кнопки

с нами для того, чтобы легко тестировать табуляции и табуляции сдвига.

Вот вам Codepen, если вы хотите пройти вместе с тестами.

   См. Pen .
  Проверка фокуса на кнопке и ссылке Зелл Лью (@zellwk)
  на CodePen.

Тестирование на фокус

Мы можем проверить фокусировку визуально. Если кнопка сфокусирована, вокруг кнопки должно быть визуальное свечение по умолчанию.

Мы также можем тестировать фокусировку программно. В JavaScript вы можете получить сфокусированный элемент с document.activeElement . Когда мы нажимаем кнопку, мы можем регистрировать сфокусированный элемент.

  const button = document.querySelector ('button')
button.addEventListener ('click', event => {
  console.log ('Click:', document.activeElement)
})
 

Примечание. Если вы используете Chrome, вы можете использовать инструмент Live Expression (поэтому нет необходимости регистрировать document.activeElement ).

Проверка на нажатие клавиши

Здесь мы можем добавить прослушиватель событий keydown к документу. Здесь мы хотим записать, какой элемент вызвал событие. Мы можем сказать элемент с помощью event.target .

  document.addEventListener ('keydown', event => {
  console.log (`Keydown:`, event.target)
})
 

Тестирование для вкладки и Shift-Tab

После нажатия на кнопку Tab перейдет к следующему фокусируемому элементу? Если он переходит к следующему фокусируемому элементу, этот элемент должен получить контур фокуса.

Аналогично, переходит ли вкладка + к предыдущему фокусируемому элементу? Если он переходит к предыдущему фокусируемому элементу, этот элемент также должен получить контур фокуса.

Я не регистрировал document.activeElement потому что фокусное свечение достаточно.

Результаты

Safari (Mac)

Когда вы нажимаете кнопку в Safari (12.1.1), кнопка не получает фокус. Документ получает фокус вместо. Мы знаем это, потому что:

1. На кнопке нет свечения фокуса.
2. document.activeElement указывает на .

Поскольку получает фокус, любое дальнейшее нажатие клавиши происходит из .

Вкладка в следующий элемент работает, как и ожидалось. Следующий элемент получает фокус.

Shift + Вкладка не работает, как я ожидал. Я ожидаю, что предыдущий элемент получит фокус, но вместо этого получит фокус.

Firefox (Mac)

Когда вы нажимаете кнопку в Firefox (Nightly 70.0a1), кнопка не получает фокус. Вместо этого документ получает фокус.

Любое дальнейшее нажатие клавиши происходит из .

Вкладка не работает должным образом. Когда вы нажимаете Tab Firefox фокусируется на первом элементе в документе.

Shift + Вкладка забавная. Если

— первое, на что вы нажали, Firefox фокусируется на последнем фокусируемом элементе в документе. Если вы сфокусировались на элементе до нажатия кнопки, Firefox сфокусирует этот элемент.

Проблема с Firefox и кнопками восходит к Firefox 63 (как минимум). У MDN есть раздел об этом:

Firefox (Windows)

Когда вы нажимаете кнопку в Firefox (Quantum 68.0.1, версия для Windows), кнопка получает фокус, но свечение не отображается.

Дальнейшее нажатие клавиши происходит из

.

Вкладка работает как положено. Следующий пункт получает фокус.

Shift + Вкладка работает как ожидалось. Предыдущий пункт получает фокус.

Chrome (Mac)

При нажатии на кнопку в Chrome (Canary 78.0) кнопка получает фокус. Эта реализация отличается от Safari и Firefox.

Следующее нажатие клавиши происходит из

. Это ожидается, поскольку является сфокусированным элементом.

Закладка работает как положено. Следующий элемент получает фокус.

Shift + Tab работает, как и ожидалось. Предыдущий элемент получает фокус.

Chrome (Windows)

При нажатии кнопки в Chrome (Chrome 75.0) кнопка получает фокус.

Следующее нажатие клавиши происходит из

.

Закладка работает как положено. Следующий элемент получает фокус.

Сдвиг + Вкладка работает должным образом. Предыдущий элемент получает фокус.

Edge (Windows)

Когда вы нажимаете кнопку в Edge (Edge 17), кнопка получает фокус, но кольцо фокусировки не появляется.

Следующее нажатие клавиши происходит из

.

. ]

Закладка работает должным образом. Следующий элемент получает фокус.

Сдвиг + Вкладка работает как ожидалось. Предыдущий элемент получает фокус.

Сводка результатов

Мы протестировали четыре вещи в обычных браузерах:

1. Щелчок фокусирует кнопку?
2. После нажатия происходит ли нажатие клавиш на кнопке?
3. После щелчка мы можем перейти к следующему элементу?
4. После щелчка мы можем перейти к предыдущему элементу?

Вот результаты в виде таблицы.

      

      

      

      

      

      

    

      

      

      

      

      

      

    

      

      

      

      

      

      

    

      

      

      

      

      

      

    

      

      

      

      

      

      

    

Тест	Сафари	Firefox ()	Firefox (⊞)	Хром ()	Хром (⊞)	Edge (⊞)
Сфокусированный элемент			(но без фокуса)			(но без фокуса)
Следующая клавиша из:
Вкладка идет по адресу:	Следующий элемент	Первый элемент в документе	Следующий элемент	Следующий элемент	Следующий элемент	Следующий элемент
Shift + Tab идет по адресу:		Ранее сфокусированный элемент (если есть)	Предыдущий элемент	Предыдущий элемент	Предыдущий элемент	Предыдущий элемент

Вы можете увидеть несоответствия здесь. Это ясно как день. Основные несоответствия:

1. Firefox на Mac просто странный. Все кажется неправильным.
2. Некоторые браузеры не фокусируются на кнопке при нажатии.
3. Некоторые браузеры не включают свечение фокуса на кнопку при нажатии.

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

Вот потенциальное исправление

Я думаю, что реализация Chrome (как для Mac, так и для Windows) имеет больше смысла.

1. При нажатии на кнопку фокус должен быть на кнопке.
2. Кнопка должна иметь фокусное свечение.
3. При нажатии на вкладку после нажатия кнопки следующий элемент должен получить фокус.
4. После нажатия кнопки Shift + после нажатия кнопки предыдущий элемент должен получить фокус.

Примечание. Если вы тот человек, который ненавидит стиль фокусировки по умолчанию, вы можете изменить стиль кольца фокусировки (или подождать, пока : focus-visible получит широкую поддержку) .

Существует быстрое решение, если вы хотите, чтобы другие браузеры работали в соответствии с реализацией Chrome. Все, что вам нужно сделать, это добавить этот код в верхней части вашего JavaScript.

  document.addEventListener ('click', event => {
  if (event.target.matches ('button') {
    event.target.focus ()
  }
})
 

Этот код фокусируется на кнопке, когда вы нажимаете на нее. Это также гарантирует:

1. Появляется фокусное свечение.
2. Вкладка переходит к следующему элементу.
3. Shift-Tab переходит к предыдущему элементу

Важное примечание: Вы хотите поместить этот код в ТОП ваших файлов JavaScript. Это работает, потому что слушатели событий вызываются в том порядке, в котором они объявлены. Фокус всегда будет идти к кнопке первым. Затем вы можете перенаправить фокус на другие элементы, если хотите.

Важное примечание № 2: Я еще не проверил этот код полностью на всех устройствах. (Только для Mac версий Safari, Firefox и Chrome). Я ценю это, если вы можете помочь провести некоторые тесты. Дайте мне знать, если я ошибаюсь в любом случае. Спасибо.

На случай, если вам интересно, почему я провел эти тесты: я понял непоследовательное поведение, когда писал раздел «Клавиатура» для изучения JavaScript. Я сделал эти тесты, потому что я хотел научить своих учеников правильному способу работы с кнопками и фокусировки (что является большой частью доступности!).

Спасибо за чтение. Помогла ли вам эта статья? Если да, надеюсь, вы поделитесь им. Вы могли бы помочь кому-то еще. Большое спасибо!