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

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

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

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

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

Сноски ¹²³

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

² Дефолтная выглядит странно, но может и нет. Изменила у .search font-size и line-height (https://github.com/doka-guide/platform/pull/1191/commits/818d6266eae66df6fe9ae435be14c1abbb4c2b0d, https://github.com/doka-guide/platform/pull/1191/commits/eb44a0bf786c85331354b5c459136caf8eaffe4b).

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

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

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

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

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

См. padding

Для @tatianafokina:

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

Ченджлог 🥵

Стили в общем

Отрефакторены старые стили (новый синтаксис для брейкпоинтов, удалила неиспользуемые стили и селекторы).
Минимальная анимация открытия и закрытия хедера (не как в макете).
Вся анимация, связанная с хедером и лого, в отдельном файле.
Цвет --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 (тестируйте с клавиатуры).

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

Frame 13

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

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

Решённое

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

https://github.com/doka-guide/platform/assets/29401439/ce0f2f5c-8b16-4f42-ad9b-b96d08ab2cd2

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

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

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

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

Сейчас попап появляется поверх открытого дропдауна. Screenshot 2024-05-21 215908

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

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

https://github.com/doka-guide/platform/assets/17615202/e14fb846-0f4a-4a06-8dcf-6e5d8eeaea0d

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

https://github.com/doka-guide/platform/assets/29401439/b39b89aa-4029-4f75-87ca-394dc6042cfc

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

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

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

Бэклог 😶‍🌫️

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

Aug 17 '23 12:08 TatianaFokina

top, left и right со значениями 0 не помогают избавиться от уезжания контента наверх, когда открываем меню.

Зато точно поможет костыль с задаванием падинга для контента, ха-ха.

.header--open:not(.header--main) ~ .index-block {
  padding-top: 65px;
}

Aug 22 '23 15:08 TatianaFokina

Про position: fixed, при этом да, контент будет скакать Если его убрать, контент все = будет скакать :) Я бы, наверное не меняла свойство display и оставила его grid Блок выпадающего меню я бы вынесла из контейнера header__search search font-theme font-theme--code Блок поиска приклеила бы скотчем через position:absolute search__control Вроде тогда ничего не скачет :)

Sep 07 '23 22:09 HellSquirrel

Было/стало

Frame 13

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

Из-за того, что появился текст про поиск, на мобилках на новую строку переносятся хлебные крошки.

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

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

Пока на мобилках содержание вот такое.

May 03 '24 18:05 TatianaFokina

@HellSquirrel, @igsekor, @skorobaeus, @solarrust, @furtivite.

С основным, кроме кнопки наверх, разобралась. Рассчитываю на вашу активную помощь с исправлением мелочей (список в описании этого ПР). В коде проблемные места пометила комментариями TODO.

May 03 '24 18:05 TatianaFokina

Таня, ты потрясающая!

Вопросики по ходу ревью:

Не хотим ли сделать «Поиск /» тоже кнопкой? Я несколько раз безуспешно туда потыкала.
Если не кнопка, то хотя бы добавить user-select: none; чтобы текст нельзя было выделить.
Переделала затемнение при открытом меню на псевдоэлемент для body. Так ок?
Добавила лёгкий фейд на изменение строки в 0.2 секунды.
Анимации, размеры и отступы оставляю на откуп @skorobaeus
Переделала цвет --color-fade с вида hsl(220 7% 25%) на 220 7% 25% чтобы добавлять альфа-канал при затемнении. Иначе фильтры не работают. Поменяла во всех файлах.
Отступ для контента рассчитывается в JS. Но считается в самом начале, когда состояние стили и не стики одинаковое по высоте. Надо перенести расчёт пониже, в отслеживание включения стики-состояния. Оставила комментарий.
Добавила скролл для открытого меню на мобилках

May 06 '24 18:05 solarrust

Не хотим ли сделать «Поиск /» тоже кнопкой? Я несколько раз безуспешно туда потыкала.

Возможно, надо просто не скруглять рамку или не использовать её вообще. Элементы со скруглёнными краями набирают очки аффорданса для пользователей. @skorobaeus, что думаешь?

Если не кнопка, то хотя бы добавить user-select: none; чтобы текст нельзя было выделить.

Отличная идея.

Переделала затемнение при открытом меню на псевдоэлемент для body. Так ок?

Для меня главное, что теперь всё нормально затемняется, а то, как именно, всегда можно докрутить. Тут тоже вопрос к @skorobaeus.

~P. S. Поломались другие стикящиеся элементы, посмотрю.~

~Это происходит из-за конкатинации единиц измерения.~

document.documentElement.style.setProperty('--sticky-header-height', state.stickyHeaderHeight + 'px')
document.documentElement.style.setProperty('--not-sticky-header-height', state.headerHeight + 'px')

~Теперь локально работает, а в превью на страницах разделов нет 🫠 Там в принципе скрипты все отвалились, наверное я всё сломала!~

Ок, то работает в превью, то нет.

May 09 '24 11:05 TatianaFokina

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

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

https://github.com/doka-guide/platform/assets/17615202/e14fb846-0f4a-4a06-8dcf-6e5d8eeaea0d

May 09 '24 11:05 TatianaFokina

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

Как стало.

May 09 '24 15:05 TatianaFokina

@skorobaeus, а что думаешь насчёт границы у меню, которое пока не раскрыто и которое сливается на некоторых страницах с фоном? Нужна ли нам там тень или ещё что-то? https://github.com/doka-guide/platform/issues/1107

May 09 '24 15:05 TatianaFokina

Возможно, надо просто не скруглять рамку или не использовать её вообще. Элементы со скруглёнными краями набирают очки аффорданса для пользователей. @skorobaeus, что думаешь?

Что такое очки аффорданса? 😅

Мне надо подумать. Вообще, конечно, интересно: когда этот хоткей был просто символом / в рамке, желания кликать на него не возникало. Мне всегда казалось, что он невидимый...)

Подскажите, пожалуйста, в какой момент и почему плейсхолдер "Поиск" превратился в "Что ищете?"

May 13 '24 09:05 skorobaeus

Что такое очки аффорданса? 😅

Прибавляется желание кликнуть или тапнуть по элементу.

Подскажите, пожалуйста, в какой момент и почему плейсхолдер "Поиск" превратился в "Что ищете?"

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

May 13 '24 10:05 TatianaFokina

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

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

May 15 '24 15:05 TatianaFokina

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

https://github.com/doka-guide/platform/assets/29401439/ce0f2f5c-8b16-4f42-ad9b-b96d08ab2cd2

May 22 '24 13:05 skorobaeus

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

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

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

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

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

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

Главная:

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

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

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

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

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

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

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

May 23 '24 11:05 TatianaFokina

Результаты моего тестирования.

Стили

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

[x] лого Доки одинакового размера на всех страницах;
[x] высота строки поиска в меню уменьшена;
[x] паддинги в хедере совпадают с паддингами у основного содержимого страниц;
[x] лого анимируется как на проде.

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

[x] у подсказки с клавишей для перехода к полю поиска есть текст «Клавиша».

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

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

Главная:

[x] (только планшеты и мобилки): у поля поиска нет подсказки про горячие клавиши / и Enter;
[x] при скролле хедер не прилипает к верху страницы.

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

[x] в хедере, вместо кнопки с крестиком, есть кнопка для очистки текстового поля и сброса фильтров;
[x] рядом с полем поиска вообще нет подсказки о клавише /;
[x] при скролле хедер не прилипает к верху страницы.

Страница со всеми участниками и страница одного участника:

[ ] список участников / аватарка участника прилипают на том же расстоянии от хедера, как на проде.

Страницы с материалами:

[x] шапка материала примерно помещается на один разворот экрана;
[x] размер текста со временем чтения уменьшен;
[ ] в оглавлении слегка увеличено расстояние между ссылками;
[ ] на странице материала в хлебных крошках больше нет названия самого материала;
[x] (только десктопы): оглавление и футер статьи корректно прилипают при скролле;
[ ] (только десктопы): оглавление прилипает на том же расстоянии от хедера, как на проде;
[x] (только планшеты и мобилки): оглавление располагается под шапкой материала;
[x] (только планшеты и мобилки): оглавление свёрнуто по умолчанию;
[x] (только планшеты и мобилки): у свёрнутого оглавления есть кнопка раскрытия справа;
[x] (только планшеты и мобилки): у развёрнутого оглавления есть кнопка закрытия справа, на том же месте, что кнопка для раскрытия;
[x] (только планшеты и мобилки): кнопка для раскрытия оглавления не прилипает к низу экрана при скролле.

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

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

[x] при нажатии на Tab в начале страницы появляется skip link «К контенту»;
[x] при нажатии на Enter, когда фокус на skip link, страница проскролливается к основному контенту на странице;
[ ] (развёрнутый хедер): если внизу страницы видно сообщение о кукиз, при нажатии на кнопку его закрытия дропдаун не сворачивается;
[ ] (развёрнутый хедер): если внизу страницы видно сообщение о подписке на рассылку, при нажатии на кнопку его закрытия дропдаун не сворачивается.

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

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

Главная:

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

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

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

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

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

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

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

[x] если в поле поиска был текст, он удаляется при клике/тапе на кнопке для очистки поля и сброса фильтров;
[x] если были выбраны фильтры, они сбрасываются при клике/тапе на кнопке для очистки поля и сброса фильтров.

Страницы с материалами:

[x] свёрнутое оглавление раскрывается при тапе на всём блоке и сворачивается при тапе по стрелке закрытия;
[x] при тапе по ссылке из оглавления скролл срабатывает к нужному месту на странице.

Доступность

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

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

Страницы с материалами:

[ ] у кнопки есть состояние раскрытости и открытости;
[ ] кнопка программно связана с дропдауном;
[ ] (планшет и мобилка): у кнопки для раскрытия оглавления есть скрытый лейбл;
[ ] (планшет и мобилка): у кнопки для скрытия оглавления есть скрытый лейбл.

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

[ ] в хедере у кнопки для очистки есть скрытый лейбл, отличающийся от лейбла кнопки с крестиком в хедере с других страниц.

Aug 01 '24 13:08 TatianaFokina

@solarrust, нужна твоя в кастовании CSS-заклинаний!

Изящно задать padding-и справа/слева у списка с разделами (в дропдауне). Плюс сейчас на планшетах паддинги вообще неправильные у этого блока. Вот этот монстр, которого я создала:

@media (width >= 1024px) {
  .nav-list {
    --block-padding: 6px;
    --gap: 6px;
    padding-top: 0;
    padding-bottom: var(--list-padding-max);
    padding-right: var(--list-padding-max);
    padding-left: calc(37*var(--gap)); <------ 👀
    gap: 6px;
    line-height: inherit;
  }
}

@media (width >= 1366px) {
  .nav-list {
    padding-left: calc(38*var(--gap));  <------ 👀
  }
}

@media (width >= 1680px) {
  .nav-list {
    padding-left: calc(45*var(--gap));  <------ 👀
  }
}

Изящно пересчитать ширину скиплинка, т. к. она задана «в лоб». Она задана вот тут:

skip-link {
  position: absolute;
  overflow: hidden;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  padding: 16px 52px; <------ 👀
  background-color: var(--color-background);
  z-index: 4;
}

.skip-link:focus-visible {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
}

@media (width >= 1024px) {
  .skip-link {
    padding: 23px 56px; <------ 👀
  }
}

@media (width >= 1680px) {
  .skip-link {
    padding: 26px 62px; <------ 👀
  }
}

Более масштабная задача — что-то придумать с анимацией открытия/закрытия меню как в макете (если реально).

~~4. Ну и са-а-а-амое последнее, пофиксить отступ у контента сверху. Он слегка уезжает вниз, когда меню открыто, из-за разной высоты хедера в свёрнутом и развёрнутом состоянии.~~ UPD: Я прибила контент гвоздиками, теперь он не прыгает. Немного дребезжит в Firefox, но там какой-то прикол с округлением дробных значений, я не знаю, как это фиксить :) Света.

Comic relief

Идёт лысая девочка с бантиком на голове. Навстречу мужик:

— Девочка, а девочка, как же у тебя этот бантик держится?
— Как гвоздиком прибили, так и держится.

Aug 01 '24 19:08 TatianaFokina

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

Aug 29 '24 16:08 github-actions[bot]