Редизайн хедера Доки

[TatianaFokina]

Здесь собираем текущие проблемы с нашим многострадальным хедером, и мечтаем о прекрасном будущем.

UPD: часть проблем решили в огромном пиаре с первым подходом к рефакторингу меню.

Проблемы

• Анимация выезжания и заезжания при открытии. Она довольно заметная и медленная. В Сделать правильную анимацию меню на десктопе #717 сказано, что анимация вообще не такая, как было запланировано.
• Анимацию никак не отключить для тех, кто этого хочет (не используем prefers-reduced-motion).
• Пользователи хотели бы иметь постоянный доступ к строке поиска. Всегда отображать поле поиска #1158
• Сложная задачка: для клавиатурных сокращений нельзя использовать один символ. Можно оставить, как есть, просто у нас всегда будет нарушение этого критерия из WCAG. Улучшить клавиатурное сокращение с символом #1076
• Собачка не анимирована, как было задумано. Сделать состояния собаки «Доки» #719

Пожелания

• Перенести переключатель темы из футера в хедер (?).

Решённое

• Анимация местами странно себя ведёт при скролле наверх страницы из-за того, что анимирована тень. У шапки не должно быть анимации на прозрачность тени при затухании #1171
• Как свёрстан хедер сейчас. На проде ДВА меню: одно всегда наверху, другое, с такими же элементами, появляется поверх всегда открытого, когда его раскрываешь.
• Доступность для пользователей клавиатуры, скринридеров и голосового управления: у кнопки для открытия меню нет состояния этого открытия и закрытия; фокус слетает с кнопки, когда меню открыто; кнопка и второе выпадающие меню не связаны программно с помощью ARIA (и в текущей реализации это не исправить). Улучшить кнопку для раскрытия меню и кнопку в меню #1069
• Проблемы с консистентностью. В открытом и закрытом меню элементы разных размеров; на странице материала в начальном состоянии в хлебных крошках только раздел, при скролле наверх к нему добавляется название материала.
• На странице поиска кнопка, которая выглядит как кнопка для закрытия меню на всех других страницах, на самом деле очищает поле поиска. Улучшить консистентность идентификации кнопки для закрытия меню и очистки фильтров #1074
• Появление хедера при скролле наверх. Особенно проблемна на мобилках, так как занимает часть экрана и, тем самым, уменьшает видимую область страницы. Выдвигающийся хедер на сайте отвлекает от чтения #979
• На экранах с небольшой высотой не проскроллить список разделов, то, что не влезает в экран, просто недоступно для тапа (бедный раздел Веб-платформа). Починить главное выпадающее меню на мобильных устройствах #1081
• У выпадашки с поиском есть нижняя граница, у закрытого меню есть тень, у открытого меню этого нет. Визуальное выделение нижней границы меню #1107
• Высота хедера статьи больше вьюпорта (и это противоречит даже исходному дизайну) Высота хедера статьи больше вьюпорта #819
• Навигация с клавиатуры: фокус, при закрытии меню Esc, должен оказываться либо на бургерной кнопке, либо на элементе, который был до этого в фокусе (это не точно, надо поисследовать вопрос). Ну и при повторном открытии меню слeшем фокус должен устанавливаться на поле поиска.

[TatianaFokina]

Комментарий от @slavkapiyavka про его пользовательский опыт:

Я решал эту проблему как постоянный читатель доки - у меня часто бывает так: читаю абзац (листаю вниз), встречается определение, описанное парой строчек выше. Чтобы вернуться и прочитать этот термин повторно, я кручу страницу вверх на пару строк, прицеливаюсь в нужную строчку и тут мне её загораживает плавно наезжающая шапка. И происходит это весьма часто.
ИМХО, подобная шапка мне не нужна - на телефоне я могу кликнуть на время и страница проскроллится до верха, а с компа можно нажать слэш.

Пользовательский опыт @codimario:

Да, постоянно всплывающий хедер при скроллинге - это боль( При чтении очень часто приходится проматывать вверх чтобы перечитать предыдущие предложения, и постоянное всплытие очень напрягает.

Опыт @StarHamster:

Я вообще никогда ничего из этого не делал [на телефоне кликнуть на время и страница проскроллится до верха, а с компа можно нажать слэш], чтобы добраться до шапки. И теперь лично мне будет сделать это сложнее.
Да, шапка в нынешнем формате немного надоедает. Наверное, мне было бы комфортно, если бы у неё вообще никакой анимации не было и она всегда была бы сверху 🤷

[vitya-ne]

На любой странице Доки:

1. нажимаю '/'. При этом:

• появляется панель поиска;
• фокус на строке поиска. можно писать.

2. Закрываю панель поиска нажав 'Esc'
3. Снова нажимаю '/'. При этом:

• появляется панель поиска;
• фокус НЕ на строке поиска. Что бы он появился надо нажать '/' еще раз.

Фича или баг ?

[TatianaFokina]

Фича или баг ?

Баг 😫 Также фокус, при закрытии меню Esc должен оказываться либо на бургерной кнопке, либо на элементе, который был до этого в фокусе (это не точно, надо поисследовать вопрос). Ну и при повторном открытии меню слэшем фокус должен устанавливаться на поле поиска.

Спасибо за находку!