[default-layout] Fix focus state of name/logo element in Navbar

sanity-io · Oct 6, 2020 · 700f0af · 700f0af
1 parent 9cb610a
commit 700f0af
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/@sanity/default-layout/src/navbar/Navbar.css b/packages/@sanity/default-layout/src/navbar/Navbar.css
@@ -31,11 +31,12 @@
 .brandingLink {
   text-decoration: none;
   color: inherit;
-  outline: none;
   border-radius: var(--extra-small-padding);
-
+  display: block;
+
   @nest &:focus {
-    background-color: color(var(--focus-color) a(20%));
+    outline: 0;
+    box-shadow: var(--input-box-shadow--focus);
   }
 }
 

diff --git a/packages/@sanity/default-layout/src/navbar/branding/Branding.tsx b/packages/@sanity/default-layout/src/navbar/branding/Branding.tsx
@@ -12,7 +12,7 @@ function Branding(props: Props) {
   const logo = props.logo || BrandLogo
 
   return (
-    <div className={styles.root} tabIndex={-1}>
+    <div className={styles.root}>
       {logo && <div className={styles.brandLogoContainer}>{createElement(logo)}</div>}
 
       {!logo && (