diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx b/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
index 5e91606c75db..c6afddbc6f1c 100644
--- 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 {
{pageTitle}
+ {/* The keyboard focus class name need to be applied when SSR so links
+ are outlined when JS is disabled */}
+
{/* 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
index 80fe791f107d..5d9180a355a4 100644
--- 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
index 07e6348abc7c..980738e13747 100644
--- 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';