mirror of
https://github.com/Matysh/houseplan-card
synced 2026-10-03 21:28:59 +00:00
fix(stairs): лестница-переход без рамки фокуса (#686)
Решение владельца 2026-09-28: «убрать рамку фокуса полностью». Навигационная лестница View — фокусируемый `<g role="link" tabindex="0">` (#676), а своих стилей фокуса у `.hp-stair` не было, поэтому браузер рисовал чёрно-белое кольцо по прямоугольнику символа. Теперь `.hp-stair:focus` и `:focus-visible` — `outline: none`: ни кольца браузера, ни замены. Лестница остаётся в порядке Tab, Enter/Пробел по-прежнему переходят; hover и выделение в редакторе не тронуты. Свидетель — `demo/smoke_stairs.mjs`: снимок области лестницы с запасом на кольцо без фокуса и с клавиатурным фокусом (`:focus-visible`) обязан совпасть байт в байт; Enter на сфокусированной лестнице переводит на целевой этаж. Без правила смок красный (`focusedStairPaintsNoFrame`). STAIRS.md и оба changelog. Issue: #686 User-Visible: yes Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018qZfe7YS4rqEMKoVeS3GKd
This commit is contained in:
@@ -1590,6 +1590,11 @@ export const planStyles = css`
|
||||
.hp-stair-hit { fill: transparent; stroke: transparent; stroke-width: 14px; pointer-events: none; }
|
||||
.hp-stair.input-enabled .hp-stair-hit { pointer-events: all; }
|
||||
.hp-stair.navigable { cursor: pointer; }
|
||||
/* #686 (owner, 2026-09-28): a stair link shows no focus indicator at all —
|
||||
neither the browser's ring nor a replacement. It stays focusable, and
|
||||
Enter/Space still follow it (#676). */
|
||||
.hp-stair:focus,
|
||||
.hp-stair:focus-visible { outline: none; }
|
||||
:host([data-pointer-hover]) .hp-stair.navigable:hover .hp-stair-outline {
|
||||
stroke: var(--hp-accent);
|
||||
stroke-opacity: 1;
|
||||
|
||||
Reference in New Issue
Block a user