[v3] enhance focus ring style consistency (#3286)

* [v3] enhance focus ring style consistency * Update tabs.tsx Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com> * fix focus param missing * Update packages/nextra-theme-docs/css/styles.css Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com> --------- Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
shuding · Sep 26, 2024 · ca51306 · ca51306
1 parent 1e2a159
commit ca51306
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/shiny-dolphins-walk.md b/.changeset/shiny-dolphins-walk.md
@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+Enhance focus ring style consistency.
diff --git a/packages/nextra-theme-docs/src/components/skip-nav.tsx b/packages/nextra-theme-docs/src/components/skip-nav.tsx
@@ -57,6 +57,7 @@ export const SkipNavLink = forwardRef<HTMLAnchorElement, SkipNavLinkProps>(
  ? styled // Give the user a way to opt-in the default style provided with the theme. Probably remove this option in the next major version (v3.x) and just do a check to use the providedClassName or the default
  ? cn(
  '_sr-only',
+ 'nextra-focus',
  'focus:_not-sr-only focus:_fixed focus:_z-50 focus:_m-3 focus:_ml-4 focus:_h-[calc(var(--nextra-navbar-height)-1.5rem)] focus:_rounded-lg focus:_border focus:_px-3 focus:_py-2 focus:_align-middle focus:_text-sm focus:_font-bold',
  'focus:_text-gray-900 focus:dark:_text-gray-100',
  'focus:_bg-white focus:dark:_bg-neutral-900',

diff --git a/packages/nextra/src/client/components/tabs/tabs.tsx b/packages/nextra/src/client/components/tabs/tabs.tsx
@@ -104,6 +104,7 @@ export function Tabs({
  className={({ selected, disabled, hover, focus }) =>
  cn(
  focus && 'nextra-focusable _ring-inset',
+ selected && '_outline-none',
  '_whitespace-nowrap',
  '_rounded-t _p-2 _font-medium _leading-5 _transition-colors',
  '_-mb-0.5 _select-none _border-b-2',