Skip to content

Instantly share code, notes, and snippets.

View jack-sf's full-sized avatar

Jack Tomaszewski jack-sf

View GitHub Profile
@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)
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 {