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

compose: Show focus ring on buttons only when using keyboard navigation. 

For the compose control buttons, the compose close button, and the send
later vdots button, we show the focus ring only on `focus-visible` and
not on `focus`.

Fixes part of: #27117.
This commit is contained in:
N-Shar-ma 2024-06-19 23:04:00 +05:30 committed by Tim Abbott
parent 5c1069872d
commit b852b5fef0
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/styles/compose.css
View File

@ -438,6 +438,14 @@
background: var(--color-compose-embedded-button-background-hover);
color: var(--color-compose-send-control-button-interactive);
}
&:focus:not(:focus-visible) {
outline: none;
}
&:focus-visible {
outline-color: var(--color-outline-focus);
}
}
.main-view-banner {
@ -1054,6 +1062,14 @@ textarea.new_message_textarea,
opacity: 1;
background-color: hsl(0deg 0% 0% / 10%);
}
&:focus:not(:focus-visible) {
outline: none;
}
&:focus-visible {
outline-color: var(--color-outline-focus);
}
}
.compose_control_button_container.disabled-on-hover:hover {
@ -1295,12 +1311,12 @@ textarea.new_message_textarea,
transform: scale(0.96);
}
&:focus {
outline: 0;
&:focus:not(:focus-visible) {
outline: none;
}
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
outline-color: var(--color-outline-focus);
}
&:hover {