paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

inbox: Don't show focus outlines without inbox relevant keypress.

Browse Source 
Untill user uses a keypress that inbox handles, we don't show
focus outlines.
This commit is contained in:
Aman Agrawal
2025-07-22 15:07:42 +05:30
committed by Tim Abbott
parent 9d643ba31b
commit 0f1cccc1cc
3 changed files with 98 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/zerver/app/index.html
View File

@@ -244,7 +244,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1943053 -->
</button>
</div>
</div>
<div id="inbox-view">
<div id="inbox-view" class="no-visible-focus-outlines">
<div class="inbox-container">
<div id="inbox-pane"></div>
</div>

2
web/src/inbox_ui.ts
View File

@@ -1620,6 +1620,8 @@ function page_down_navigation(): void {
}
export function change_focused_element(input_key: string): boolean {
// Start showing visible focus outlines.
$("#inbox-view").removeClass("no-visible-focus-outlines");
if (input_key === "tab" || input_key === "shift_tab") {
// Tabbing should be handled by browser but to keep the focus element same
// when we rerender or user uses other hotkeys, we need to track

145
web/styles/inbox.css
View File

@@ -119,18 +119,7 @@
outline: 0;
}
&:focus-visible {
.inbox-focus-border {
border-color: var(--color-outline-focus);
}
.collapsible-button > .zulip-icon {
opacity: 1;
}
}
&:hover,
&:focus-visible {
&:hover {
.collapsible-button {
visibility: visible;
}
@@ -200,16 +189,6 @@
background: var(--color-background-inbox-row-hover);
}
&:focus-visible {
.inbox-focus-border {
border: 2px solid var(--color-outline-focus);
border-radius: 3px;
}
outline: 0;
padding: 0;
}
.inbox-left-part {
grid-template:
auto / min-content minmax(0, 1fr)
@@ -241,10 +220,6 @@
align-items: center;
border-radius: 3px;
margin-left: 3px;
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
}
}
@@ -265,10 +240,6 @@
count from affecting overall row
size as test scales up. */
align-self: stretch;
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
}
.unread_mention_info {
@@ -364,10 +335,6 @@
.inbox-row,
.inbox-header {
/* Don't show the icons unless user is visibly focused
on the element or one of the elements within it. */
&:focus-within:not(:focus),
&:focus-visible,
&:hover {
.inbox-row-visibility-policy-inherit,
.inbox-action-button {
@@ -394,10 +361,6 @@
display: none;
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--color-outline-focus);
}
& i {
padding: 0.3125em; /* 5px at 16px em */
opacity: 0.3;
@@ -448,7 +411,6 @@
font-size: 1em;
}
&:focus-visible,
&:hover {
.inbox-header-name-text,
.collapsible-button .zulip-icon,
@@ -457,13 +419,6 @@
opacity: 1;
}
}
&:focus-visible {
background: light-dark(
transparent,
var(--color-background-hover-popover-menu)
);
}
}
.hidden_by_filters {
@@ -523,10 +478,6 @@
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
}
#recent-view-filter_widget .dropdown_widget_value,
@@ -675,3 +626,97 @@
/* 5px at 16px / 1em */
padding: 1px 0.3125em 1px 0;
}
#inbox-view.no-visible-focus-outlines
.inbox-container
#inbox-pane
[tabindex="0"] {
/* Remove default focus outline from elements. */
&:focus-visible {
outline: 0;
}
}
#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane {
/* Only show focus outlines when user uses keyboard. */
#inbox-filter_widget {
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
}
.inbox-header {
&:focus-visible {
.inbox-focus-border {
border-color: var(--color-outline-focus);
}
.collapsible-button > .zulip-icon {
opacity: 1;
}
.collapsible-button {
visibility: visible;
}
}
}
.inbox-row {
&:focus-visible {
.inbox-focus-border {
border: 2px solid var(--color-outline-focus);
border-radius: 3px;
}
outline: 0;
padding: 0;
}
}
.visibility-policy-indicator {
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
}
.inbox-action-button {
&:focus-visible {
box-shadow: 0 0 0 2px var(--color-outline-focus);
}
}
.unread-count-focus-outline {
&:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
}
.inbox-row,
.inbox-header {
/* Don't show the icons unless user is visibly focused
on the element or one of the elements within it. */
&:focus-within:not(:focus),
&:focus-visible {
.inbox-row-visibility-policy-inherit,
.inbox-action-button {
opacity: 1;
}
}
}
.inbox-folder {
&:focus-visible {
.inbox-header-name-text,
.collapsible-button .zulip-icon,
.unread_mention_info,
.unread_count {
opacity: 1;
}
background: light-dark(
transparent,
var(--color-background-hover-popover-menu)
);
}
}
}