fix(theme-classic): make focused link outlined with JS disabled (#6505)

facebook · Feb 3, 2022 · 01c6f15 · 01c6f15
1 parent caa9d28
commit 01c6f15
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx b/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
@@ -17,6 +17,7 @@ import {
   useTitleFormatter,
   useAlternatePageUtils,
   useThemeConfig,
+  keyboardFocusedClassName,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
 
@@ -101,6 +102,9 @@ export default function LayoutHead(props: Props): JSX.Element {
         <title>{pageTitle}</title>
         <meta property="og:title" content={pageTitle} />
         <meta name="twitter:card" content="summary_large_image" />
+        {/* The keyboard focus class name need to be applied when SSR so links
+        are outlined when JS is disabled */}
+        <body className={keyboardFocusedClassName} />
       </Head>
 
       {/* image can override the default image */}

diff --git a/packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts b/packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts
@@ -9,12 +9,12 @@ import {useEffect} from 'react';
 
 import './styles.css';
 
+export const keyboardFocusedClassName = 'navigation-with-keyboard';
+
 // This hook detect keyboard focus indicator to not show outline for mouse users
 // Inspired by https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
 export default function useKeyboardNavigation(): void {
   useEffect(() => {
-    const keyboardFocusedClassName = 'navigation-with-keyboard';
-
     function handleOutlineStyles(e: MouseEvent | KeyboardEvent) {
       if (e.type === 'keydown' && (e as KeyboardEvent).key === 'Tab') {
         document.body.classList.add(keyboardFocusedClassName);

diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
@@ -126,7 +126,10 @@ export {
 } from './utils/tabGroupChoiceUtils';
 
 export {default as useHideableNavbar} from './hooks/useHideableNavbar';
-export {default as useKeyboardNavigation} from './hooks/useKeyboardNavigation';
+export {
+  default as useKeyboardNavigation,
+  keyboardFocusedClassName,
+} from './hooks/useKeyboardNavigation';
 export {default as usePrismTheme} from './hooks/usePrismTheme';
 export {default as useLockBodyScroll} from './hooks/useLockBodyScroll';
 export {default as useWindowSize} from './hooks/useWindowSize';