From adb3b24cb29022d818d7589586c736952f1387ec Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Thu, 17 Aug 2023 14:30:41 -0500 Subject: [PATCH] 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. --- web/styles/zulip.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/web/styles/zulip.css b/web/styles/zulip.css index e1b41a73cf..9fcb910766 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -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);