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).
36 lines
4.0 KiB
Markdown
36 lines
4.0 KiB
Markdown
# Tasks
|
||
|
||
## 1. Ядро иконочной системы
|
||
|
||
- [x] 1.1 Создать `frontend/src/lib/icons/registry.ts`: записи `имя -> { path, filled?, label? }` с вендоренной inner-разметкой Material Symbols; проверить, что реестр импортируется без ошибок и содержит все иконки из инвентаря
|
||
- [x] 1.2 Реализовать `Icon.svelte` (пропсы `name`, `label`; `aria-hidden`/`focusable`, `role=img` при `label`, классы размера, `fill=currentColor`); проверить рендер известного и неизвестного имени (dev-warn)
|
||
- [x] 1.3 Реализовать `IconSprite.svelte` (один скрытый `<svg>` со всеми `<symbol id="i-...">` из реестра) и смонтировать его в `+layout.svelte`; проверить, что `<use>` в дочерних компонентах разрешается
|
||
- [x] 1.4 Реализовать `IconButton.svelte` с обязательным `label` (-> `aria-label` на `<button>`); проверить доступное имя в дереве доступности
|
||
|
||
## 2. Замена эмодзи и юникод-глифов
|
||
|
||
- [x] 2.1 `ThemeSwitcher`: заменить `☀️ 🌙 🌾 💻` на `light_mode`/`dark_mode`/`palette`/`brightness_auto`; проверить переключение тем и `aria-pressed`
|
||
- [x] 2.2 Логотип в `+layout.svelte`: заменить `📷` на `photo_camera` рядом с текстом «Galo»; проверить отображение в трёх темах
|
||
- [x] 2.3 Список альбомов: заменить `🖼️` на `image` (крупный плейсхолдер); проверить вёрстку карточки
|
||
- [x] 2.4 `PhotoGrid`: заменить `♥`/`💬` на `favorite`/`favorite_fill` и `mode_comment`; проверить счётчики и состояние «лайкнут»
|
||
- [x] 2.5 `Lightbox`: заменить `✕ ‹ ›` на `close`/`chevron_left`/`chevron_right`; проверить навигацию и закрытие
|
||
- [x] 2.6 Ссылки «назад к альбому» (участники, настройки): заменить `←` на `arrow_back`; проверить навигацию
|
||
|
||
## 3. Ведущие иконки контролов
|
||
|
||
- [x] 3.1 Список альбомов и страница альбома: добавить `add`/`photo_library` (создать, пустой список); проверить создание альбома
|
||
- [x] 3.2 `Uploader`: `cloud_upload`/`add_photo_alternate`; проверить загрузку фото
|
||
- [x] 3.3 `Lightbox`/share: `download`; проверить скачивание
|
||
- [x] 3.4 Участники/настройки: `group`, `settings`, `add_link`, `link_off`, `save`, `delete_forever`; проверить роли, share-ссылки, сохранение и удаление
|
||
- [x] 3.5 Навигация и вход: `login`, `logout`, `check`, `send`, `delete`, `content_copy`, `expand_more`; проверить login/logout, инвайт и комментарии
|
||
|
||
## 4. Доступность
|
||
|
||
- [x] 4.1 Проставить `aria-hidden="true" focusable="false"` декоративным иконкам и `aria-label` иконочным кнопкам; проверить через дерево доступности браузера
|
||
- [x] 4.2 Дать счётчикам лайков/комментариев доступные имена (`aria-label="N лайков"`); проверить, что число читается скринридером
|
||
|
||
## 5. Проверка
|
||
|
||
- [x] 5.1 Собрать фронтенд (`make frontend`) и прогнать `svelte-check`; проверить отсутствие ошибок типов и сборки
|
||
- [x] 5.2 Playwright-проверка: иконки отрисованы, эмодзи/юникод-глифы в разметке отсутствуют; проверить на трёх темах
|