Skip to content

Instantly share code, notes, and snippets.

Jack Tomaszewski jack-sf

Block or report user

Report or block jack-sf

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@jack-sf
jack-sf / KeyboardFocusHandler.tsx
Created Jul 8, 2019
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)
View KeyboardFocusHandler.tsx
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 {
You can’t perform that action at this time.