From ffe28e9e1282864519256229144816b6e2641b38 Mon Sep 17 00:00:00 2001
From: Drew Powers <drew@pow.rs>
Date: Fri, 8 Mar 2024 10:20:23 -0700
Subject: [PATCH] Fix leaky styles

---
 packages/nextra-theme-docs/css/styles.css       | 17 ++++++++---------
 .../src/components/back-to-top.tsx              |  2 +-
 .../nextra-theme-docs/src/components/banner.tsx |  2 +-
 .../nextra-theme-docs/src/components/footer.tsx |  2 +-
 .../nextra-theme-docs/src/components/navbar.tsx |  6 +++---
 .../nextra-theme-docs/src/components/select.tsx |  2 +-
 .../src/components/sidebar.tsx                  |  4 ++--
 .../nextra-theme-docs/src/components/toc.tsx    |  2 +-
 .../nextra-theme-docs/src/mdx-components.tsx    |  6 +++---
 9 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css
index 1422294967..77ec1f549b 100644
--- a/packages/nextra-theme-docs/css/styles.css
+++ b/packages/nextra-theme-docs/css/styles.css
@@ -22,19 +22,18 @@ body {
   @apply _w-full dark:_text-gray-100;
 }
 
-a,
-summary,
-button,
-input,
-[tabindex]:not([tabindex='-1']) {
+.nextra-focusable,
+.nextra-landmark a,
+.nextra-landmark button,
+.nextra-landmark input {
+  @apply _outline-none;
   &:focus-visible {
     @apply _outline-none;
     @apply _ring-2 _ring-primary-200 _ring-offset-1 _ring-offset-primary-300 dark:_ring-primary-800 dark:_ring-offset-primary-700;
   }
 }
 
-a,
-summary {
+.nextra-landmark a {
   @apply _rounded;
 }
 
@@ -82,7 +81,7 @@ summary {
 }
 
 @media (prefers-reduced-motion: reduce) and (max-width: 767px) {
-  article:before,
+  article::before,
   .nextra-sidebar-container,
   .nextra-sidebar-container.open,
   body.resizing .nextra-sidebar-container {
@@ -91,7 +90,7 @@ summary {
 }
 
 /* Content Typography */
-summary::-webkit-details-marker {
+.nextra-summary::-webkit-details-marker {
   @apply _hidden;
 }
 
diff --git a/packages/nextra-theme-docs/src/components/back-to-top.tsx b/packages/nextra-theme-docs/src/components/back-to-top.tsx
index 00789f657d..09a00bb103 100644
--- a/packages/nextra-theme-docs/src/components/back-to-top.tsx
+++ b/packages/nextra-theme-docs/src/components/back-to-top.tsx
@@ -19,7 +19,7 @@ export function BackToTop({
       onClick={scrollToTop}
       disabled={hidden}
       className={cn(
-        '_flex _items-center _gap-1.5 _transition _opacity-100 disabled:_opacity-0',
+        '_flex _items-center _gap-1.5 _transition _opacity-100 disabled:_opacity-0 nextra-focusable',
         className
       )}
     >
diff --git a/packages/nextra-theme-docs/src/components/banner.tsx b/packages/nextra-theme-docs/src/components/banner.tsx
index 814b515020..a161f21426 100644
--- a/packages/nextra-theme-docs/src/components/banner.tsx
+++ b/packages/nextra-theme-docs/src/components/banner.tsx
@@ -31,7 +31,7 @@ export function Banner(): ReactElement | null {
           <button
             type="button"
             aria-label="Dismiss banner"
-            className="_w-8 _h-8 _opacity-80 hover:_opacity-100"
+            className="_w-8 _h-8 _opacity-80 hover:_opacity-100 nextra-focusable"
             onClick={() => {
               try {
                 localStorage.setItem(banner.key, '0')
diff --git a/packages/nextra-theme-docs/src/components/footer.tsx b/packages/nextra-theme-docs/src/components/footer.tsx
index 8c3c1be684..f12274b182 100644
--- a/packages/nextra-theme-docs/src/components/footer.tsx
+++ b/packages/nextra-theme-docs/src/components/footer.tsx
@@ -7,7 +7,7 @@ import { LocaleSwitch } from './locale-switch'
 export function Footer({ menu }: { menu?: boolean }): ReactElement {
   const themeConfig = useThemeConfig()
   return (
-    <footer className="_bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent">
+    <footer className="_bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent nextra-landmark">
       <div
         className={cn(
           '_mx-auto _flex _max-w-[90rem] _gap-2 _py-2 _px-4',
diff --git a/packages/nextra-theme-docs/src/components/navbar.tsx b/packages/nextra-theme-docs/src/components/navbar.tsx
index 891b637220..cb1469c410 100644
--- a/packages/nextra-theme-docs/src/components/navbar.tsx
+++ b/packages/nextra-theme-docs/src/components/navbar.tsx
@@ -46,7 +46,7 @@ function NavbarMenu({
         className={cn(
           classes.link,
           classes.inactive,
-          'max-md:_hidden _items-center _whitespace-nowrap _rounded _flex _gap-1'
+          'max-md:_hidden _items-center _whitespace-nowrap _rounded _flex _gap-1 nextra-focusable'
         )}
       >
         {children}
@@ -91,7 +91,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
   return (
     <div className="nextra-nav-container _sticky _top-0 _z-20 _w-full _bg-transparent print:_hidden">
       <div className="nextra-nav-container-blur" />
-      <nav className="_mx-auto _flex _h-[var(--nextra-navbar-height)] _max-w-[90rem] _items-center _justify-end _gap-4 _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)]">
+      <nav className="_mx-auto _flex _h-[var(--nextra-navbar-height)] _max-w-[90rem] _items-center _justify-end _gap-4 _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)] nextra-landmark">
         {themeConfig.logoLink ? (
           <NextLink
             href={
@@ -175,7 +175,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
         <button
           type="button"
           aria-label="Menu"
-          className="nextra-hamburger _rounded active:_bg-gray-400/20 md:_hidden"
+          className="nextra-hamburger _rounded active:_bg-gray-400/20 md:_hidden nextra-focusable"
           onClick={() => setMenu(!menu)}
         >
           <MenuIcon className={cn({ open: menu })} />
diff --git a/packages/nextra-theme-docs/src/components/select.tsx b/packages/nextra-theme-docs/src/components/select.tsx
index c9b9563ee2..6a67063430 100644
--- a/packages/nextra-theme-docs/src/components/select.tsx
+++ b/packages/nextra-theme-docs/src/components/select.tsx
@@ -50,7 +50,7 @@ export function Select({
           ref={trigger}
           title={title}
           className={cn(
-            '_h-7 _rounded-md _px-2 _text-left _text-xs _font-medium _text-gray-600 _transition-colors dark:_text-gray-400',
+            '_h-7 _rounded-md _px-2 _text-left _text-xs _font-medium _text-gray-600 _transition-colors dark:_text-gray-400 nextra-focusable',
             open
               ? '_bg-gray-200 _text-gray-900 dark:_bg-primary-100/10 dark:_text-gray-50'
               : 'hover:_bg-gray-100 hover:_text-gray-900 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50',
diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
index 4a1ed78ce9..3fa9fad359 100644
--- a/packages/nextra-theme-docs/src/components/sidebar.tsx
+++ b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -259,7 +259,7 @@ function File({
                 href={`#${id}`}
                 className={cn(
                   classes.link,
-                  '_flex _gap-2 before:_opacity-25 before:_content-["#"]',
+                  '_flex _gap-2 before:_opacity-25 before:_content-["#"] nextra-focusable',
                   activeAnchor[id]?.isActive ? classes.active : classes.inactive
                 )}
                 onClick={() => {
@@ -469,7 +469,7 @@ export function Sidebar({
             {themeConfig.sidebar.toggleButton && (
               <button
                 title={showSidebar ? 'Hide sidebar' : 'Show sidebar'}
-                className="max-md:_hidden _h-7 _rounded-md _transition-colors _text-gray-600 dark:_text-gray-400 _px-2 hover:_bg-gray-100 hover:_text-gray-900 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50"
+                className="max-md:_hidden _h-7 _rounded-md _transition-colors _text-gray-600 dark:_text-gray-400 _px-2 hover:_bg-gray-100 hover:_text-gray-900 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 nextra-focusable"
                 onClick={() => {
                   setSidebar(!showSidebar)
                   setToggleAnimation(true)
diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
index 6df847f5f1..4b9ad87cb5 100644
--- a/packages/nextra-theme-docs/src/components/toc.tsx
+++ b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -81,7 +81,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
                     activeAnchor[id]?.isActive
                       ? '_text-primary-600 contrast-more:!_text-primary-600'
                       : '_text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300',
-                    'contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _w-full _break-words'
+                    'contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _w-full _break-words nextra-focusable'
                   )}
                 >
                   {removeLinks(value)}
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index 38f11e5da1..3e80705d1a 100644
--- a/packages/nextra-theme-docs/src/mdx-components.tsx
+++ b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -85,7 +85,7 @@ const createHeading = (
           <a
             href={`#${id}`}
             id={id}
-            className="subheading-anchor"
+            className="subheading-anchor nextra-focusable"
             aria-label="Permalink for this section"
             ref={obRef}
           />
@@ -151,7 +151,7 @@ function Summary({
 }: ComponentProps<'summary'>): ReactElement {
   return (
     <summary
-      className="_flex _items-center _cursor-pointer _p-1 _transition-colors hover:_bg-gray-100 dark:hover:_bg-neutral-800"
+      className="_flex _items-center _cursor-pointer _p-1 _transition-colors hover:_bg-gray-100 dark:hover:_bg-neutral-800 nextra-summary nextra-focusable"
       {...props}
     >
       {children}
@@ -174,7 +174,7 @@ export const Link = ({ href = '', className, ...props }: AnchorProps) => (
     href={href}
     newWindow={EXTERNAL_HREF_REGEX.test(href)}
     className={cn(
-      '_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]',
+      '_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font] nextra-focusable',
       className
     )}
     {...props}