Рефакторинг меню

[TatianaFokina]

Превью контента.

Пока-пока, #1263, #1110, #1171, #819, #1074, #1069, #1075, #1081.

Ждут своего героя/героиню 🦸

Скорее всего для @skorobaeus:

• Граница у меню, которое пока не раскрыто (сливается на некоторых страницах с фоном). Проблема упомянута в Визуальное выделение нижней границы меню #1107.
• Анимация открытия/закрытия меню как в макете (если реально) или хотя бы пофиксить странное поведение текущей анимации на странице материала.
• Докрутить стили затемнения фона при открытии меню (если нужно).
• Текст плейсхолдера для поиска, а также про скрытый лейбл к нему ¹
• Уменьшить желание кликнуть по подсказке про горячую клавишу / рядом с гамбургером.
• Покрутить высоту строки поиска ²
• Новая иконка для кнопки на странице расширенного поиска ³
• Решить, нужна ли нам подсказка про поиск на мобилках. Если нужна, то подумать про переносы и всякое такое на мобилках.
• Куда девать попап с предложением подписаться на рассылку, когда дропдаун в хедере раскрыт (оставлять на верхнем слое или тоже затемнять?).

Сноски ¹²³

¹ У поля поиска одинаковый невидимый лейбл, плейсхолдер и подсказка к горячей клавише с названием «Поиск». Это не какой-то финальный вариант, просто хотела проверить гипотезу про то, что слишком много поисков, и это может запутать.

² Дефолтная выглядит странно, но может и нет. Изменила у .search font-size и line-height (818d626, eb44a0b).

³ Дело в том, что на этой странице у меню нет дропдауна, а строка поиска видна всегда. Кнопка с крестиком, которая у нас нужна для закрытия меню, здесь не закрывает меню, а очищает фильтры + поле поиска, если там есть запрос. Описано в #1074.

Скорее всего для @igsekor:

• Условие для страницы поиска.
• Решить, нужно ли нам столько кода для рассчёта высоты хедера, чтобы, на основе этого, рассчитывать оффсеты у других стикящихся элементов (названия подразделов, содержание материала).
• Не закрывать дропдаун в хедере, если пользователь кликнул на кнопку принятия кукиз (и, возможно, кнопку закрытия или подписки на рассылку из попапа).
• Внимательно посмотреть на скрипты, которые изменились за время работы над этим PR.
• Удалить TODO и закоментированный и, при этом, больше ненужный JS-код.

Скорее всего для @solarrust или @furtivite:

• Посмотреть на закомментированные стили, удалить, если больше не нужны.
• Отступ у контента сверху (уезжает, когда меню открыто).
• При раскрытии дропдауна затемнять также кнопку «Развернуть/Свернуть» в рубрике с советами и с собесами.
• Изящно задать padding-и справа/слева у списка с разделами (в дропдауне). Здесь же: изящно пересчитать ширину скиплинка, т.к. она задана "в лоб".

См. padding

Для @TatianaFokina:

• Сверстать раскрытие содержания на мобилках НОРМАЛЬНО.
• Расширить область клика кнопки открытия.
• Добавить aria-controls и aria-expanded к кнопке.
• Разобраться с ломающимся табом на бургере.

Ченджлог 🥵

Стили в общем

• Отрефакторены старые стили (новый синтаксис для брейкпоинтов, удалила неиспользуемые стили и селекторы).
• Минимальная анимация открытия и закрытия хедера (не как в макете).
• Вся анимация, связанная с хедером и лого, в отдельном файле.
• Цвет --color-fade с вида hsl(220 7% 25%) стал 220 7% 25%, чтобы добавлять альфа-канал при затемнении ⁴
• В темы добавлен цвет --color-border: hsl(var(--color-base-text) / 0.3), чтобы убрать повторы из кода.
• У шторок с фильтрами на страницах расширенного поиска и участников синхронизированы стили с дропдауном.

⁴ Иначе фильтры не работают.

Структура хедера

• Один элемент вместо двух (привело к изменению нейминга).
• Один и тот же include с самим хедером и дропдауном для всех страниц.
• Навела порядок в header.njk и search-page.njk.
• Вынесла подсказки про Esc и / за пределы кнопки ⁵
• Текст у шортката со слэшем.
• Скрываем горячую клавишу для закрытия на мобилках.
• На странице материала в хлебных крошках больше нет названия самого материала.
• Другой текст у плейсхолдера в поле поиска, чтобы не повторялось два раза слово «Поиск».
• Больше нет дивов в строчных элементах.
• Переименовала подсказки о горячих клавишах, чтобы они всегда подсказывали, какую кнопку нажать, а также слово «Поиск» не повторялось два раза.

⁵ Подсказка про поиск раньше была вложена внутрь <button>, что мне показалось странным. Гамбургер отвечает не только за поиск, но и за выпадающее меню с разделами. Плюс на слух довольно странно будет сначала услышать что-то про поиск, потом про то, что эта кнопка открывает и закрывает меню. Так что самое логичное место для шортката, конечно, поле поиска, но тут у нас оно скрыто, так что ситуация особая.

ARIA

• У кнопки закрытия и открытия меню есть aria-expanded (скринридер сообщает, свёрнут или развёрнут сейчас дропдаун) и aria-controls (связывает кнопку с дропдауном).
• Добавила к полю поиска aria-shortcuts с кодом /.
• aria-label для основного хедера (ориентир).
• aria-expanded и aria-controls у кнопки для скрытия и показа оглавления к материалам на мобилках.

Поведение хедера

• На десктопах стикится всегда.
• На мобилках статичный.
• Фиксируется при открытии.
• Закрывается, когда клавиатурный фокус попадает на первый интерактивный элемент после него.
• Фокус переносится на поле фокуса не только со Slash, но и numpadDivide (потестировать отличия в JavaScript Key Code Event Tool).

Стили хедера

• При открытии затемняется фон страницы (псевдоэлемент для <body>).
• Скрол у дропдауна на мобилках.
• Подсказка про клавишу Esc теперь не снизу, а сбоку от кнопки.
• На всех брейкпоинтах внутренние отступы одинаковые.
• Уменьшила внутренние отступы на мобилках.
• При скроле внутренние отступы уменьшаются (поэтому хедер выглядит компактнее).
• У подсказок с шорткатами user-select: none.
• Отступ от меню в состоянии isSticky всегда 56px ⁶
• Лёгкий фейд на изменение строки в 0.2 секунды.
• Нижнее подчёркивание на страницах без акцентного цвета в свёрнутом состоянии.
• Высота строки поиска уменьшена, межбуквенные расстояния и внутренние отступы подогнаны между строкой поиска и хлебными крошками, чтобы не было визуальных "прыжков" при переходе по страницам.
• Округлена высота подчёркиваний в дропдауне (она была мучительно разная).
• Иконка с крестиком заменена на иконку Backspace на странице расширенного поиска.

⁶ Удалила функцию для расчёта высоты. Она у нас не такая вариативная, поэтому кажется, что 56 пикселей во всех случаях вполне норм. Так мы избавимся от лишних вычислений и не будем рассчитывать каждую секунду текущую высоту хедера.

Содержание материалов

• Блок с содержанием на мобилках всегда находится под меню (не фиксируется при скролле).
• Появилась кнопка его закрытия и открытия.
• При клике на якорной ссылке содержание не сворачивается.
• Ссылки в оглавлении не так близко располагаются к друг другу, поэтому на них легче кликать.
• Хлебные крошки не показываются на мобилках, в том же диапазоне, в котором нет стики хэдера.

Хедер отдельного материала

• Высота меньше, влезает в один разворот.
• Меньше размер шрифта времени чтения.

Новое

• Skip link (тестируйте с клавиатуры).

Скриншоты с изменениями

Оффсеты у стикящихся элементов.

Случился упс 🫠

Решённое

На странице "Участники" и странице каждого участника меню сжимается позже, чем этого ожидаешь. Интересно, получится ли стриггернуть сжатие сразу, как начинается текст? UPD: Решено сжатием хэдера сразу при скролле

bandicam.2024-05-22.21-46-22-881.mp4

Не все элементы со страниц затемняются при развёрнутом хедере.

Поиск на главной: нужен ли там подсказка на мобилках вообще? UPD: Нет, не нужна.

Рамка остаётся при раскрытии дропдауна, убрать. UPD: Таня — моя героиня!

Когда фон хедера и дропдауна как у страницы, они сливаются с другими элементами.

Сейчас попап появляется поверх открытого дропдауна.

Из-за того, что появился текст про поиск, на мобилках на новую строку переносятся хлебные крошки.
UPD: Нужно убрать хлебные крошки на индексах разделов, на проде их нет, и они не нужны, т. к. дублируют инфу.
UPD2: Убрала

Из-за анимации (а может и нет) и того, в какой момент убирается класс для сужения высоты и отступов в меню, оно в определённой точке скролла начинает паниковать и трястись. Воспроизводится только на странице материала.

_blockquote_.HTML.-.Google.Chrome.2024-05-09.15-19-05.mp4

Похожий упс на странице участника:

bandicam.2024-05-22.22-03-53-328.mp4

Нужна другая иконочка, не с крестиком, как у нас сейчас.
UPD: Сменила иконку на "бэкспейс"

Фильтры на странице всех участников на мобилках.
UPD: Сейчас кнопка фильтров скрывается под меню, эти сущности исключают друг друга

Затемнение под фильтрами на странице участников и затемнение под меню это одна и та же механика, должны выглядеть одинаково:

Бэклог 😶‍🌫️

Медиафичу для отключения анимаций выносим в отдельный PR, а то и так многаааа. Кнопку «Наверх» тоже выносим.

[TatianaFokina]

Оставлю черновик чеклиста для сценариев тестирования пока тут.

Управление с клавиатуры

Все страницы:

• при нажатии на Tab в начале страницы появляется skip link «К контенту»;
• при нажатии на Enter, когда фокус на skip link, страница проскролливается к основному контенту на странице.

Все страницы, кроме главной и расширенного поиска:

• (свёрнутый хедер): при последовательном табе с начала страницы фокус следующий: ссылка-логотип → хлебная крошка (предыдущая страница) → поле поиска → бургерная кнопка → первый интерактивный элемент на странице;
• (свёрнутый хедер): при табании по странице в фокусе не оказываются строка поиска и скрытые ссылки из дропдауна;
• (свёрнутый хедер): фокус остаётся на бургерной кнопке с иконкой с крестиком, если нажали пробел или Enter;
• (развёрнутый хедер): после нажатия на бургерную кнопку фокус следующий: бургерная кнопка → ссылки на разделы в визуальном порядке → первый интерактивный элемент на странице;
• при нажатии на Esc, когда находитесь в поле поиска, хедер сворачивается, при табе в фокусе оказывается бургерная кнопка;
• при нажатии на / или / в цифровом блоке (numpad) хедер разворачивается, а фокус попадает в поле поиска.

Главная:

• при последовательном табе с начала страницы порядок фокуса следующий: поле поиска → ссылки на разделы в визуальном порядке → первый интерактивный элемент на странице;
• при нажатии на Esc, когда находитесь в поле поиска, хедер не сворачивается, фокус просто сбрасывается с поля;
• при нажатии на / или / в цифровом блоке (numpad) фокус переносится на поле поиска в начале страницы, хедер не разворачивается.

Расширенный поиск:

• при последовательном табе с начала страницы порядок фокуса следующий: ссылка-логотип → поле поиска → кнопка очистки фильтров и строки поиска → первый интерактивный элемент на странице;
• когда фокус на поле поиска и нажали Esc, введённый результат не очищается, а фокус просто сбрасывается с текущего элемента;
• на кнопке для очистки фильтров можно сделать фокус, она нажимается с Enter и пробелом.

Управление мышкой и тапами

Все страницы, кроме главной и расширенного поиска:

• (свёрнутый хедер): дропдаун раскрывается при клике/тапе по кнопке открытия с тремя точками;
• (развёрнутый хедер): дропдаун скрывается при клике/тапе по кнопке закрытия с крестиком;
• (развёрнутый хедер): дропдаун скрывается при клике/тапе по странице (области за пределами хедера и дропдауна);
• (развёрнутый хедер): дропдаун не скрывается при клике/тапе по области хедера и самого дропдауна.

Страницы для тестирования

• Главная
• Раздел
• Материал
• Рассылка
• Архив рассылки
• О проекте
• Лицензии
• Участники
• Любая страница одного участника
• Расширенный поиск
• Летучка
• 404

[github-actions]

Превью контента из e166121 опубликовано.