From 3843f9f28f8c4702cd786719a94de8ae3442e0cd Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Fri, 30 Aug 2024 00:59:13 +0800
Subject: [PATCH 1/5] [v3] reduce focus-visible style conflicts with external
 components

---
 .changeset/wild-llamas-prove.md               |   7 +
 packages/nextra-theme-blog/src/styles.css     |  77 ++---
 packages/nextra-theme-docs/css/styles.css     | 301 +++++++++---------
 .../nextra-theme-docs/src/components/404.tsx  |   2 +-
 .../src/components/anchor.tsx                 |   6 +-
 .../src/components/back-to-top.tsx            |   1 +
 .../src/components/banner.tsx                 |   2 +-
 .../src/components/bleed.tsx                  |   2 +-
 .../src/components/breadcrumb.tsx             |   2 +-
 .../src/components/footer.tsx                 |   2 +-
 .../src/components/input.tsx                  |   1 +
 .../src/components/nav-links.tsx              |   2 +-
 .../src/components/navbar.tsx                 |   2 +-
 .../src/components/search.tsx                 |   2 +-
 .../src/components/select.tsx                 |   2 +-
 .../src/components/sidebar.tsx                |   2 +-
 .../src/components/skip-nav.tsx               |   2 +-
 .../nextra-theme-docs/src/components/toc.tsx  |   2 +-
 .../nextra-theme-docs/src/mdx-components.tsx  |   5 +-
 .../nextra/src/client/components/button.tsx   |   1 +
 .../nextra/src/client/components/cards.tsx    |   1 +
 .../src/client/components/file-tree.tsx       |   2 +-
 packages/nextra/src/client/components/pre.tsx |   2 +-
 .../nextra/src/client/components/tabs.tsx     |   4 +-
 packages/nextra/styles/focus-ring.css         |  25 ++
 25 files changed, 245 insertions(+), 212 deletions(-)
 create mode 100644 .changeset/wild-llamas-prove.md
 create mode 100644 packages/nextra/styles/focus-ring.css

diff --git a/.changeset/wild-llamas-prove.md b/.changeset/wild-llamas-prove.md
new file mode 100644
index 00000000000..9cdcfb9c5c9
--- /dev/null
+++ b/.changeset/wild-llamas-prove.md
@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+reduce focus-visible style conflicts with external components.
diff --git a/packages/nextra-theme-blog/src/styles.css b/packages/nextra-theme-blog/src/styles.css
index cf7e12b3d95..978e9e23209 100644
--- a/packages/nextra-theme-blog/src/styles.css
+++ b/packages/nextra-theme-blog/src/styles.css
@@ -1,46 +1,51 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'nextra/styles/code-block.css';
-@import 'nextra/styles/subheading-anchor.css';
-@import 'nextra/styles/scrollbar.css';
-@import 'nextra/styles/steps.css';
-@import 'nextra/styles/cards.css';
-
-html {
-  @apply _scroll-pt-5;
-}
+@import 'tailwindcss/base' layer(nextra-base);
+@import 'tailwindcss/components' layer(nextra-components);
+@import 'nextra/styles/focus-ring.css' layer(nextra-components);
+@import 'nextra/styles/code-block.css' layer(nextra-components);
+@import 'nextra/styles/subheading-anchor.css' layer(nextra-components);
+@import 'nextra/styles/scrollbar.css' layer(nextra-components);
+@import 'nextra/styles/steps.css' layer(nextra-components);
+@import 'nextra/styles/cards.css' layer(nextra-components);
+@import 'tailwindcss/utilities' layer(nextra-utilities);
+
+@layer nextra-base {
+  html {
+    @apply _scroll-pt-5;
+  }
 
-body {
-  @apply _px-4 _bg-[rgb(var(--nextra-bg))];
-}
+  body {
+    @apply _px-4 _bg-[rgb(var(--nextra-bg))];
+  }
 
-article {
-  @apply _mx-auto _block _pt-20 _pb-32;
-}
+  article {
+    @apply _mx-auto _block _pt-20 _pb-32;
+  }
 
-article img {
-  @apply _mx-auto;
-}
+  article img {
+    @apply _mx-auto;
+  }
 
-h1 {
-  letter-spacing: -0.03em;
+  h1 {
+    letter-spacing: -0.03em;
+  }
 }
 
-._prose code {
-  &:before,
-  &:after {
-    @apply _hidden;
+@layer nextra-components {
+  ._prose code {
+    &:before,
+    &:after {
+      @apply _hidden;
+    }
+    .line {
+      @apply _font-normal;
+    }
   }
-  .line {
-    @apply _font-normal;
-  }
-}
 
-._prose .nextra-callout p {
-  @apply _m-0;
-}
+  ._prose .nextra-callout p {
+    @apply _m-0;
+  }
 
-.footnotes a[data-footnote-backref] {
-  font-family: initial;
+  .footnotes a[data-footnote-backref] {
+    font-family: initial;
+  }
 }
diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css
index 14222949671..a176aea6a60 100644
--- a/packages/nextra-theme-docs/css/styles.css
+++ b/packages/nextra-theme-docs/css/styles.css
@@ -1,193 +1,182 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'nextra/styles/code-block.css';
-@import 'nextra/styles/subheading-anchor.css';
-@import 'nextra/styles/scrollbar.css';
-@import 'nextra/styles/steps.css';
-@import 'nextra/styles/cards.css';
-@import './hamburger.css';
-@import './typesetting-article.css';
-
-html {
-  @apply _antialiased _text-base _scroll-pt-[--nextra-navbar-height];
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1,
-    'ss01' 1;
-  -webkit-tap-highlight-color: transparent;
-}
+@import 'tailwindcss/base' layer(nextra-base);
+@import 'tailwindcss/components' layer(nextra-components);
+@import 'nextra/styles/code-block.css' layer(nextra-components);
+@import 'nextra/styles/subheading-anchor.css' layer(nextra-components);
+@import 'nextra/styles/scrollbar.css' layer(nextra-components);
+@import 'nextra/styles/steps.css' layer(nextra-components);
+@import 'nextra/styles/cards.css' layer(nextra-components);
+@import 'nextra/styles/focus-ring.css' layer(nextra-components);
+@import './hamburger.css' layer(nextra-components);
+@import './typesetting-article.css' layer(nextra-components);
+@import 'tailwindcss/utilities' layer(nextre-utilities);
+
+@layer nextra-base {
+  html {
+    @apply _antialiased _text-base _scroll-pt-[--nextra-navbar-height];
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1,
+      'ss01' 1;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-body {
-  @apply _w-full dark:_text-gray-100;
-}
+  body {
+    @apply _w-full dark:_text-gray-100;
+  }
 
-a,
-summary,
-button,
-input,
-[tabindex]:not([tabindex='-1']) {
-  &: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;
+  /* Content Typography */
+  summary::-webkit-details-marker {
+    @apply _hidden;
+  }
+  input[type='search'] {
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      -webkit-appearance: none;
+    }
   }
 }
 
-a,
-summary {
-  @apply _rounded;
-}
+@layer nextra-components {
+  .nextra-content {
+    @apply _text-slate-700 dark:_text-slate-200;
+  }
 
-.nextra-content {
-  @apply _text-slate-700 dark:_text-slate-200;
-}
+  @media (max-width: 767px) {
+    .nextra-sidebar-container {
+      @apply _fixed _pt-[calc(var(--nextra-navbar-height))] _top-0 _w-full _bottom-0 _z-[15] _overscroll-contain;
+      transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
+      will-change: transform, opacity;
+      contain: layout style;
+      backface-visibility: hidden;
+
+      & > .nextra-scrollbar {
+        mask-image: linear-gradient(to bottom, transparent, #000 20px),
+          linear-gradient(to left, #000 10px, transparent 10px);
+      }
+    }
 
-@media (max-width: 767px) {
-  .nextra-sidebar-container {
-    @apply _fixed _pt-[calc(var(--nextra-navbar-height))] _top-0 _w-full _bottom-0 _z-[15] _overscroll-contain;
-    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
-    will-change: transform, opacity;
-    contain: layout style;
-    backface-visibility: hidden;
+    .nextra-banner-container ~ div {
+      .nextra-sidebar-container {
+        @apply _pt-[6.5rem];
+      }
 
-    & > .nextra-scrollbar {
-      mask-image: linear-gradient(to bottom, transparent, #000 20px),
-        linear-gradient(to left, #000 10px, transparent 10px);
+      &.nextra-nav-container {
+        @apply _top-10 md:_top-0;
+      }
     }
-  }
 
-  .nextra-banner-container ~ div {
-    .nextra-sidebar-container {
-      @apply _pt-[6.5rem];
+    .nextra-banner-hidden {
+      .nextra-banner-container ~ div .nextra-sidebar-container {
+        @apply _pt-16;
+      }
+
+      .nextra-nav-container {
+        @apply !_top-0;
+      }
     }
-    &.nextra-nav-container {
-      @apply _top-10 md:_top-0;
+
+    .nextra-search .excerpt {
+      @apply _overflow-hidden _text-ellipsis;
+      display: -webkit-box;
+      line-clamp: 1;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
     }
   }
-  .nextra-banner-hidden {
-    .nextra-banner-container ~ div .nextra-sidebar-container {
-      @apply _pt-16;
-    }
-    .nextra-nav-container {
-      @apply !_top-0;
+
+  @media (prefers-reduced-motion: reduce) and (max-width: 767px) {
+    article:before,
+    .nextra-sidebar-container,
+    .nextra-sidebar-container.open,
+    body.resizing .nextra-sidebar-container {
+      @apply _transition-none;
     }
   }
-  .nextra-search .excerpt {
-    @apply _overflow-hidden _text-ellipsis;
-    display: -webkit-box;
-    line-clamp: 1;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-}
 
-@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
-  article:before,
-  .nextra-sidebar-container,
-  .nextra-sidebar-container.open,
-  body.resizing .nextra-sidebar-container {
-    @apply _transition-none;
+  @media (min-width: 768px) {
+    .nextra-toc > .div,
+    .nextra-sidebar-container {
+      mask-image: linear-gradient(to bottom, transparent, #000 20px),
+        linear-gradient(to left, #000 10px, transparent 10px);
+    }
   }
-}
 
-/* Content Typography */
-summary::-webkit-details-marker {
-  @apply _hidden;
-}
+  .nextra-banner-hidden .nextra-banner-container {
+    @apply _hidden;
+  }
 
-@media (min-width: 768px) {
-  .nextra-toc > .div,
   .nextra-sidebar-container {
-    mask-image: linear-gradient(to bottom, transparent, #000 20px),
-      linear-gradient(to left, #000 10px, transparent 10px);
-  }
-}
+    [data-toggle-animation='show'] button {
+      opacity: 0;
+      animation: nextra-fadein 1s ease 0.2s forwards;
+    }
 
-input[type='search'] {
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-results-button,
-  &::-webkit-search-results-decoration {
-    -webkit-appearance: none;
+    [data-toggle-animation='hide'] button {
+      opacity: 0;
+      animation: nextra-fadein2 1s ease 0.2s forwards;
+    }
   }
-}
 
-.contains-task-list {
-  @apply _ml-0 _list-none;
-  input[type='checkbox'] {
-    @apply _mr-1;
+  .footnotes a[data-footnote-backref] {
+    font-family: initial;
   }
-}
 
-.nextra-banner-hidden .nextra-banner-container {
-  @apply _hidden;
-}
+  @keyframes nextra-fadein {
+    0% {
+      opacity: 0;
+    }
 
-.nextra-sidebar-container {
-  [data-toggle-animation='show'] button {
-    opacity: 0;
-    animation: nextra-fadein 1s ease 0.2s forwards;
-  }
-  [data-toggle-animation='hide'] button {
-    opacity: 0;
-    animation: nextra-fadein2 1s ease 0.2s forwards;
+    100% {
+      opacity: 1;
+    }
   }
-}
 
-.footnotes a[data-footnote-backref] {
-  font-family: initial;
-}
+  @keyframes nextra-fadein2 {
+    0% {
+      opacity: 0;
+    }
 
-@keyframes nextra-fadein {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+    100% {
+      opacity: 1;
+    }
   }
-}
 
-@keyframes nextra-fadein2 {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+  body,
+  .nextra-nav-container-blur,
+  .nextra-toc-footer,
+  .nextra-sidebar-footer {
+    @apply _bg-[rgb(var(--nextra-bg))];
   }
-}
 
-body,
-.nextra-nav-container-blur,
-.nextra-toc-footer,
-.nextra-sidebar-footer {
-  @apply _bg-[rgb(var(--nextra-bg))];
-}
-.nextra-sidebar-container {
-  @apply max-md:_bg-[rgb(var(--nextra-bg))];
-}
+  .nextra-sidebar-container {
+    @apply max-md:_bg-[rgb(var(--nextra-bg))];
+  }
 
-.nextra-nav-container-blur {
-  @apply _pointer-events-none _absolute _z-[-1] _size-full;
-  @apply _shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)];
-  @apply dark:_shadow-[0_-1px_0_rgba(255,255,255,.1)_inset];
-  @apply contrast-more:_shadow-[0_0_0_1px_#000];
-  @apply contrast-more:dark:_shadow-[0_0_0_1px_#fff];
-  @apply _backdrop-blur-md _bg-[rgba(var(--nextra-bg),.7)];
-}
+  .nextra-nav-container-blur {
+    @apply _pointer-events-none _absolute _z-[-1] _size-full;
+    @apply _shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)];
+    @apply dark:_shadow-[0_-1px_0_rgba(255,255,255,.1)_inset];
+    @apply contrast-more:_shadow-[0_0_0_1px_#000];
+    @apply contrast-more:dark:_shadow-[0_0_0_1px_#fff];
+    @apply _backdrop-blur-md _bg-[rgba(var(--nextra-bg),.7)];
+  }
 
-.nextra-toc-footer,
-.nextra-sidebar-footer {
-  @apply _border-t dark:_border-neutral-800;
-  @apply contrast-more:_shadow-none contrast-more:_border-neutral-400 contrast-more:dark:_border-neutral-400;
-  @apply _shadow-[0_-12px_16px_rgb(var(--nextra-bg))];
-}
+  .nextra-toc-footer,
+  .nextra-sidebar-footer {
+    @apply _border-t dark:_border-neutral-800;
+    @apply contrast-more:_shadow-none contrast-more:_border-neutral-400 contrast-more:dark:_border-neutral-400;
+    @apply _shadow-[0_-12px_16px_rgb(var(--nextra-bg))];
+  }
 
-.nextra-search-results {
-  @apply _border _border-gray-200 _text-gray-100 dark:_border-neutral-800;
-  @apply _absolute _top-full _z-20 _mt-2 _overflow-auto _overscroll-contain _rounded-xl _py-2.5 _shadow-xl;
-  @apply _max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)];
-  @apply md:_max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)];
-  @apply _inset-x-0 ltr:md:_left-auto rtl:md:_right-auto;
-  @apply contrast-more:_border contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50;
-  @apply _backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)];
+  .nextra-search-results {
+    @apply _border _border-gray-200 _text-gray-100 dark:_border-neutral-800;
+    @apply _absolute _top-full _z-20 _mt-2 _overflow-auto _overscroll-contain _rounded-xl _py-2.5 _shadow-xl;
+    @apply _max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)];
+    @apply md:_max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)];
+    @apply _inset-x-0 ltr:md:_left-auto rtl:md:_right-auto;
+    @apply contrast-more:_border contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50;
+    @apply _backdrop-blur-lg _bg-[rgb(var(--nextra-bg),.8)];
+  }
 }
diff --git a/packages/nextra-theme-docs/src/components/404.tsx b/packages/nextra-theme-docs/src/components/404.tsx
index 6711b4630bd..711b69a22fb 100644
--- a/packages/nextra-theme-docs/src/components/404.tsx
+++ b/packages/nextra-theme-docs/src/components/404.tsx
@@ -24,7 +24,7 @@ export function NotFoundPage(): ReactElement | null {
           labels
         })}
         newWindow
-        className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
+        className="nextra-focus-ring _text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
       >
         {renderComponent(content)}
       </Anchor>
diff --git a/packages/nextra-theme-docs/src/components/anchor.tsx b/packages/nextra-theme-docs/src/components/anchor.tsx
index 4210a69f106..55cc349a58d 100644
--- a/packages/nextra-theme-docs/src/components/anchor.tsx
+++ b/packages/nextra-theme-docs/src/components/anchor.tsx
@@ -2,6 +2,7 @@
 import NextLink from 'next/link'
 import type { ComponentProps, ReactElement } from 'react'
 import { forwardRef } from 'react'
+import cn from 'clsx'
 
 export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
   newWindow?: boolean
@@ -9,7 +10,7 @@ export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
 
 export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
   (
-    { href = '', children, newWindow, ...props },
+    { href = '', children, newWindow, className, ...props },
     // ref is used in <NavbarMenu />
     forwardedRef
   ): ReactElement => {
@@ -18,6 +19,7 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
         <a
           ref={forwardedRef}
           href={href}
+          className={cn(['nextra-focus-ring', className])}
           target="_blank"
           rel="noreferrer"
           {...props}
@@ -36,7 +38,7 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
     }
 
     return (
-      <NextLink ref={forwardedRef} href={href} {...props}>
+      <NextLink ref={forwardedRef} href={href} className={cn(['nextra-focus-ring', className])} {...props}>
         {children}
       </NextLink>
     )
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 e141649dd7d..f8c5ee1d8d0 100644
--- a/packages/nextra-theme-docs/src/components/back-to-top.tsx
+++ b/packages/nextra-theme-docs/src/components/back-to-top.tsx
@@ -30,6 +30,7 @@ export function BackToTop({
       onClick={scrollToTop}
       disabled={hidden}
       className={cn(
+        'nextra-focus-ring',
         '_flex _items-center _gap-1.5 _transition _opacity-100 disabled:_opacity-0',
         className
       )}
diff --git a/packages/nextra-theme-docs/src/components/banner.tsx b/packages/nextra-theme-docs/src/components/banner.tsx
index 814b5150208..a6cc07cf7a2 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="nextra-focus-ring _w-8 _h-8 _opacity-80 hover:_opacity-100"
             onClick={() => {
               try {
                 localStorage.setItem(banner.key, '0')
diff --git a/packages/nextra-theme-docs/src/components/bleed.tsx b/packages/nextra-theme-docs/src/components/bleed.tsx
index cbcb3892e04..5ae22d73fa3 100644
--- a/packages/nextra-theme-docs/src/components/bleed.tsx
+++ b/packages/nextra-theme-docs/src/components/bleed.tsx
@@ -11,7 +11,7 @@ export function Bleed({
   return (
     <div
       className={cn(
-        'nextra-bleed _relative _-mx-6 _mt-6 md:_-mx-8 2xl:_-mx-24',
+        'nextra-focus-ring-scope nextra-bleed _relative _-mx-6 _mt-6 md:_-mx-8 2xl:_-mx-24',
         '_z-[1]', // for firefox https://github.com/shuding/nextra/issues/2824
         full && [
           // 'md:mx:[calc(-50vw+50%+8rem)',
diff --git a/packages/nextra-theme-docs/src/components/breadcrumb.tsx b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
index 1df9243233f..6d2cca6500e 100644
--- a/packages/nextra-theme-docs/src/components/breadcrumb.tsx
+++ b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
@@ -12,7 +12,7 @@ export function Breadcrumb({
   activePath: Item[]
 }): ReactElement {
   return (
-    <div className="nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current">
+    <div className="nextra-focus-ring-scope nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current">
       {activePath.map((item, index) => {
         const isLink = !item.children || item.withIndexPage
         const isActive = index === activePath.length - 1
diff --git a/packages/nextra-theme-docs/src/components/footer.tsx b/packages/nextra-theme-docs/src/components/footer.tsx
index 8c3c1be6845..02d6d458f38 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="nextra-focus-ring-scope _bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent">
       <div
         className={cn(
           '_mx-auto _flex _max-w-[90rem] _gap-2 _py-2 _px-4',
diff --git a/packages/nextra-theme-docs/src/components/input.tsx b/packages/nextra-theme-docs/src/components/input.tsx
index 36badaae075..5e13a332b4b 100644
--- a/packages/nextra-theme-docs/src/components/input.tsx
+++ b/packages/nextra-theme-docs/src/components/input.tsx
@@ -12,6 +12,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         spellCheck={false}
         className={cn(
           className,
+          'nextra-focus-ring',
           '_w-full _appearance-none _rounded-lg _px-3 _py-2 _transition-colors',
           '_text-base _leading-tight md:_text-sm',
           '_bg-black/[.05] dark:_bg-gray-50/10',
diff --git a/packages/nextra-theme-docs/src/components/nav-links.tsx b/packages/nextra-theme-docs/src/components/nav-links.tsx
index 91342304ca4..001f43bf46d 100644
--- a/packages/nextra-theme-docs/src/components/nav-links.tsx
+++ b/packages/nextra-theme-docs/src/components/nav-links.tsx
@@ -41,7 +41,7 @@ export function NavLinks({
   return (
     <div
       className={cn(
-        '_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800',
+        'nextra-focus-ring-scope _mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800',
         'contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400',
         'print:_hidden'
       )}
diff --git a/packages/nextra-theme-docs/src/components/navbar.tsx b/packages/nextra-theme-docs/src/components/navbar.tsx
index 891b6372207..f30201cd5d6 100644
--- a/packages/nextra-theme-docs/src/components/navbar.tsx
+++ b/packages/nextra-theme-docs/src/components/navbar.tsx
@@ -89,7 +89,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
   const { menu, setMenu } = useMenu()
 
   return (
-    <div className="nextra-nav-container _sticky _top-0 _z-20 _w-full _bg-transparent print:_hidden">
+    <div className="nextra-nav-container nextra-focus-ring-scope _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)]">
         {themeConfig.logoLink ? (
diff --git a/packages/nextra-theme-docs/src/components/search.tsx b/packages/nextra-theme-docs/src/components/search.tsx
index 2f8e8ad14d1..51512060b44 100644
--- a/packages/nextra-theme-docs/src/components/search.tsx
+++ b/packages/nextra-theme-docs/src/components/search.tsx
@@ -211,7 +211,7 @@ export function Search({
   )
 
   return (
-    <div className={cn('nextra-search _relative md:_w-64', className)}>
+    <div className={cn('nextra-search nextra-focus-ring-scope _relative md:_w-64', className)}>
       {renderList && (
         <div className="_fixed _inset-0 _z-10" onClick={() => setShow(false)} />
       )}
diff --git a/packages/nextra-theme-docs/src/components/select.tsx b/packages/nextra-theme-docs/src/components/select.tsx
index c9b9563ee20..f58165f9339 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',
+            'nextra-focus-ring _h-7 _rounded-md _px-2 _text-left _text-xs _font-medium _text-gray-600 _transition-colors dark:_text-gray-400',
             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 b825e03304f..fd64babbcb7 100644
--- a/packages/nextra-theme-docs/src/components/sidebar.tsx
+++ b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -382,7 +382,7 @@ export function Sidebar({
       />
       <aside
         className={cn(
-          'nextra-sidebar-container _flex _flex-col',
+          'nextra-focus-ring-scope nextra-sidebar-container _flex _flex-col',
           'md:_top-16 md:_shrink-0 motion-reduce:_transform-none',
           '_transform-gpu _transition-all _ease-in-out',
           'print:_hidden',
diff --git a/packages/nextra-theme-docs/src/components/skip-nav.tsx b/packages/nextra-theme-docs/src/components/skip-nav.tsx
index c7245618c8f..ced776e3458 100644
--- a/packages/nextra-theme-docs/src/components/skip-nav.tsx
+++ b/packages/nextra-theme-docs/src/components/skip-nav.tsx
@@ -70,7 +70,7 @@ export const SkipNavLink = forwardRef<HTMLAnchorElement, SkipNavLinkProps>(
         {...props}
         ref={forwardedRef}
         href={`#${id || DEFAULT_ID}`}
-        className={className}
+        className={cn('nextra-focus-ring', className)}
       >
         {label}
       </a>
diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
index 5d7f6352945..5766eeac034 100644
--- a/packages/nextra-theme-docs/src/components/toc.tsx
+++ b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -57,7 +57,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
   return (
     <div
       className={cn(
-        'nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
+        'nextra-focus-ring-scope nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
         '_max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:_-mr-4 rtl:_-ml-4'
       )}
     >
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index fb16cf8ccd2..78a18e72c63 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 = (
         {id && (
           <a
             href={`#${id}`}
-            className="subheading-anchor"
+            className="subheading-anchor nextra-focus-ring"
             aria-label="Permalink for this section"
             ref={obRef}
           />
@@ -168,6 +168,7 @@ function Summary({
   return (
     <summary
       className={cn(
+        'nextra-focus-ring',
         '_flex _items-center _cursor-pointer _p-1 _transition-colors hover:_bg-gray-100 dark:hover:_bg-neutral-800',
         // display: flex removes whitespace when `<summary />` contains text with other elements, like `foo <strong>bar</strong>`
         '_whitespace-pre-wrap',
@@ -196,7 +197,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]',
+      'nextra-focus-ring _text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]',
       className
     )}
     {...props}
diff --git a/packages/nextra/src/client/components/button.tsx b/packages/nextra/src/client/components/button.tsx
index 2133adbb835..f0df82f28cb 100644
--- a/packages/nextra/src/client/components/button.tsx
+++ b/packages/nextra/src/client/components/button.tsx
@@ -3,6 +3,7 @@ import type { ComponentProps, ReactElement } from 'react'
 
 export const classes = {
   border: cn(
+    'nextra-focus-ring',
     '_border _border-gray-300 dark:_border-neutral-700',
     'contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50'
   )
diff --git a/packages/nextra/src/client/components/cards.tsx b/packages/nextra/src/client/components/cards.tsx
index 00474dad8bb..25202ff8621 100644
--- a/packages/nextra/src/client/components/cards.tsx
+++ b/packages/nextra/src/client/components/cards.tsx
@@ -4,6 +4,7 @@ import type { ComponentProps, CSSProperties, ReactNode } from 'react'
 
 const classes = {
   cards: cn(
+    'nextra-focus-ring-scope',
     'nextra-cards _mt-4 _gap-4 _grid',
     '_not-prose' // for nextra-theme-blog
   ),
diff --git a/packages/nextra/src/client/components/file-tree.tsx b/packages/nextra/src/client/components/file-tree.tsx
index 78f59cdf56a..c4567da9548 100644
--- a/packages/nextra/src/client/components/file-tree.tsx
+++ b/packages/nextra/src/client/components/file-tree.tsx
@@ -67,7 +67,7 @@ const Folder = memo<FolderProps>(
         <button
           onClick={toggle}
           title={name}
-          className="_inline-flex _cursor-pointer _items-center _py-1 hover:_opacity-60"
+          className="nextra-focus-ring _inline-flex _cursor-pointer _items-center _py-1 hover:_opacity-60"
         >
           <Ident />
           <svg
diff --git a/packages/nextra/src/client/components/pre.tsx b/packages/nextra/src/client/components/pre.tsx
index 2631401dfc4..5b1e8133f92 100644
--- a/packages/nextra/src/client/components/pre.tsx
+++ b/packages/nextra/src/client/components/pre.tsx
@@ -41,7 +41,7 @@ export function Pre({
   )
 
   return (
-    <div className="nextra-code _relative [&:not(:first-child)]:_mt-6">
+    <div className="nextra-code nextra-focus-ring-scope _relative [&:not(:first-child)]:_mt-6">
       {filename && (
         <div
           className={cn(
diff --git a/packages/nextra/src/client/components/tabs.tsx b/packages/nextra/src/client/components/tabs.tsx
index ecb27df1a8d..8606c7c31ee 100644
--- a/packages/nextra/src/client/components/tabs.tsx
+++ b/packages/nextra/src/client/components/tabs.tsx
@@ -93,7 +93,7 @@ function Tabs_({
                     '_mr-2 _rounded-t _p-2 _font-medium _leading-5 _transition-colors',
                     '_-mb-0.5 _select-none _border-b-2',
                     selected
-                      ? '_border-primary-500 _text-primary-600'
+                      ? '_border-primary-500 _text-primary-600 nextra-focus-ring'
                       : '_border-transparent _text-gray-600 hover:_border-gray-200 hover:_text-black dark:_text-gray-200 dark:hover:_border-neutral-800 dark:hover:_text-white',
                     disabled &&
                       '_pointer-events-none _text-gray-400 dark:_text-neutral-600'
@@ -118,7 +118,7 @@ function Tab({
   ...props
 }: Omit<ComponentProps<typeof HeadlessTab.Panel>, 'static'>): ReactElement {
   return (
-    <HeadlessTab.Panel {...props} unmount={unmount} className="_rounded _pt-6">
+    <HeadlessTab.Panel {...props} unmount={unmount} className="_rounded _pt-6 nextra-focus-ring">
       {children}
     </HeadlessTab.Panel>
   )
diff --git a/packages/nextra/styles/focus-ring.css b/packages/nextra/styles/focus-ring.css
new file mode 100644
index 00000000000..3c5500abaff
--- /dev/null
+++ b/packages/nextra/styles/focus-ring.css
@@ -0,0 +1,25 @@
+.nextra-focus-ring:where(:not([class~=not-nextra-focus-ring], [class~=not-nextra-focus-ring] *)) {
+  &: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;
+  }
+  &:where(a, summary) {
+    @apply _rounded;
+  }
+}
+
+.nextra-focus-ring-scope:where(:not([class~='not-nextra-focus-ring'], [class~='not-nextra-focus-ring'] *)) {
+  a,
+  summary,
+  button,
+  input,
+  [tabindex]:not([tabindex='-1']) {
+    &: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;
+    }
+    &:where(a, summary) {
+      @apply _rounded;
+    }
+  }
+}

From 8ebb56bd35e01b8d81f278c11c4ed6aca9de8394 Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Fri, 30 Aug 2024 20:49:07 +0800
Subject: [PATCH 2/5] [v3] add `focusRing` option in the theme-docs
 configuration

---
 packages/nextra-theme-docs/src/components/404.tsx    |  2 +-
 packages/nextra-theme-docs/src/components/anchor.tsx |  5 ++---
 .../nextra-theme-docs/src/components/back-to-top.tsx |  1 -
 packages/nextra-theme-docs/src/components/banner.tsx |  2 +-
 packages/nextra-theme-docs/src/components/bleed.tsx  |  2 +-
 .../nextra-theme-docs/src/components/breadcrumb.tsx  |  2 +-
 packages/nextra-theme-docs/src/components/footer.tsx |  2 +-
 packages/nextra-theme-docs/src/components/input.tsx  |  1 -
 .../nextra-theme-docs/src/components/nav-links.tsx   |  2 +-
 packages/nextra-theme-docs/src/components/navbar.tsx |  2 +-
 packages/nextra-theme-docs/src/components/search.tsx |  2 +-
 packages/nextra-theme-docs/src/components/select.tsx |  2 +-
 .../nextra-theme-docs/src/components/sidebar.tsx     |  2 +-
 .../nextra-theme-docs/src/components/skip-nav.tsx    |  2 +-
 packages/nextra-theme-docs/src/components/toc.tsx    |  2 +-
 packages/nextra-theme-docs/src/constants.tsx         |  1 +
 packages/nextra-theme-docs/src/index.tsx             |  4 ++--
 packages/nextra-theme-docs/src/mdx-components.tsx    |  5 ++---
 packages/nextra-theme-docs/src/schemas.ts            |  1 +
 packages/nextra/src/client/components/button.tsx     |  1 -
 packages/nextra/src/client/components/cards.tsx      |  1 -
 packages/nextra/src/client/components/file-tree.tsx  |  2 +-
 packages/nextra/src/client/components/tabs.tsx       |  4 ++--
 packages/nextra/styles/focus-ring.css                | 12 +-----------
 24 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/packages/nextra-theme-docs/src/components/404.tsx b/packages/nextra-theme-docs/src/components/404.tsx
index 711b69a22fb..6711b4630bd 100644
--- a/packages/nextra-theme-docs/src/components/404.tsx
+++ b/packages/nextra-theme-docs/src/components/404.tsx
@@ -24,7 +24,7 @@ export function NotFoundPage(): ReactElement | null {
           labels
         })}
         newWindow
-        className="nextra-focus-ring _text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
+        className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
       >
         {renderComponent(content)}
       </Anchor>
diff --git a/packages/nextra-theme-docs/src/components/anchor.tsx b/packages/nextra-theme-docs/src/components/anchor.tsx
index 55cc349a58d..4a8fc3a468c 100644
--- a/packages/nextra-theme-docs/src/components/anchor.tsx
+++ b/packages/nextra-theme-docs/src/components/anchor.tsx
@@ -2,7 +2,6 @@
 import NextLink from 'next/link'
 import type { ComponentProps, ReactElement } from 'react'
 import { forwardRef } from 'react'
-import cn from 'clsx'
 
 export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
   newWindow?: boolean
@@ -19,7 +18,7 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
         <a
           ref={forwardedRef}
           href={href}
-          className={cn(['nextra-focus-ring', className])}
+          className={className}
           target="_blank"
           rel="noreferrer"
           {...props}
@@ -38,7 +37,7 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
     }
 
     return (
-      <NextLink ref={forwardedRef} href={href} className={cn(['nextra-focus-ring', className])} {...props}>
+      <NextLink ref={forwardedRef} href={href} className={className} {...props}>
         {children}
       </NextLink>
     )
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 f8c5ee1d8d0..e141649dd7d 100644
--- a/packages/nextra-theme-docs/src/components/back-to-top.tsx
+++ b/packages/nextra-theme-docs/src/components/back-to-top.tsx
@@ -30,7 +30,6 @@ export function BackToTop({
       onClick={scrollToTop}
       disabled={hidden}
       className={cn(
-        'nextra-focus-ring',
         '_flex _items-center _gap-1.5 _transition _opacity-100 disabled:_opacity-0',
         className
       )}
diff --git a/packages/nextra-theme-docs/src/components/banner.tsx b/packages/nextra-theme-docs/src/components/banner.tsx
index a6cc07cf7a2..814b5150208 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="nextra-focus-ring _w-8 _h-8 _opacity-80 hover:_opacity-100"
+            className="_w-8 _h-8 _opacity-80 hover:_opacity-100"
             onClick={() => {
               try {
                 localStorage.setItem(banner.key, '0')
diff --git a/packages/nextra-theme-docs/src/components/bleed.tsx b/packages/nextra-theme-docs/src/components/bleed.tsx
index 5ae22d73fa3..cbcb3892e04 100644
--- a/packages/nextra-theme-docs/src/components/bleed.tsx
+++ b/packages/nextra-theme-docs/src/components/bleed.tsx
@@ -11,7 +11,7 @@ export function Bleed({
   return (
     <div
       className={cn(
-        'nextra-focus-ring-scope nextra-bleed _relative _-mx-6 _mt-6 md:_-mx-8 2xl:_-mx-24',
+        'nextra-bleed _relative _-mx-6 _mt-6 md:_-mx-8 2xl:_-mx-24',
         '_z-[1]', // for firefox https://github.com/shuding/nextra/issues/2824
         full && [
           // 'md:mx:[calc(-50vw+50%+8rem)',
diff --git a/packages/nextra-theme-docs/src/components/breadcrumb.tsx b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
index 6d2cca6500e..1df9243233f 100644
--- a/packages/nextra-theme-docs/src/components/breadcrumb.tsx
+++ b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
@@ -12,7 +12,7 @@ export function Breadcrumb({
   activePath: Item[]
 }): ReactElement {
   return (
-    <div className="nextra-focus-ring-scope nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current">
+    <div className="nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current">
       {activePath.map((item, index) => {
         const isLink = !item.children || item.withIndexPage
         const isActive = index === activePath.length - 1
diff --git a/packages/nextra-theme-docs/src/components/footer.tsx b/packages/nextra-theme-docs/src/components/footer.tsx
index 02d6d458f38..8c3c1be6845 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="nextra-focus-ring-scope _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">
       <div
         className={cn(
           '_mx-auto _flex _max-w-[90rem] _gap-2 _py-2 _px-4',
diff --git a/packages/nextra-theme-docs/src/components/input.tsx b/packages/nextra-theme-docs/src/components/input.tsx
index 5e13a332b4b..36badaae075 100644
--- a/packages/nextra-theme-docs/src/components/input.tsx
+++ b/packages/nextra-theme-docs/src/components/input.tsx
@@ -12,7 +12,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         spellCheck={false}
         className={cn(
           className,
-          'nextra-focus-ring',
           '_w-full _appearance-none _rounded-lg _px-3 _py-2 _transition-colors',
           '_text-base _leading-tight md:_text-sm',
           '_bg-black/[.05] dark:_bg-gray-50/10',
diff --git a/packages/nextra-theme-docs/src/components/nav-links.tsx b/packages/nextra-theme-docs/src/components/nav-links.tsx
index 001f43bf46d..91342304ca4 100644
--- a/packages/nextra-theme-docs/src/components/nav-links.tsx
+++ b/packages/nextra-theme-docs/src/components/nav-links.tsx
@@ -41,7 +41,7 @@ export function NavLinks({
   return (
     <div
       className={cn(
-        'nextra-focus-ring-scope _mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800',
+        '_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800',
         'contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400',
         'print:_hidden'
       )}
diff --git a/packages/nextra-theme-docs/src/components/navbar.tsx b/packages/nextra-theme-docs/src/components/navbar.tsx
index f30201cd5d6..891b6372207 100644
--- a/packages/nextra-theme-docs/src/components/navbar.tsx
+++ b/packages/nextra-theme-docs/src/components/navbar.tsx
@@ -89,7 +89,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
   const { menu, setMenu } = useMenu()
 
   return (
-    <div className="nextra-nav-container nextra-focus-ring-scope _sticky _top-0 _z-20 _w-full _bg-transparent print:_hidden">
+    <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)]">
         {themeConfig.logoLink ? (
diff --git a/packages/nextra-theme-docs/src/components/search.tsx b/packages/nextra-theme-docs/src/components/search.tsx
index 51512060b44..2f8e8ad14d1 100644
--- a/packages/nextra-theme-docs/src/components/search.tsx
+++ b/packages/nextra-theme-docs/src/components/search.tsx
@@ -211,7 +211,7 @@ export function Search({
   )
 
   return (
-    <div className={cn('nextra-search nextra-focus-ring-scope _relative md:_w-64', className)}>
+    <div className={cn('nextra-search _relative md:_w-64', className)}>
       {renderList && (
         <div className="_fixed _inset-0 _z-10" onClick={() => setShow(false)} />
       )}
diff --git a/packages/nextra-theme-docs/src/components/select.tsx b/packages/nextra-theme-docs/src/components/select.tsx
index f58165f9339..c9b9563ee20 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(
-            'nextra-focus-ring _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',
             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 fd64babbcb7..b825e03304f 100644
--- a/packages/nextra-theme-docs/src/components/sidebar.tsx
+++ b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -382,7 +382,7 @@ export function Sidebar({
       />
       <aside
         className={cn(
-          'nextra-focus-ring-scope nextra-sidebar-container _flex _flex-col',
+          'nextra-sidebar-container _flex _flex-col',
           'md:_top-16 md:_shrink-0 motion-reduce:_transform-none',
           '_transform-gpu _transition-all _ease-in-out',
           'print:_hidden',
diff --git a/packages/nextra-theme-docs/src/components/skip-nav.tsx b/packages/nextra-theme-docs/src/components/skip-nav.tsx
index ced776e3458..c7245618c8f 100644
--- a/packages/nextra-theme-docs/src/components/skip-nav.tsx
+++ b/packages/nextra-theme-docs/src/components/skip-nav.tsx
@@ -70,7 +70,7 @@ export const SkipNavLink = forwardRef<HTMLAnchorElement, SkipNavLinkProps>(
         {...props}
         ref={forwardedRef}
         href={`#${id || DEFAULT_ID}`}
-        className={cn('nextra-focus-ring', className)}
+        className={className}
       >
         {label}
       </a>
diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
index 5766eeac034..5d7f6352945 100644
--- a/packages/nextra-theme-docs/src/components/toc.tsx
+++ b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -57,7 +57,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
   return (
     <div
       className={cn(
-        'nextra-focus-ring-scope nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
+        'nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
         '_max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:_-mr-4 rtl:_-ml-4'
       )}
     >
diff --git a/packages/nextra-theme-docs/src/constants.tsx b/packages/nextra-theme-docs/src/constants.tsx
index 6494886594c..aed89490279 100644
--- a/packages/nextra-theme-docs/src/constants.tsx
+++ b/packages/nextra-theme-docs/src/constants.tsx
@@ -90,6 +90,7 @@ export const DEFAULT_THEME: DocsThemeConfig = {
       })
     }
   },
+  focusRing: true,
   footer: {
     component: Footer,
     content: `MIT ${new Date().getFullYear()} © Nextra.`
diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
index 427f5da3ff6..4e6f86d3a19 100644
--- a/packages/nextra-theme-docs/src/index.tsx
+++ b/packages/nextra-theme-docs/src/index.tsx
@@ -33,7 +33,7 @@ function InnerLayout({ children }: { children: ReactNode }): ReactElement {
     isRawLayout: themeContext.layout === 'raw',
     components: themeConfig.components
   })
-
+  
   return (
     <ThemeProvider
       attribute="class"
@@ -45,7 +45,7 @@ function InnerLayout({ children }: { children: ReactNode }): ReactElement {
         before hydration as Tailwind expects the `dir` attribute to exist on the
         `html` element.
       */}
-      <div dir={dir}>
+      <div dir={dir} className={themeConfig.focusRing ? 'nextra-focus-ring' : undefined}>
         <script
           dangerouslySetInnerHTML={{
             __html: `document.documentElement.setAttribute('dir','${dir}')`
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index 78a18e72c63..fb16cf8ccd2 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 = (
         {id && (
           <a
             href={`#${id}`}
-            className="subheading-anchor nextra-focus-ring"
+            className="subheading-anchor"
             aria-label="Permalink for this section"
             ref={obRef}
           />
@@ -168,7 +168,6 @@ function Summary({
   return (
     <summary
       className={cn(
-        'nextra-focus-ring',
         '_flex _items-center _cursor-pointer _p-1 _transition-colors hover:_bg-gray-100 dark:hover:_bg-neutral-800',
         // display: flex removes whitespace when `<summary />` contains text with other elements, like `foo <strong>bar</strong>`
         '_whitespace-pre-wrap',
@@ -197,7 +196,7 @@ export const Link = ({ href = '', className, ...props }: AnchorProps) => (
     href={href}
     newWindow={EXTERNAL_HREF_REGEX.test(href)}
     className={cn(
-      'nextra-focus-ring _text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]',
+      '_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]',
       className
     )}
     {...props}
diff --git a/packages/nextra-theme-docs/src/schemas.ts b/packages/nextra-theme-docs/src/schemas.ts
index c6cb350d383..408c610061d 100644
--- a/packages/nextra-theme-docs/src/schemas.ts
+++ b/packages/nextra-theme-docs/src/schemas.ts
@@ -57,6 +57,7 @@ export const themeSchema = /* @__PURE__ */ (() =>
       labels: z.string(),
       useLink: z.function().returns(z.string())
     }),
+    focusRing: z.boolean().optional(),
     footer: z.strictObject({
       component: z.custom<ReactNode | FC<{ menu: boolean }>>(...reactNode),
       content: z.custom<ReactNode | FC>(...reactNode)
diff --git a/packages/nextra/src/client/components/button.tsx b/packages/nextra/src/client/components/button.tsx
index f0df82f28cb..2133adbb835 100644
--- a/packages/nextra/src/client/components/button.tsx
+++ b/packages/nextra/src/client/components/button.tsx
@@ -3,7 +3,6 @@ import type { ComponentProps, ReactElement } from 'react'
 
 export const classes = {
   border: cn(
-    'nextra-focus-ring',
     '_border _border-gray-300 dark:_border-neutral-700',
     'contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50'
   )
diff --git a/packages/nextra/src/client/components/cards.tsx b/packages/nextra/src/client/components/cards.tsx
index 25202ff8621..00474dad8bb 100644
--- a/packages/nextra/src/client/components/cards.tsx
+++ b/packages/nextra/src/client/components/cards.tsx
@@ -4,7 +4,6 @@ import type { ComponentProps, CSSProperties, ReactNode } from 'react'
 
 const classes = {
   cards: cn(
-    'nextra-focus-ring-scope',
     'nextra-cards _mt-4 _gap-4 _grid',
     '_not-prose' // for nextra-theme-blog
   ),
diff --git a/packages/nextra/src/client/components/file-tree.tsx b/packages/nextra/src/client/components/file-tree.tsx
index c4567da9548..78f59cdf56a 100644
--- a/packages/nextra/src/client/components/file-tree.tsx
+++ b/packages/nextra/src/client/components/file-tree.tsx
@@ -67,7 +67,7 @@ const Folder = memo<FolderProps>(
         <button
           onClick={toggle}
           title={name}
-          className="nextra-focus-ring _inline-flex _cursor-pointer _items-center _py-1 hover:_opacity-60"
+          className="_inline-flex _cursor-pointer _items-center _py-1 hover:_opacity-60"
         >
           <Ident />
           <svg
diff --git a/packages/nextra/src/client/components/tabs.tsx b/packages/nextra/src/client/components/tabs.tsx
index 8606c7c31ee..ecb27df1a8d 100644
--- a/packages/nextra/src/client/components/tabs.tsx
+++ b/packages/nextra/src/client/components/tabs.tsx
@@ -93,7 +93,7 @@ function Tabs_({
                     '_mr-2 _rounded-t _p-2 _font-medium _leading-5 _transition-colors',
                     '_-mb-0.5 _select-none _border-b-2',
                     selected
-                      ? '_border-primary-500 _text-primary-600 nextra-focus-ring'
+                      ? '_border-primary-500 _text-primary-600'
                       : '_border-transparent _text-gray-600 hover:_border-gray-200 hover:_text-black dark:_text-gray-200 dark:hover:_border-neutral-800 dark:hover:_text-white',
                     disabled &&
                       '_pointer-events-none _text-gray-400 dark:_text-neutral-600'
@@ -118,7 +118,7 @@ function Tab({
   ...props
 }: Omit<ComponentProps<typeof HeadlessTab.Panel>, 'static'>): ReactElement {
   return (
-    <HeadlessTab.Panel {...props} unmount={unmount} className="_rounded _pt-6 nextra-focus-ring">
+    <HeadlessTab.Panel {...props} unmount={unmount} className="_rounded _pt-6">
       {children}
     </HeadlessTab.Panel>
   )
diff --git a/packages/nextra/styles/focus-ring.css b/packages/nextra/styles/focus-ring.css
index 3c5500abaff..c670aa4e54e 100644
--- a/packages/nextra/styles/focus-ring.css
+++ b/packages/nextra/styles/focus-ring.css
@@ -1,14 +1,4 @@
 .nextra-focus-ring:where(:not([class~=not-nextra-focus-ring], [class~=not-nextra-focus-ring] *)) {
-  &: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;
-  }
-  &:where(a, summary) {
-    @apply _rounded;
-  }
-}
-
-.nextra-focus-ring-scope:where(:not([class~='not-nextra-focus-ring'], [class~='not-nextra-focus-ring'] *)) {
   a,
   summary,
   button,
@@ -18,7 +8,7 @@
       @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;
     }
-    &:where(a, summary) {
+    &:focus-visible:where(a, summary) {
       @apply _rounded;
     }
   }

From 7cef470ddd2a00a6a0ddbb61bb62f2bec1869aeb Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Fri, 30 Aug 2024 20:54:06 +0800
Subject: [PATCH 3/5] cleanup unnecessary code

---
 packages/nextra-theme-docs/src/components/anchor.tsx | 5 ++---
 packages/nextra/src/client/components/pre.tsx        | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nextra-theme-docs/src/components/anchor.tsx b/packages/nextra-theme-docs/src/components/anchor.tsx
index 4a8fc3a468c..4210a69f106 100644
--- a/packages/nextra-theme-docs/src/components/anchor.tsx
+++ b/packages/nextra-theme-docs/src/components/anchor.tsx
@@ -9,7 +9,7 @@ export type AnchorProps = Omit<ComponentProps<'a'>, 'ref'> & {
 
 export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
   (
-    { href = '', children, newWindow, className, ...props },
+    { href = '', children, newWindow, ...props },
     // ref is used in <NavbarMenu />
     forwardedRef
   ): ReactElement => {
@@ -18,7 +18,6 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
         <a
           ref={forwardedRef}
           href={href}
-          className={className}
           target="_blank"
           rel="noreferrer"
           {...props}
@@ -37,7 +36,7 @@ export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
     }
 
     return (
-      <NextLink ref={forwardedRef} href={href} className={className} {...props}>
+      <NextLink ref={forwardedRef} href={href} {...props}>
         {children}
       </NextLink>
     )
diff --git a/packages/nextra/src/client/components/pre.tsx b/packages/nextra/src/client/components/pre.tsx
index 5b1e8133f92..2631401dfc4 100644
--- a/packages/nextra/src/client/components/pre.tsx
+++ b/packages/nextra/src/client/components/pre.tsx
@@ -41,7 +41,7 @@ export function Pre({
   )
 
   return (
-    <div className="nextra-code nextra-focus-ring-scope _relative [&:not(:first-child)]:_mt-6">
+    <div className="nextra-code _relative [&:not(:first-child)]:_mt-6">
       {filename && (
         <div
           className={cn(

From 62839e22ee4d2b96f0715ad91bf6554b8bb34328 Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Fri, 30 Aug 2024 21:34:17 +0800
Subject: [PATCH 4/5] update the release summary

---
 .changeset/wild-llamas-prove.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/wild-llamas-prove.md b/.changeset/wild-llamas-prove.md
index 9cdcfb9c5c9..23e1567ca68 100644
--- a/.changeset/wild-llamas-prove.md
+++ b/.changeset/wild-llamas-prove.md
@@ -4,4 +4,4 @@
 'nextra': patch
 ---
 
-reduce focus-visible style conflicts with external components.
+reduce global style conflicts with external components.

From 46a4aa1337a819be79609c1c8277d6575b47adfc Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Fri, 30 Aug 2024 21:43:08 +0800
Subject: [PATCH 5/5] preitter

---
 packages/nextra-theme-docs/src/index.tsx | 7 +++++--
 packages/nextra/styles/focus-ring.css    | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
index 4e6f86d3a19..4dddd0384d6 100644
--- a/packages/nextra-theme-docs/src/index.tsx
+++ b/packages/nextra-theme-docs/src/index.tsx
@@ -33,7 +33,7 @@ function InnerLayout({ children }: { children: ReactNode }): ReactElement {
     isRawLayout: themeContext.layout === 'raw',
     components: themeConfig.components
   })
-  
+
   return (
     <ThemeProvider
       attribute="class"
@@ -45,7 +45,10 @@ function InnerLayout({ children }: { children: ReactNode }): ReactElement {
         before hydration as Tailwind expects the `dir` attribute to exist on the
         `html` element.
       */}
-      <div dir={dir} className={themeConfig.focusRing ? 'nextra-focus-ring' : undefined}>
+      <div
+        dir={dir}
+        className={themeConfig.focusRing ? 'nextra-focus-ring' : undefined}
+      >
         <script
           dangerouslySetInnerHTML={{
             __html: `document.documentElement.setAttribute('dir','${dir}')`
diff --git a/packages/nextra/styles/focus-ring.css b/packages/nextra/styles/focus-ring.css
index c670aa4e54e..a53dde9aadf 100644
--- a/packages/nextra/styles/focus-ring.css
+++ b/packages/nextra/styles/focus-ring.css
@@ -1,4 +1,6 @@
-.nextra-focus-ring:where(:not([class~=not-nextra-focus-ring], [class~=not-nextra-focus-ring] *)) {
+.nextra-focus-ring:where(
+    :not([class~='not-nextra-focus-ring'], [class~='not-nextra-focus-ring'] *)
+  ) {
   a,
   summary,
   button,