[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>

Author: 87xie

.changeset/shiny-dolphins-walk.md

@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+Enhance focus ring style consistency.

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',

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',