UX: устранить замечания critique для каталога сотрудников #37

Closed
opened 2026-08-28 09:02:42 +00:00 by agent · 1 comment
Collaborator

Цель

Устранить все замечания UX-критики для каталога сотрудников и связанных экранов админки.

P1 — доступность и базовая управляемость

  • Добавить видимые label для поиска, select-фильтров и дат.
  • Сделать строки каталога доступными с клавиатуры; предпочтительно заменить JS-клик по всей строке на обычную ссылку в поле ФИО.
  • Развести действия внутреннего профиля и внешней canonical-ссылки.
  • Реализовать полноценный modal «Колонки»: role="dialog", aria-modal, aria-labelledby, закрытие по Escape, initial focus, focus trap и возврат фокуса.
  • Добавить aria-expanded и aria-controls для кнопки «Колонки».
  • Добавить видимые :focus-visible-состояния для ссылок, кнопок, фильтров и интерактивных элементов.

P1 — фильтры и состояние поиска

  • Сгруппировать фильтры по смыслу: поиск, статус/качество, период, сортировка и пагинация.
  • Добавить кнопку «Сбросить фильтры».
  • Показывать активные условия и диапазон результатов, например «Показаны 1–25 из 143».
  • Привести применение фильтров и изменение лимита страницы к одной модели поведения.
  • Добавить aria-current для активного пункта навигации.

P2 — таблица и информационная иерархия

  • Сократить набор колонок по умолчанию до ключевых: ФИО, статус, должность, актуальность записи и профиль.
  • Оставить публикации, курсы, новости, адрес и прочие поля дополнительными колонками или данными карточки сотрудника.
  • Для узких экранов предусмотреть адаптивное представление или закрепление ключевой колонки.
  • Сделать смысл полей «Впервые найден», «Последний раз найден», «Год начала» и «Требует проверки» понятным через подписи или подсказки.
  • Добавить пресеты колонок для типовых сценариев: проверка, контакты, полный профиль.

P2 — состояния и обратная связь

  • Разделить состояния loading, пустой результат, пустая база, ошибка backend и устаревшие данные.
  • Для пустого результата предложить очистить фильтры.
  • Не подавлять ошибки polling молча; показывать понятное сообщение и действие восстановления.
  • Оформить dashboard progress bar как доступный role="progressbar" с aria-valuemin, aria-valuemax, aria-valuenow и доступным обновлением статуса.
  • Заменить англоязычный aria-label="Parsing progress" на русское описание.

P3 — визуальная система

  • Усилить визуальную иерархию каталога как рабочего места оператора, а не технической выгрузки.
  • Проверить типографику и решить, нужна ли более выразительная типографическая система вместо системного Arial.
  • Проверить контраст и состояния hover/pressed/disabled после изменений.

Критерии готовности

  • Все пункты чек-листа закрыты или явно обоснованы.
  • Каталог удобен для клавиатуры и screen reader.
  • На desktop не требуется постоянная горизонтальная прокрутка для основного сценария.
  • На mobile нет переполнения шапки и фильтров.
  • Есть тесты/проверки для dialog, labels, keyboard navigation, progressbar и основных empty/error states.
  • Повторный impeccable critique не выявляет blocking UX/a11y-проблем.

Связанные материалы: critique target app/templates/directory.html, snapshot в .impeccable/critique/.

## Цель Устранить все замечания UX-критики для каталога сотрудников и связанных экранов админки. ## P1 — доступность и базовая управляемость - [ ] Добавить видимые `label` для поиска, select-фильтров и дат. - [ ] Сделать строки каталога доступными с клавиатуры; предпочтительно заменить JS-клик по всей строке на обычную ссылку в поле ФИО. - [ ] Развести действия внутреннего профиля и внешней canonical-ссылки. - [ ] Реализовать полноценный modal «Колонки»: `role="dialog"`, `aria-modal`, `aria-labelledby`, закрытие по Escape, initial focus, focus trap и возврат фокуса. - [ ] Добавить `aria-expanded` и `aria-controls` для кнопки «Колонки». - [ ] Добавить видимые `:focus-visible`-состояния для ссылок, кнопок, фильтров и интерактивных элементов. ## P1 — фильтры и состояние поиска - [ ] Сгруппировать фильтры по смыслу: поиск, статус/качество, период, сортировка и пагинация. - [ ] Добавить кнопку «Сбросить фильтры». - [ ] Показывать активные условия и диапазон результатов, например «Показаны 1–25 из 143». - [ ] Привести применение фильтров и изменение лимита страницы к одной модели поведения. - [ ] Добавить `aria-current` для активного пункта навигации. ## P2 — таблица и информационная иерархия - [ ] Сократить набор колонок по умолчанию до ключевых: ФИО, статус, должность, актуальность записи и профиль. - [ ] Оставить публикации, курсы, новости, адрес и прочие поля дополнительными колонками или данными карточки сотрудника. - [ ] Для узких экранов предусмотреть адаптивное представление или закрепление ключевой колонки. - [ ] Сделать смысл полей «Впервые найден», «Последний раз найден», «Год начала» и «Требует проверки» понятным через подписи или подсказки. - [ ] Добавить пресеты колонок для типовых сценариев: проверка, контакты, полный профиль. ## P2 — состояния и обратная связь - [ ] Разделить состояния `loading`, пустой результат, пустая база, ошибка backend и устаревшие данные. - [ ] Для пустого результата предложить очистить фильтры. - [ ] Не подавлять ошибки polling молча; показывать понятное сообщение и действие восстановления. - [ ] Оформить dashboard progress bar как доступный `role="progressbar"` с `aria-valuemin`, `aria-valuemax`, `aria-valuenow` и доступным обновлением статуса. - [ ] Заменить англоязычный `aria-label="Parsing progress"` на русское описание. ## P3 — визуальная система - [ ] Усилить визуальную иерархию каталога как рабочего места оператора, а не технической выгрузки. - [ ] Проверить типографику и решить, нужна ли более выразительная типографическая система вместо системного Arial. - [ ] Проверить контраст и состояния hover/pressed/disabled после изменений. ## Критерии готовности - Все пункты чек-листа закрыты или явно обоснованы. - Каталог удобен для клавиатуры и screen reader. - На desktop не требуется постоянная горизонтальная прокрутка для основного сценария. - На mobile нет переполнения шапки и фильтров. - Есть тесты/проверки для dialog, labels, keyboard navigation, progressbar и основных empty/error states. - Повторный `impeccable critique` не выявляет blocking UX/a11y-проблем. Связанные материалы: critique target `app/templates/directory.html`, snapshot в `.impeccable/critique/`.
Author
Collaborator

Задача выполнена в PR #38 и слита в main merge-коммитом e1ba77c. Реализованы пункты UX/a11y-критики каталога: доступные фильтры и диалог колонок, клавиатурная навигация, адаптивная таблица, empty/error/loading/stale-состояния и доступный progress bar. Документация синхронизирована в последнем коммите PR a989c5c. Закрываю issue.

Задача выполнена в PR #38 и слита в `main` merge-коммитом `e1ba77c`. Реализованы пункты UX/a11y-критики каталога: доступные фильтры и диалог колонок, клавиатурная навигация, адаптивная таблица, empty/error/loading/stale-состояния и доступный progress bar. Документация синхронизирована в последнем коммите PR `a989c5c`. Закрываю issue.
agent closed this issue 2026-09-11 09:52:43 +00:00
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: admin/miem_workers#37