После последнего обновления до версии 2.8.0.beta2 кнопка меню администратора подсвечивается жёлтым цветом.
Мне казалось, что Discourse пытается что-то сообщить, но даже после поиска в интернете и на этом форуме я так и не понял, что это может значить.
Не мог бы кто-нибудь прояснить ситуацию?
Я думаю, это сообщает вам, что фокус клавиатуры установлен на этот элемент. Это недавнее изменение в области #доступности:
После того как вы отобразите меню, попробуйте нажать Tab, чтобы перемещаться по элементам меню.
Да, верно, как отметил @simonk, одна из наших ошибок заключалась в том, что мы не переключали фокус на оверлеи. При навигации по приложению фокус должен находиться в логичном месте.
Таким образом, это считается «работает как задумано», когда я вижу это (наведение курсора мыши на «Значки»)?
Хм, не уверен; нам там нужен ховер-состояние, @awesomerobot?
Думаю, нам стоит перейти с :focus на :focus-visible в нашем CSS. Пока что он не поддерживается в Safari, но в этом случае легко сделать фоллбэк на :focus.
Если активный элемент соответствует селектору :focus-visible, и скрипт вызывает перемещение фокуса в другое место, новый элемент с фокусом также должен соответствовать
:focus-visible.
Это означает, что если вы откроете гамбургер-меню, перейдя к нему с помощью клавиши Tab (что активирует стиль :focus-visible), то при открытии меню стиль :focus-visible будет применён. Если же вы откроете меню с помощью указателя, стиль :focus-visible не появится:
Есть один недостаток: в смешанной сценарии, когда вы открываете гамбургер с помощью указателя, а затем пытаетесь перемещаться с помощью Tab, стиль :focus-visible не отображается для первой ссылки (хотя технически она сфокусирована), из-за чего кажется, что она пропускается. Не уверен, есть ли обходной путь для этого…
Поскольку я (в основном) использую мышь, такое поведение для меня вполне ожидаемо.
С другой стороны, иногда я пользуюсь смартфоном с сенсорным экраном: та же проблема. Пункт «Админ» подсвечивается, что может указывать на наличие чего-то важного в разделе администрирования, требующего внимания.
Из связанной темы про экранные дикторы я вижу, что, похоже, необходимо каким-то образом устанавливать фокус.
Меня уже устроило бы поведение, описанное выше для указателей.
У меня та же проблема.
Я не думаю, что этот элемент в настоящее время обладает тем UX-значением, которое вы задумали — мы сразу же получили сообщения об ошибках с нашего форума. Фокус исчезает при щелчке правой кнопкой мыши в любом месте окна, а при наведении на кнопки возникает двойной фокус. В целом для пользователей это выглядит как баг, особенно потому что Discourse не принудительно применяет это выделение ни в каких других представлениях.
Лучше показывать фокус клавиатуры только тогда, когда пользователь впервые нажимает Tab, или только тогда, когда пользователь открыл гамбургер-меню с помощью действия клавиатуры.
Можешь прислать скриншот этого? Я об этом не слышал.
Я наблюдаю то же самое в Safari и Firefox (macOS), это также упоминается в сообщении выше:
Если я правильно понимаю эту функцию, я должен иметь возможность открыть это меню, нажав = или кликнув по нему, а затем перемещаться по нему с помощью клавиш (например, стрелок) и нажать что-то (например, Enter), чтобы перейти к выделенному пункту.
В Safari и Firefox на macOS, независимо от того, открываю ли я меню кликом или клавишей =, я не могу перемещаться внутри этого меню. Стрелки вверх/вниз прокручивают страницу, а стрелки влево/вправо визуально ничего не делают.
Клавиша Tab переключает фокус на другой элемент, например на кнопку «Нравится» в посте, и убирает желтую подсветку из меню. В Firefox нажатие Tab ранее переключало фокус между элементами меню, пока я не начал писать этот ответ, но сейчас этого не происходит; между этими попытками было закрыто окно в режиме инкогнито.
Я наблюдаю такое поведение как на meta, так и на своем собственном экземпляре, обновленном до efbc2481d8 (за исключением того, что в Firefox переключение через Tab работает успешно, что я видел только здесь).
Стрелки не должны ничего делать, но tab и enter должны!
Итак, когда вы открываете меню с помощью = и нажимаете tab, вы не перебираете элементы меню? Я на macOS, и это работает как ожидалось в Safari, Firefox и Chrome, так что это немного сбивает с толку!
Я внимательнее посмотрел на то, что здесь происходит в целом, и идея использования focus-visible, о которой я упоминал выше, не сработает.
Проблема в том, что гамбургер-меню появляется в нашем HTML вне контейнера кнопки меню (контейнера, содержащего кнопки поиска, гамбургера и пользователя). Это означает, что меню не следует сразу в естественном порядке табуляции. Чтобы компенсировать это, мы устанавливаем focus на первый элемент меню с помощью JavaScript. Это имеет побочный эффект подсветки элемента (потому что нам также нужны стили :focus).
Я не думаю, что мы можем полагаться на обнаружение нажатия tab, поскольку это не единственная клавиша, которую используют скринридеры для навигации, и мы бы мешали другим сочетаниям клавиш, если бы перехватывали все нажатия клавиш…
Я могу придумать два возможных решения:
Переместить меню в HTML так, чтобы оно появлялось сразу после кнопки, которая его вызывает. Это может иметь некоторые побочные эффекты для макета.
Захватывать фокус внутри меню, когда оно открыто, но не устанавливать фокус на какой-либо конкретный элемент. Это означает, что когда меню открыто, вы можете перебирать только его содержимое с помощью Tab, но ничего другого на странице. Я думаю, что это, вероятно, предпочтительное решение…
Верно. Для большей точности: у меня macOS 11.4 и Safari 14.1.1. Я просматриваю Meta в приватном окне, а свою собственную копию — в обычном окне.
Наверное, я ошибся при первоначальном тестировании Firefox. В нём всё работает так, как вы описали, если в системных настройках включена опция «Использовать навигацию с клавиатуры для перемещения фокуса между элементами управления». А если она отключена, то Tab перемещает фокус на кнопку «Нравится» так, как я описывал ранее.
В Firefox я могу надёжно переключаться между этими режимами, просто включая или выключая эту системную настройку, без необходимости перезагружать страницу.
В Safari я наблюдаю переход фокуса на кнопку «Нравится» при нажатии Tab независимо от значения этой системной настройки, даже после перезагрузки страницы. Я ещё не проверял, что будет после перезапуска Safari с включённой настройкой.
Теперь я также проверил Chrome: в нём всё работает так, как вы описали, независимо от значения системной настройки.
Я нашёл причину своей проблемы в Safari. Я заметил, что в отличие от Chrome и Firefox, если я кликал где-то в строке заголовка и нажимал Tab, ни один из элементов в заголовке не выделялся.
Это привело к обнаружению этой настройки в Safari в разделе «Дополнительно»:
Я на 99 % уверен, что это настройка по умолчанию при чистой установке Big Sur; я не думаю, что менял её. При включённой настройке всё начинает работать так, как вы описываете. Как указано в тексте выше, это также работает при использовании Option+Tab, даже если настройка выключена.
