feat: Show outline on keyboard nav and style outline to match theme (nodejs#240)

kevjin · amiller-gh · commit bd6c20bb4cc2 · 2019-05-26T00:59:20.000-07:00
diff --git a/src/components/layout.css b/src/components/layout.css
@@ -128,7 +128,11 @@ main {
   grid-template-columns: 420px auto;
 }
 
-summary {
+:focus {
+  outline: var(--green3) dotted 2px;
+}
+
+[data-is-focused="true"] {
   outline: none;
 }
 
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -8,6 +8,10 @@ import SEO from './seo';
 import { isMobileScreen } from '../util/isScreenWithinWidth';
 import { notifyWhenStickyHeadersChange } from '../util/notifyWhenStickyHeadersChange';
 import { StickyChange, SentinelObserverSetupOptions } from '../types';
+import {
+  addFocusOutlineListeners,
+  removeFocusOutlineListeners,
+} from '../util/outlineOnKeyboardNav';
 
 type Props = {
   children: React.ReactNode;
@@ -20,6 +24,9 @@ const Layout = ({ children, title, description, img }: Props) => {
   const prevOffset = useRef<number>(-1);
 
   useEffect(() => {
+    if (window.document && 'documentElement' in window.document) {
+      addFocusOutlineListeners();
+    }
     if ('IntersectionObserver' in window) {
       setupObserver();
     } else {
@@ -29,6 +36,8 @@ const Layout = ({ children, title, description, img }: Props) => {
         // Fallback for browsers without IntersectionObserver support
         .catch(magicHeroNumber);
     }
+
+    return cleanUp;
   });
 
   const setupObserver = (): void => {
@@ -80,6 +89,10 @@ const Layout = ({ children, title, description, img }: Props) => {
     window.requestAnimationFrame(magicHeroNumber);
   };
 
+  const cleanUp = (): void => {
+    return removeFocusOutlineListeners();
+  };
+
   return (
     <>
       <SEO title={title} description={description} img={img} />
diff --git a/src/util/outlineOnKeyboardNav.ts b/src/util/outlineOnKeyboardNav.ts
@@ -0,0 +1,58 @@
+const TAB_KEYCODE = 9;
+const FOCUS_ATTR = 'data-is-focused';
+const BLUR_EVENT = 'blur';
+const FOCUS_EVENT = 'focus';
+const KEYDOWN_EVENT = 'keydown';
+const MOUSEDOWN_EVENT = 'mousedown';
+
+let IS_MOUSE_EVENT = false;
+
+/**
+ * Attaches listeners for keydown, mousedown, focus, and blur to the document,
+ * which handle adding or removing focus outline css class for mouse events.
+ */
+export function addFocusOutlineListeners() {
+  const docEl = window.document.documentElement;
+  IS_MOUSE_EVENT = false;
+
+  docEl.addEventListener(KEYDOWN_EVENT, handleKeyDown, false);
+  docEl.addEventListener(MOUSEDOWN_EVENT, handleMouseDown, false);
+  docEl.addEventListener(FOCUS_EVENT, handleFocus, true);
+  docEl.addEventListener(BLUR_EVENT, handleBlur, true);
+}
+
+/**
+ * Detaches listeners
+ */
+export function removeFocusOutlineListeners() {
+  const docEl = window.document.documentElement;
+
+  if (docEl) {
+    docEl.removeEventListener(KEYDOWN_EVENT, handleKeyDown, false);
+    docEl.removeEventListener(MOUSEDOWN_EVENT, handleMouseDown, false);
+    docEl.removeEventListener(FOCUS_EVENT, handleFocus, true);
+    docEl.removeEventListener(BLUR_EVENT, handleBlur, true);
+  }
+}
+
+export function handleKeyDown(event: KeyboardEvent) {
+  if (event.keyCode === TAB_KEYCODE) {
+    IS_MOUSE_EVENT = false;
+  }
+}
+
+export function handleMouseDown(event: MouseEvent) {
+  IS_MOUSE_EVENT = true;
+}
+
+export function handleFocus(event: Event) {
+  if (IS_MOUSE_EVENT && event.target && event.target !== event.currentTarget) {
+    (event.target as Element).setAttribute(FOCUS_ATTR, 'true');
+  }
+}
+
+export function handleBlur(event: Event) {
+  if (event.target !== event.currentTarget) {
+    (event.target as Element).removeAttribute(FOCUS_ATTR);
+  }
+}
diff --git a/test/util/outlineOnKeyboardNav.test.js b/test/util/outlineOnKeyboardNav.test.js
@@ -0,0 +1,35 @@
+import {
+  handleMouseDown,
+  handleFocus,
+  handleKeyDown,
+  handleBlur,
+} from '../../src/util/outlineOnKeyboardNav';
+describe('Tests for focus and blur handlers', () => {
+  const FOCUS_ATTR = 'data-is-focused';
+  const TAB_KEYCODE = 9;
+  let event = {};
+  beforeEach(() => {
+    event = {
+      target: document.createElement('div'),
+      currentTarget: document.createElement('div'),
+      keyCode: TAB_KEYCODE,
+    };
+  });
+  it('hides outline for mouse focus', () => {
+    handleMouseDown(event);
+    handleFocus(event);
+    expect(event.target.getAttribute(FOCUS_ATTR)).toEqual('true');
+  });
+  it('doesnt hide outline for keyboard focus', () => {
+    handleKeyDown(event);
+    handleFocus(event);
+    expect(event.target.getAttribute(FOCUS_ATTR)).toBeNull();
+  });
+  it('Blurs after leaving focus', () => {
+    handleMouseDown(event);
+    handleFocus(event);
+    expect(event.target.getAttribute(FOCUS_ATTR)).toEqual('true');
+    handleBlur(event);
+    expect(event.target.getAttribute(FOCUS_ATTR)).toBeNull();
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,11 @@ main {`
`128`	`128`	`grid-template-columns: 420px auto;`
`129`	`129`	`}`
`130`	`130`
`131`		`-summary {`
	`131`	`+:focus {`
	`132`	`+ outline: var(--green3) dotted 2px;`
	`133`	`+}`
	`134`	`+`
	`135`	`+[data-is-focused="true"] {`
`132`	`136`	`outline: none;`
`133`	`137`	`}`
`134`	`138`