Рубрики
Без рубрики

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

Я заметил, что браузеры были непоследовательны в том, как они обрабатывают нажимание элемента кнопки. Некоторые браузеры предпочитают сосредоточиться на кнопке. Некоторые браузеры этого не делают. Tagged с JavaScript, A11y.

  • Автор записи Автор: admin
  • Дата записи 19.05.2022

Я заметил, что браузеры были непоследовательны в том, как они обрабатывают щелчок по <Кнопка> Анкет Некоторые браузеры предпочитают сосредоточиться на кнопке. Некоторые браузеры этого не делают.

В этой статье я хочу показать вам свой тест и выводы. Затем я хочу поговорить о способе преодоления этих несоответствий.

Тест

Тест простой. Мы проверяем, что происходит, когда мы нажимаем на <Кнопка> Анкет В частности, мы хотим знать, если:

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

Вот HTML, который мы используем для теста:

Placeholder for testing tab



Placeholder for testing tab

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

Вот для вас Codepen, если вы хотите следовать вместе с тестами.

Увидеть ручку Кнопка и тест фокусировки ссылки Zell Liew ( @zellwk ) на Кодепен .

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

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

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

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

ПРИМЕЧАНИЕ. Если вы используете Chrome, вы можете использовать инструмент Live Expression (поэтому нет необходимости регистрировать Document.ActiveElement ).

Тестирование на KeyPress

Здесь мы можем добавить Keydown Слушатель событий в документе. Здесь мы хотим записать, какой элемент запустил событие. Мы можем сказать элемент с Event.Target Анкет

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

Тестирование на вкладку и смену

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

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

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

Полученные результаты

Сафари (Mac)

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

  1. На кнопке нет фокуса.
  2. Document.activeElement указывает на Анкет

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

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

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

Firefox (Mac)

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

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

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

Сдвиг + Вкладка смешно. Если <Кнопка> Первое, на что вы нажали, Firefox фокусируется на последнем фокусируемом элементе в документе. Если вы сосредоточились на элементе, прежде чем нажать кнопку, Firefox фокусирует этот элемент.

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

Firefox (Windows)

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

Дополнительная клавиша происходит от <Кнопка> Анкет

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

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

Хром (Mac)

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

Следующий Keypress происходит от <Кнопка> Анкет Это ожидается с момента <Кнопка> является целенаправленным элементом.

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

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

Хром (Windows)

Когда вы нажимаете кнопку в Chrome (Chrome 75.0), кнопка получает фокус.

Следующий Keypress происходит от <Кнопка> Анкет

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

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

Edge (Windows)

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

Следующий Keypress происходит от <Кнопка> Анкет

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

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

Резюме результатов

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

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

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

Сфокусированный элемент (Но нет фокусировки) (Но нет фокусировки)
Next Keypress от:
Вкладка подходит: Следующий элемент Следующий элемент Следующий элемент Следующий элемент Следующий элемент Первый элемент в документе
Shift + Tab подходит к: Предыдущий элемент Предыдущий элемент Предыдущий элемент Предыдущий элемент Ранее сфокусированный элемент (если есть)

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

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

HTML Spec Не указывает, что должны делать браузеры после того, как пользователь нажимает на кнопку. Так Нет браузеров не виноваты для непоследовательного поведения.

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

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

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

ПРИМЕЧАНИЕ. Если вы из тех людей, которые ненавидят стиль фокуса по умолчанию, вы можете ресторировать кольцо Focus (или вы можете ждать : Focus-visible

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

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

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

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

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

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

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

Спасибо за чтение. Эта статья была первоначально размещена на Мой блог Анкет Подпишитесь на мою новостную рассылку, если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.

Оригинал: “https://dev.to/zellwk/inconsistent-behavior-among-browsers-when-clicking-on-buttons-2kmc”

Читайте ещё по теме: