Jack Tomaszewski jack-sf
jack-sf
/ KeyboardFocusHandler.tsx
Created
July 8, 2019 08:42
Add `.has-keyboard-focus` class to your `<body>` element whenever keyboard focus is active - as an easy solution to add focus outline to all keyboard-focused elements (until `:focus-visible` is supported in all the major browsers)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from 'react'; | |
| import { document, window } from '../../../utils/browser'; | |
| // https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2 | |
| export class KeyboardFocusHandler extends React.PureComponent { | |
| componentDidMount(): void { | |
| window!.addEventListener('keydown', this.handleFirstTab); | |
| } | |
| componentWillUnmount(): void { |