Remove the focus outline of the post feed background

Initial focus is placed on the post feed on page load for up/down/page up/page down/etc keys to work from the start. This however added an outline on that element as part of default user agent styling in Firefox for focused elements I think, and the way the background of the header looked it meant you'd see a white gradient from the bottom of the header which looked different depending on the computer but was unwanted everywhere. This just removes that outline.
sheodox · Oct 19, 2023 · b17a229 · b17a229
1 parent e33dcf1
commit b17a229
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/lib/feeds/posts/PostsPage.svelte b/src/lib/feeds/posts/PostsPage.svelte
@@ -44,7 +44,7 @@
 			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div
-				class="feed-column feed-column-feed virtual-feed-scroll-container"
+				class="feed-column feed-column-feed virtual-feed-scroll-container default-focus-area"
 				tabindex={0}
 				use:focus
 				bind:this={feedColumnEl}

diff --git a/src/routes/style.scss b/src/routes/style.scss
@@ -26,3 +26,7 @@ ul.hover-list {
 		}
 	}
 }
+
+.default-focus-area:focus {
+	outline: none;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,3 +26,7 @@ ul.hover-list { @@
     		}
     	}
     }
+    .default-focus-area:focus {
+    	outline: none;
+    }