mirror of
https://github.com/Snigdha-OS/documentation.git
synced 2025-09-12 20:04:57 +02:00
39 lines
1.6 KiB
JavaScript
39 lines
1.6 KiB
JavaScript
/**
|
|
* 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() {
|
|
useEffect(() => {
|
|
function handleOutlineStyles(e) {
|
|
if (e.type === 'keydown' && e.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);
|
|
};
|
|
}, []);
|
|
}
|
|
//# sourceMappingURL=useKeyboardNavigation.js.map
|