[v3] avoid focus-visible style being cut off by overflow-hidden (#3160)

aa

Author: dimaMachina

.changeset/short-icons-impress.md

@@ -0,0 +1,6 @@
+---
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+avoid focus-visible style being cut off by overflow-hidden

examples/swr-site/pages/en/index.mdx

@@ -9,7 +9,7 @@ import { Callout, Tabs } from 'nextra/components'
 {/* wrapped with {} to mark it as javascript so mdx will not put it under a p tag */}
 {<h1 className="text-center font-extrabold md:text-5xl mt-8">SWR</h1>}
 
-<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
+<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python', 'TypeScript', 'GraphQL', 'Rust', 'C#', 'Go', 'HTML', 'CSS', 'plaintext', 'bash']} defaultIndex={1}>
   <Tabs.Tab>
     ```js filename="hi.js"
     import { useState, useEffect } from 'react';

packages/nextra-theme-docs/src/components/collapse.tsx

@@ -38,7 +38,7 @@ export function Collapse({
     } else {
       container.style.height = `${inner.clientHeight}px`
     }
-
+    container.style.overflow = isOpen ? '' : 'hidden'
     if (isOpen) {
       animationRef.current = window.setTimeout(() => {
         // should be style property in kebab-case, not css class name
@@ -62,7 +62,7 @@ export function Collapse({
   return (
     <div
       ref={containerRef}
-      className="_transform-gpu _overflow-hidden _transition-all _ease-in-out motion-reduce:_transition-none"
+      className="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none"
       style={initialOpen.current || horizontal ? undefined : { height: 0 }}
     >
       <div

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -407,7 +407,7 @@ export function Sidebar({
           >
             <div
               className={cn(
-                '_overflow-y-auto _overflow-x-hidden',
+                '_overflow-y-auto',
                 '_p-4 _grow md:_h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]',
                 showSidebar ? 'nextra-scrollbar' : 'no-scrollbar'
               )}
@@ -444,7 +444,8 @@ export function Sidebar({
           <div
             className={cn(
               'nextra-sidebar-footer _sticky _bottom-0',
-              '_flex _items-center _gap-2 _mx-4 _py-4',
+              '_flex _items-center _gap-2 _py-4',
+              '_mx-3 _px-1', // to hide focused sidebar links
               showSidebar
                 ? hasI18n && '_justify-end'
                 : '_py-4 _flex-wrap _justify-center'

packages/nextra-theme-docs/src/components/toc.tsx

@@ -49,15 +49,15 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
         block: 'center',
         inline: 'center',
         scrollMode: 'always',
-        boundary: tocRef.current
+        boundary: tocRef.current!.parentElement
       })
     }
   }, [activeSlug])
 
   return (
     <div
       className={cn(
-        'nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
+        'nextra-scrollbar _sticky _top-16 _overflow-y-auto _px-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'
       )}
     >
@@ -74,16 +74,16 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
                   className={cn(
                     {
                       2: '_font-semibold',
-                      3: 'ltr:_pl-4 rtl:_pr-4',
-                      4: 'ltr:_pl-8 rtl:_pr-8',
-                      5: 'ltr:_pl-12 rtl:_pr-12',
-                      6: 'ltr:_pl-16 rtl:_pr-16'
+                      3: 'ltr:_ml-4 rtl:_mr-4',
+                      4: 'ltr:_ml-8 rtl:_mr-8',
+                      5: 'ltr:_ml-12 rtl:_mr-12',
+                      6: 'ltr:_ml-16 rtl:_mr-16'
                     }[depth],
-                    '_inline-block _transition-colors _subpixel-antialiased',
+                    '_block _transition-colors _subpixel-antialiased',
                     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 _break-words'
                   )}
                 >
                   {removeLinks(value)}
@@ -98,7 +98,8 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
         <div
           className={cn(
             hasHeadings && 'nextra-toc-footer _mt-8 _pt-8',
-            '_sticky _bottom-0 _flex _flex-col _items-start _gap-2 _pb-8'
+            '_sticky _bottom-0 _flex _flex-col _items-start _gap-2 _pb-8',
+            '_-mx-1 _px-1' // to hide focused toc links
           )}
         >
           {themeConfig.feedback.content ? (

packages/nextra-theme-docs/src/mdx-components.tsx

@@ -369,10 +369,7 @@ const DEFAULT_COMPONENTS: MDXComponents = {
           <nav className={classes.toc} aria-label="table of contents" />
         )
       ) : (
-        <nav
-          className={cn(classes.toc, '_px-4')}
-          aria-label="table of contents"
-        >
+        <nav className={classes.toc} aria-label="table of contents">
           {renderComponent(themeConfig.toc.component, {
             toc: themeConfig.toc.float ? toc : [],
             filePath: config.filePath

packages/nextra/src/client/components/tabs.tsx

@@ -3,7 +3,7 @@ import cn from 'clsx'
 import type { ComponentProps, ReactElement, ReactNode } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
-type TabItem = string | ReactNode
+type TabItem = string | ReactElement
 
 type TabObjectItem = {
   label: TabItem
@@ -80,8 +80,11 @@ function Tabs_({
       defaultIndex={defaultIndex}
       onChange={handleChange}
     >
-      <div className="nextra-scrollbar _overflow-x-auto _overflow-y-hidden _overscroll-x-contain">
-        <HeadlessTab.List className="_mt-4 _flex _w-max _min-w-full _border-b _border-gray-200 _pb-px dark:_border-neutral-800">
+      <div
+        className={cn('nextra-scrollbar _overflow-x-auto')}
+        tabIndex={-1} // disables focus in Firefox
+      >
+        <HeadlessTab.List className="_mt-4 _flex _w-max _min-w-full _gap-2 _border-b _border-gray-200 _pb-px dark:_border-neutral-800">
           {items.map((item, index) => {
             const disabled = isTabObjectItem(item) && item.disabled
             return (
@@ -90,7 +93,8 @@ function Tabs_({
                 disabled={disabled}
                 className={({ selected }) =>
                   cn(
-                    '_mr-2 _rounded-t _p-2 _font-medium _leading-5 _transition-colors',
+                    '_ring-inset',
+                    '_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'
@@ -118,7 +122,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 _mt-6">
       {children}
     </HeadlessTab.Panel>
   )