Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

icons: Display focused icons only without default outline. 

The :focus-visible selector is more appropriate here, as that
enables browsers to determine whether focus should be displayed
or not. That's generally the case with keyboard-achieved focus,
but pointers and fingers generally do not need focus to be
displayed.

By not displaying a different icon color on simple :focus, this
will also ensure that star icons behave predictably when hovered
or focused via keyboard in both starred and unstarred states.
This commit is contained in:
Karl Stolley 2023-08-17 14:30:41 -05:00 committed by Tim Abbott
parent 2ac578537c
commit adb3b24cb2
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/styles/zulip.css
View File

@ -1208,8 +1208,16 @@ td.pointer {
transition: unset;
}
&:focus {
/* Remove the outline but do not color on focus;
focus-visible is more appropriate for the color
changes, as it only applies color when focus
is achieved from a keyboard or other pointerless
device. */
outline: 0;
}
&:hover,
&:focus,
&:focus-visible {
outline: 0;
color: var(--color-message-action-interactive);