3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-09 06:12:28 +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-common/src/hooks/useKeyboardNavigation.ts
View file

@ -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);

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

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