3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-20 11:37:52 +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);