diff --git a/web/src/inbox_ui.ts b/web/src/inbox_ui.ts
index 2d2bafb697..99cbbfeb1f 100644
--- a/web/src/inbox_ui.ts
+++ b/web/src/inbox_ui.ts
@@ -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
diff --git a/web/styles/inbox.css b/web/styles/inbox.css
index 1267acd7c4..81b16ddb31 100644
--- a/web/styles/inbox.css
+++ b/web/styles/inbox.css
@@ -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)
+ );
+ }
+ }
+}