3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 13:37:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Joshua Chen 2022-02-04 01:28:10 +08:00 • committed by GitHub
parent caa9d281c3
commit 01c6f15b15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
View file

@ -17,6 +17,7 @@ import {
useTitleFormatter, useTitleFormatter,
useAlternatePageUtils, useAlternatePageUtils,
useThemeConfig, useThemeConfig,
keyboardFocusedClassName,
} from '@docusaurus/theme-common'; } from '@docusaurus/theme-common';
import {useLocation} from '@docusaurus/router'; import {useLocation} from '@docusaurus/router';
@ -101,6 +102,9 @@ export default function LayoutHead(props: Props): JSX.Element {
<title>{pageTitle}</title> <title>{pageTitle}</title>
<meta property="og:title" content={pageTitle} /> <meta property="og:title" content={pageTitle} />
<meta name="twitter:card" content="summary_large_image" /> <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> </Head>
{/* image can override the default image */} {/* image can override the default image */}

4
packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts
View file

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

5
packages/docusaurus-theme-common/src/index.ts
View file

@ -126,7 +126,10 @@ export {
} from './utils/tabGroupChoiceUtils'; } from './utils/tabGroupChoiceUtils';
export {default as useHideableNavbar} from './hooks/useHideableNavbar'; 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 usePrismTheme} from './hooks/usePrismTheme';
export {default as useLockBodyScroll} from './hooks/useLockBodyScroll'; export {default as useLockBodyScroll} from './hooks/useLockBodyScroll';
export {default as useWindowSize} from './hooks/useWindowSize'; export {default as useWindowSize} from './hooks/useWindowSize';