swarm-ui: keyboard focus keeps a visible ring on interactive cards and notification boxes
This commit is contained in:
parent
dd5fde848f
commit
528c4476cb
2 changed files with 8 additions and 2 deletions
|
|
@ -181,7 +181,9 @@
|
|||
stroke: var(--green);
|
||||
}
|
||||
|
||||
.notify-box:focus {
|
||||
/* A click leaves no ring; keyboard focus keeps the browser's own, so a
|
||||
focused box does not look like a selected one. */
|
||||
.notify-box:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,11 @@
|
|||
[role="button"].ui-card:hover,
|
||||
[role="button"].ui-card:focus-visible {
|
||||
border-color: var(--purple);
|
||||
outline: none;
|
||||
}
|
||||
/* Keyboard focus needs more than the hover tint, so it keeps a real ring. */
|
||||
[role="button"].ui-card:focus-visible {
|
||||
outline: 2px solid var(--purple);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* A solid border (not just the hover tint above, which needs to keep
|
||||
meaning "hovering", not double as "selected") plus a faint fill so a
|
||||
|
|
|
|||
Loading…
Reference in a new issue