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).
44 lines
2.8 KiB
Markdown
44 lines
2.8 KiB
Markdown
# Spec Delta
|
|
|
|
## Purpose
|
|
|
|
Единая система иконок веб-интерфейса: самодостаточные векторные иконки, которые наследуют
|
|
цвет темы и корректно ведут себя для вспомогательных технологий.
|
|
|
|
## ADDED Requirements
|
|
|
|
### Requirement: Самодостаточные векторные иконки
|
|
Интерфейс SHALL отображать иконки как векторную графику, встроенную в документ, без запросов
|
|
к внешним источникам за иконками.
|
|
|
|
#### Scenario: Отображение иконки
|
|
- **WHEN** интерфейс показывает иконку (например, лайк, тему, закрытие лайтбокса)
|
|
- **THEN** она отрисована встроенной векторной графикой, а не эмодзи или символом системного шрифта
|
|
|
|
#### Scenario: Автономная загрузка
|
|
- **WHEN** страница загружается без доступа к внешней сети, кроме собственного сервера
|
|
- **THEN** все иконки отображаются, так как не требуют внешних ресурсов
|
|
|
|
### Requirement: Наследование цвета темы
|
|
Иконка SHALL наследовать цвет текущей темы и изменять его при переключении темы.
|
|
|
|
#### Scenario: Переключение темы
|
|
- **WHEN** пользователь переключает тему (light/dark/neutral)
|
|
- **THEN** цвет иконок меняется вместе с темой без дополнительных действий
|
|
|
|
### Requirement: Доступность иконок
|
|
Система SHALL скрывать декоративные иконки от вспомогательных технологий и давать доступное
|
|
имя смысловым иконочным элементам управления.
|
|
|
|
#### Scenario: Декоративная иконка
|
|
- **WHEN** иконка сопровождает видимый текст или находится внутри кнопки с текстом
|
|
- **THEN** она скрыта от скринридеров
|
|
|
|
#### Scenario: Иконочная кнопка без текста
|
|
- **WHEN** кнопка содержит только иконку (например, выбор темы)
|
|
- **THEN** кнопка имеет доступное имя
|
|
|
|
#### Scenario: Тумблер темы
|
|
- **WHEN** кнопка выбора темы активна или неактивна
|
|
- **THEN** её состояние передаётся вспомогательным технологиям как «нажата/не нажата»
|