Files

T

iu 997ec5e6c1 feat(frontend): replace emoji with inline Material Symbols icon system

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).

2026-10-10 13:19:29 +03:00

2.8 KiB

Raw Blame History

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 её состояние передаётся вспомогательным технологиям как «нажата/не нажата»

2.8 KiB Raw Blame History