From 03a0ac7d316bd56b217d94fdd22a70da9e4fb0e6 Mon Sep 17 00:00:00 2001
From: Noah Gregory
Date: Fri, 6 Feb 2026 00:00:05 -0500
Subject: [PATCH] fix(a11y): remove `useKeyboardNavigation` hook
---
.../src/theme/Layout/index.tsx | 3 --
.../src/theme/SiteMetadata/index.tsx | 3 +-
.../src/hooks/styles.css | 10 -----
.../src/hooks/useKeyboardNavigation.ts | 45 -------------------
.../docusaurus-theme-common/src/internal.ts | 4 --
5 files changed, 1 insertion(+), 64 deletions(-)
delete mode 100644 packages/docusaurus-theme-common/src/hooks/styles.css
delete mode 100644 packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index a08c11676567..388f7e912769 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -13,7 +13,6 @@ import {
SkipToContentFallbackId,
ThemeClassNames,
} from '@docusaurus/theme-common';
-import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
import SkipToContent from '@theme/SkipToContent';
import AnnouncementBar from '@theme/AnnouncementBar';
import Navbar from '@theme/Navbar';
@@ -33,8 +32,6 @@ export default function Layout(props: Props): ReactNode {
description,
} = props;
- useKeyboardNavigation();
-
return (
diff --git a/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
index 35d3e060b2fc..d116f17af005 100644
--- a/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
@@ -13,7 +13,6 @@ import {PageMetadata, useThemeConfig} from '@docusaurus/theme-common';
import {
DEFAULT_SEARCH_TAG,
useAlternatePageUtils,
- keyboardFocusedClassName,
} from '@docusaurus/theme-common/internal';
import {useLocation} from '@docusaurus/router';
import {applyTrailingSlash} from '@docusaurus/utils-common';
@@ -130,7 +129,7 @@ export default function SiteMetadata(): ReactNode {
{/* The keyboard focus class name need to be applied when SSR so links
are outlined when JS is disabled */}
-
+
{defaultImage && }
diff --git a/packages/docusaurus-theme-common/src/hooks/styles.css b/packages/docusaurus-theme-common/src/hooks/styles.css
deleted file mode 100644
index a5d601e160b3..000000000000
--- a/packages/docusaurus-theme-common/src/hooks/styles.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-body:not(.navigation-with-keyboard) *:not(input):focus {
- outline: none;
-}
diff --git a/packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts b/packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts
deleted file mode 100644
index 7a2ebfcc7a3f..000000000000
--- a/packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {useEffect} from 'react';
-
-import './styles.css';
-
-export const keyboardFocusedClassName = 'navigation-with-keyboard';
-
-/**
- * Side-effect that adds the `keyboardFocusedClassName` to the body element when
- * the keyboard has been pressed, or removes it when the mouse is clicked.
- *
- * The presence of this class name signals that the user may be using keyboard
- * for navigation, and the theme **must** add focus outline when this class name
- * is present. (And optionally not if it's absent, for design purposes)
- *
- * Inspired by https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
- */
-export function useKeyboardNavigation(): void {
- useEffect(() => {
- function handleOutlineStyles(e: MouseEvent | KeyboardEvent) {
- if (e.type === 'keydown' && (e as KeyboardEvent).key === 'Tab') {
- document.body.classList.add(keyboardFocusedClassName);
- }
-
- if (e.type === 'mousedown') {
- document.body.classList.remove(keyboardFocusedClassName);
- }
- }
-
- document.addEventListener('keydown', handleOutlineStyles);
- document.addEventListener('mousedown', handleOutlineStyles);
-
- return () => {
- document.body.classList.remove(keyboardFocusedClassName);
- document.removeEventListener('keydown', handleOutlineStyles);
- document.removeEventListener('mousedown', handleOutlineStyles);
- };
- }, []);
-}
diff --git a/packages/docusaurus-theme-common/src/internal.ts b/packages/docusaurus-theme-common/src/internal.ts
index d8d5821c95f8..ffb15d78e634 100644
--- a/packages/docusaurus-theme-common/src/internal.ts
+++ b/packages/docusaurus-theme-common/src/internal.ts
@@ -94,10 +94,6 @@ export {
export {useDateTimeFormat} from './utils/IntlUtils';
export {useHideableNavbar} from './hooks/useHideableNavbar';
-export {
- useKeyboardNavigation,
- keyboardFocusedClassName,
-} from './hooks/useKeyboardNavigation';
export {useLockBodyScroll} from './hooks/useLockBodyScroll';
export {useCodeWordWrap} from './hooks/useCodeWordWrap';
export {useBackToTopButton} from './hooks/useBackToTopButton';