iu
997ec5e6c1
Add a self-contained icon system: vendored Material Symbols registry, an <Icon> component that references a single <symbol> sprite via <use>, plus IconButton/IconSprite. Replace every emoji/Unicode glyph (logo, theme switcher, cover placeholder, like/comment counts, lightbox controls, back links) and add leading icons to key controls. Decorative icons are aria-hidden; icon-only buttons get labels; theme toggles expose aria-pressed; counters get accessible names. Recorded in openspec change material-icons-ui (all tasks complete).
4.0 KiB
4.0 KiB
Tasks
1. Ядро иконочной системы
- 1.1 Создать
frontend/src/lib/icons/registry.ts: записиимя -> { path, filled?, label? }с вендоренной inner-разметкой Material Symbols; проверить, что реестр импортируется без ошибок и содержит все иконки из инвентаря - 1.2 Реализовать
Icon.svelte(пропсыname,label;aria-hidden/focusable,role=imgприlabel, классы размера,fill=currentColor); проверить рендер известного и неизвестного имени (dev-warn) - 1.3 Реализовать
IconSprite.svelte(один скрытый<svg>со всеми<symbol id="i-...">из реестра) и смонтировать его в+layout.svelte; проверить, что<use>в дочерних компонентах разрешается - 1.4 Реализовать
IconButton.svelteс обязательнымlabel(->aria-labelна<button>); проверить доступное имя в дереве доступности
2. Замена эмодзи и юникод-глифов
- 2.1
ThemeSwitcher: заменить☀️ 🌙 🌾 💻наlight_mode/dark_mode/palette/brightness_auto; проверить переключение тем иaria-pressed - 2.2 Логотип в
+layout.svelte: заменить📷наphoto_cameraрядом с текстом «Galo»; проверить отображение в трёх темах - 2.3 Список альбомов: заменить
🖼️наimage(крупный плейсхолдер); проверить вёрстку карточки - 2.4
PhotoGrid: заменить♥/💬наfavorite/favorite_fillиmode_comment; проверить счётчики и состояние «лайкнут» - 2.5
Lightbox: заменить✕ ‹ ›наclose/chevron_left/chevron_right; проверить навигацию и закрытие - 2.6 Ссылки «назад к альбому» (участники, настройки): заменить
←наarrow_back; проверить навигацию
3. Ведущие иконки контролов
- 3.1 Список альбомов и страница альбома: добавить
add/photo_library(создать, пустой список); проверить создание альбома - 3.2
Uploader:cloud_upload/add_photo_alternate; проверить загрузку фото - 3.3
Lightbox/share:download; проверить скачивание - 3.4 Участники/настройки:
group,settings,add_link,link_off,save,delete_forever; проверить роли, share-ссылки, сохранение и удаление - 3.5 Навигация и вход:
login,logout,check,send,delete,content_copy,expand_more; проверить login/logout, инвайт и комментарии
4. Доступность
- 4.1 Проставить
aria-hidden="true" focusable="false"декоративным иконкам иaria-labelиконочным кнопкам; проверить через дерево доступности браузера - 4.2 Дать счётчикам лайков/комментариев доступные имена (
aria-label="N лайков"); проверить, что число читается скринридером
5. Проверка
- 5.1 Собрать фронтенд (
make frontend) и прогнатьsvelte-check; проверить отсутствие ошибок типов и сборки - 5.2 Playwright-проверка: иконки отрисованы, эмодзи/юникод-глифы в разметке отсутствуют; проверить на трёх темах