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