doka-guide
Редизайн хедера Доки
Здесь собираем текущие проблемы с нашим многострадальным хедером, и мечтаем о прекрасном будущем.
UPD: часть проблем решили в огромном пиаре с первым подходом к рефакторингу меню.
Проблемы
- Анимация выезжания и заезжания при открытии. Она довольно заметная и медленная. В #717 сказано, что анимация вообще не такая, как было запланировано.
- Анимацию никак не отключить для тех, кто этого хочет (не используем
prefers-reduced-motion). - Пользователи хотели бы иметь постоянный доступ к строке поиска. #1158
- Сложная задачка: для клавиатурных сокращений нельзя использовать один символ. Можно оставить, как есть, просто у нас всегда будет нарушение этого критерия из WCAG. #1076
- Собачка не анимирована, как было задумано. #719
Пожелания
- Перенести переключатель темы из футера в хедер (?).
Решённое
- Анимация местами странно себя ведёт при скролле наверх страницы из-за того, что анимирована тень. #1171
- Как свёрстан хедер сейчас. На проде ДВА меню: одно всегда наверху, другое, с такими же элементами, появляется поверх всегда открытого, когда его раскрываешь.
- Доступность для пользователей клавиатуры, скринридеров и голосового управления: у кнопки для открытия меню нет состояния этого открытия и закрытия; фокус слетает с кнопки, когда меню открыто; кнопка и второе выпадающие меню не связаны программно с помощью ARIA (и в текущей реализации это не исправить). #1069
- Проблемы с консистентностью. В открытом и закрытом меню элементы разных размеров; на странице материала в начальном состоянии в хлебных крошках только раздел, при скролле наверх к нему добавляется название материала.
- На странице поиска кнопка, которая выглядит как кнопка для закрытия меню на всех других страницах, на самом деле очищает поле поиска. #1074
- Появление хедера при скролле наверх. Особенно проблемна на мобилках, так как занимает часть экрана и, тем самым, уменьшает видимую область страницы. #979
- На экранах с небольшой высотой не проскроллить список разделов, то, что не влезает в экран, просто недоступно для тапа (бедный раздел Веб-платформа). #1081
- У выпадашки с поиском есть нижняя граница, у закрытого меню есть тень, у открытого меню этого нет. #1107
- Высота хедера статьи больше вьюпорта (и это противоречит даже исходному дизайну) #819
- Навигация с клавиатуры: фокус, при закрытии меню Esc, должен оказываться либо на бургерной кнопке, либо на элементе, который был до этого в фокусе (это не точно, надо поисследовать вопрос). Ну и при повторном открытии меню слeшем фокус должен устанавливаться на поле поиска.
Комментарий от @slavkapiyavka про его пользовательский опыт:
Я решал эту проблему как постоянный читатель доки - у меня часто бывает так: читаю абзац (листаю вниз), встречается определение, описанное парой строчек выше. Чтобы вернуться и прочитать этот термин повторно, я кручу страницу вверх на пару строк, прицеливаюсь в нужную строчку и тут мне её загораживает плавно наезжающая шапка. И происходит это весьма часто. ИМХО, подобная шапка мне не нужна - на телефоне я могу кликнуть на время и страница проскроллится до верха, а с компа можно нажать слэш.
Пользовательский опыт @codimario:
Да, постоянно всплывающий хедер при скроллинге - это боль( При чтении очень часто приходится проматывать вверх чтобы перечитать предыдущие предложения, и постоянное всплытие очень напрягает.
Опыт @StarHamster:
Я вообще никогда ничего из этого не делал [на телефоне кликнуть на время и страница проскроллится до верха, а с компа можно нажать слэш], чтобы добраться до шапки. И теперь лично мне будет сделать это сложнее. Да, шапка в нынешнем формате немного надоедает. Наверное, мне было бы комфортно, если бы у неё вообще никакой анимации не было и она всегда была бы сверху 🤷
На любой странице Доки:
- нажимаю '/'. При этом:
- появляется панель поиска;
- фокус на строке поиска. можно писать.
- Закрываю панель поиска нажав 'Esc'
- Снова нажимаю '/'. При этом:
- появляется панель поиска;
- фокус НЕ на строке поиска. Что бы он появился надо нажать '/' еще раз.
Фича или баг ?
Фича или баг ?
Баг 😫 Также фокус, при закрытии меню Esc должен оказываться либо на бургерной кнопке, либо на элементе, который был до этого в фокусе (это не точно, надо поисследовать вопрос). Ну и при повторном открытии меню слэшем фокус должен устанавливаться на поле поиска.
Спасибо за находку!