From 3255c0dc53dcd6f8b71c286d0c443d2d4439ae29 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Thu, 18 Jul 2024 10:47:37 -0500
Subject: [PATCH] Trap focus in note menu (#2246)

* Use normal component instead of "render" call

This turns out to be unrelated to the dropdown I'm using.

* Trap focus in dropdown menu

[DISCO-307]

* Update/use defaultFocusOutline

* Remove doubled focus style

* Use focus indicator on ColorIndicator, not ColorPicker

Adjust focus outline style
Update snapshots

* Add z-index so MH ColorIndicator focus outline is visible

---------

Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
---
 src/app/components/Dropdown.tsx               |  22 +-
 .../__snapshots__/DotMenu.spec.tsx.snap       |   5 +-
 .../__snapshots__/Dropdown.spec.tsx.snap      |   4 +-
 .../__snapshots__/ChapterFilter.spec.tsx.snap |   8 +-
 .../__snapshots__/ColorFilter.spec.tsx.snap   |  33 +-
 .../highlights/components/ColorIndicator.tsx  |   1 +
 .../components/SummaryPopup/ContextMenu.tsx   |  12 +-
 .../__snapshots__/ContextMenu.spec.tsx.snap   | 725 +++++++++---------
 .../__snapshots__/Filters.spec.tsx.snap       |  29 +-
 .../ColorIndicator.spec.tsx.snap              |  15 +-
 .../__snapshots__/ColorPicker.spec.tsx.snap   |  25 +-
 .../__snapshots__/DisplayNote.spec.tsx.snap   |   2 +-
 .../__snapshots__/Filters.spec.tsx.snap       |  28 +-
 src/app/developer/components/Books.tsx        |   7 +-
 src/app/theme.ts                              |   6 +-
 15 files changed, 484 insertions(+), 438 deletions(-)

diff --git a/src/app/components/Dropdown.tsx b/src/app/components/Dropdown.tsx
index a2f009e0f7..de52e7a683 100644
--- a/src/app/components/Dropdown.tsx
+++ b/src/app/components/Dropdown.tsx
@@ -1,3 +1,4 @@
+
 import { HTMLElement } from '@openstax/types/lib.dom';
 import flow from 'lodash/fp/flow';
 import isUndefined from 'lodash/fp/isUndefined';
@@ -5,9 +6,9 @@ import omitBy from 'lodash/fp/omitBy';
 import React, { ReactNode } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import styled, { css, keyframes } from 'styled-components/macro';
-import { useFocusLost } from '../reactUtils';
+import { useFocusLost, useTrapTabNavigation } from '../reactUtils';
 import { useOnEsc } from '../reactUtils';
-import theme from '../theme';
+import theme, { defaultFocusOutline } from '../theme';
 import { preventDefault } from '../utils';
 import { textStyle } from './Typography/base';
 
@@ -165,8 +166,19 @@ const TabTransparentDropdown = styled((
   `}
 `;
 
+function TrappingDropdownList(props: object) {
+  const ref = React.useRef(null);
+
+  useTrapTabNavigation(ref);
+
+  return (
+    <ol ref={ref} {...props} />
+  );
+}
+
+
 // tslint:disable-next-line:variable-name
-export const DropdownList = styled.ol`
+export const DropdownList = styled(TrappingDropdownList)`
   margin: 0;
   padding: 0.6rem 0;
   background: ${theme.color.neutral.formBackground};
@@ -198,12 +210,12 @@ export const DropdownList = styled.ol`
     &:hover,
     &:focus {
       background: ${theme.color.neutral.formBorder};
-      outline: 0.2rem auto Highlight;
-      outline: 0.2rem inset -webkit-focus-ring-color;
+      ${defaultFocusOutline}
     }
   }
 `;
 
+
 interface DropdownItemProps {
   message: string;
   ariaMessage?: string;
diff --git a/src/app/components/__snapshots__/DotMenu.spec.tsx.snap b/src/app/components/__snapshots__/DotMenu.spec.tsx.snap
index 80acb6703f..b3fb1c0479 100644
--- a/src/app/components/__snapshots__/DotMenu.spec.tsx.snap
+++ b/src/app/components/__snapshots__/DotMenu.spec.tsx.snap
@@ -179,7 +179,7 @@ exports[`Dropdown matches snapshot 1`] = `
 .c12 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c12.c12 {
@@ -452,7 +452,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
 .c12 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c12.c12 {
@@ -499,6 +499,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
     </button>
     <ol
       className="c12"
+      rightAlign={true}
     >
       <li>
         <a
diff --git a/src/app/components/__snapshots__/Dropdown.spec.tsx.snap b/src/app/components/__snapshots__/Dropdown.spec.tsx.snap
index 0f5df70017..83fa203baf 100644
--- a/src/app/components/__snapshots__/Dropdown.spec.tsx.snap
+++ b/src/app/components/__snapshots__/Dropdown.spec.tsx.snap
@@ -135,7 +135,7 @@ exports[`Dropdown matches snapshot 1`] = `
 .c6 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c1 {
@@ -443,7 +443,7 @@ exports[`Dropdown matches snapshot for tab hidden (open) 1`] = `
 .c4 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c1 {
diff --git a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
index 929605d292..afa828b6ed 100644
--- a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
@@ -115,8 +115,8 @@ input:checked + .c10 .c12 {
 .c8:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c8:focus-within .c9 {
@@ -161,8 +161,8 @@ input:checked + .c10 .c12 {
 .c15:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c15:focus-within .c9 {
diff --git a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
index f44870b0dc..25f7163a45 100644
--- a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
@@ -115,8 +115,8 @@ input:checked + .c8 .c10 {
 .c6:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c6:focus-within .c7 {
@@ -161,8 +161,8 @@ input:checked + .c8 .c10 {
 .c22:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c22:focus-within .c7 {
@@ -296,8 +296,9 @@ input:checked + .c8 .c10 {
 
 .c13 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c20 {
@@ -329,8 +330,9 @@ input:checked + .c8 .c10 {
 
 .c20 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c23 {
@@ -362,8 +364,9 @@ input:checked + .c8 .c10 {
 
 .c23 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c25 {
@@ -395,8 +398,9 @@ input:checked + .c8 .c10 {
 
 .c25 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c27 {
@@ -428,8 +432,9 @@ input:checked + .c8 .c10 {
 
 .c27 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c19 {
diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
index ff47716da8..a89010bc2d 100644
--- a/src/app/content/highlights/components/ColorIndicator.tsx
+++ b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -110,6 +110,7 @@ const ColorIndicator = styled(Hoc)`
   input:focus + ${FocusedStyle} {
     display: block;
     ${defaultFocusOutline}
+    z-index: 1;
   }
 `;
 
diff --git a/src/app/content/highlights/components/SummaryPopup/ContextMenu.tsx b/src/app/content/highlights/components/SummaryPopup/ContextMenu.tsx
index 514fd9caa4..acc7f3df29 100644
--- a/src/app/content/highlights/components/SummaryPopup/ContextMenu.tsx
+++ b/src/app/content/highlights/components/SummaryPopup/ContextMenu.tsx
@@ -126,12 +126,14 @@ const ContextMenu = ({
       transparentTab={false}
     >
       <HighlightToggleEditContent>
-        <ColorPicker
-          color={color}
-          size='small'
-          onChange={onColorChange}
-        />
         <StyledDropdownList>
+          <li>
+            <ColorPicker
+            color={color}
+            size='small'
+            onChange={onColorChange}
+            />
+          </li>
           <DropdownItem
             data-testid='edit'
             ariaMessage={editMessage}
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
index 2511af78af..7874183ab1 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
@@ -136,11 +136,11 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: hidden;
 }
 
-.c18 {
+.c19 {
   display: none;
 }
 
-.c20 {
+.c21 {
   display: none;
   position: absolute;
   height: 2rem;
@@ -155,7 +155,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border-radius: 50%;
 }
 
-.c21 {
+.c22 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -169,7 +169,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #fed200;
 }
 
-.c23 {
+.c24 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -183,7 +183,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #92d101;
 }
 
-.c25 {
+.c26 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -197,7 +197,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #00c3ed;
 }
 
-.c27 {
+.c28 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -211,7 +211,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #545ec8;
 }
 
-.c29 {
+.c30 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -225,7 +225,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #de017e;
 }
 
-.c15 {
+.c16 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -247,18 +247,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c15 .c17 {
+.c16 .c18 {
   height: 1rem;
   width: 1rem;
 }
 
-.c15 input:focus + .c19 {
+.c16 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
-.c22 {
+.c23 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -280,18 +281,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c22 .c17 {
+.c23 .c18 {
   height: 1rem;
   width: 1rem;
 }
 
-.c22 input:focus + .c19 {
+.c23 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
-.c24 {
+.c25 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -313,7 +315,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c24 .c17 {
+.c25 .c18 {
   height: 1rem;
   width: 1rem;
   color: #00c3ed;
@@ -322,13 +324,14 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
 }
 
-.c24 input:focus + .c19 {
+.c25 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
-.c26 {
+.c27 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -350,18 +353,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c26 .c17 {
+.c27 .c18 {
   height: 1rem;
   width: 1rem;
 }
 
-.c26 input:focus + .c19 {
+.c27 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
-.c28 {
+.c29 {
   position: relative;
   background-color: #ffc5e1;
   border: 1px solid #560131;
@@ -383,23 +387,24 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c28 .c17 {
+.c29 .c18 {
   height: 1rem;
   width: 1rem;
 }
 
-.c28 input:focus + .c19 {
+.c29 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
-.c16 {
+.c17 {
   cursor: pointer;
   margin: 0;
 }
 
-.c16 input {
+.c17 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -407,7 +412,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   width: 0;
 }
 
-.c14 {
+.c15 {
   border: 0;
   outline: none;
   display: -webkit-box;
@@ -422,7 +427,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c14 legend {
+.c15 legend {
   position: absolute;
   height: 1px;
   width: 1px;
@@ -498,7 +503,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   color: #818181;
 }
 
-.c0 .c13 {
+.c0 .c14 {
   margin: 0.6rem 0 0 0.6rem;
 }
 
@@ -507,7 +512,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   margin-right: 0.2rem;
 }
 
-.c30 {
+.c13 {
   margin: 0;
   padding: 0.6rem 0;
   background: #f5f5f5;
@@ -515,12 +520,12 @@ exports[`ContextMenu match snapshot when open 1`] = `
   padding: 0;
 }
 
-.c30 li {
+.c13 li {
   padding: 0.2rem;
 }
 
-.c30 li button,
-.c30 li a {
+.c13 li button,
+.c13 li a {
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -546,23 +551,23 @@ exports[`ContextMenu match snapshot when open 1`] = `
   line-height: 2rem;
 }
 
-.c30 li button:hover,
-.c30 li a:hover,
-.c30 li button:focus,
-.c30 li a:focus {
+.c13 li button:hover,
+.c13 li a:hover,
+.c13 li button:focus,
+.c13 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
-.c30 li {
+.c13 li {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c30 li a {
+.c13 li a {
   width: 100%;
 }
 
@@ -639,324 +644,326 @@ exports[`ContextMenu match snapshot when open 1`] = `
     <div
       className="c12"
     >
-      <fieldset
-        className="c13 c14"
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={0}
+      <ol
+        className="c13"
       >
-        <legend>
-          Choose highlight color
-        </legend>
-        <label
-          aria-label="Apply yellow highlight"
-          checked={false}
-          className="c15 c16"
-          component={<label />}
-          size="small"
-          style={
-            Object {
-              "focusBorder": "#8f7700",
-              "focused": "#fed200",
-              "label": "yellow",
-              "passive": "#ffff8a",
-            }
-          }
-          title="yellow"
-        >
-          <svg
-            aria-hidden="true"
-            className="c9 c17 c18"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              fill="currentColor"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="yellow"
-            onChange={[Function]}
-            tabIndex={-1}
-            type="checkbox"
-          />
-          <span
-            className="c19 c20"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#8f7700",
-                "focused": "#fed200",
-                "label": "yellow",
-                "passive": "#ffff8a",
-              }
-            }
-          />
-          <span
-            className="c21"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#8f7700",
-                "focused": "#fed200",
-                "label": "yellow",
-                "passive": "#ffff8a",
-              }
-            }
-          />
-        </label>
-        <label
-          aria-label="Apply green highlight"
-          checked={false}
-          className="c22 c16"
-          component={<label />}
-          size="small"
-          style={
-            Object {
-              "focusBorder": "#4e6f01",
-              "focused": "#92d101",
-              "label": "green",
-              "passive": "#def99f",
-            }
-          }
-          title="green"
-        >
-          <svg
-            aria-hidden="true"
-            className="c9 c17 c18"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              fill="currentColor"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="green"
-            onChange={[Function]}
-            tabIndex={-1}
-            type="checkbox"
-          />
-          <span
-            className="c19 c20"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#4e6f01",
-                "focused": "#92d101",
-                "label": "green",
-                "passive": "#def99f",
-              }
-            }
-          />
-          <span
-            className="c23"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#4e6f01",
-                "focused": "#92d101",
-                "label": "green",
-                "passive": "#def99f",
-              }
-            }
-          />
-        </label>
-        <label
-          aria-label="Apply blue highlight"
-          checked={true}
-          className="c24 c16"
-          component={<label />}
-          size="small"
-          style={
-            Object {
-              "focusBorder": "#006880",
-              "focused": "#00c3ed",
-              "label": "blue",
-              "passive": "#c8f5ff",
-            }
-          }
-          title="blue"
-        >
-          <svg
-            aria-hidden="true"
-            className="c9 c17 c18"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+        <li>
+          <fieldset
+            className="c14 c15"
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              fill="currentColor"
-            />
-          </svg>
-          <input
-            checked={true}
-            name="blue"
-            onChange={[Function]}
-            tabIndex={-1}
-            type="checkbox"
-          />
-          <span
-            className="c19 c20"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#006880",
-                "focused": "#00c3ed",
-                "label": "blue",
-                "passive": "#c8f5ff",
+            <legend>
+              Choose highlight color
+            </legend>
+            <label
+              aria-label="Apply yellow highlight"
+              checked={false}
+              className="c16 c17"
+              component={<label />}
+              size="small"
+              style={
+                Object {
+                  "focusBorder": "#8f7700",
+                  "focused": "#fed200",
+                  "label": "yellow",
+                  "passive": "#ffff8a",
+                }
               }
-            }
-          />
-          <span
-            className="c25"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#006880",
-                "focused": "#00c3ed",
-                "label": "blue",
-                "passive": "#c8f5ff",
-              }
-            }
-          />
-        </label>
-        <label
-          aria-label="Apply purple highlight"
-          checked={false}
-          className="c26 c16"
-          component={<label />}
-          size="small"
-          style={
-            Object {
-              "focusBorder": "#141a3e",
-              "focused": "#545ec8",
-              "label": "purple",
-              "passive": "#cbcfff",
-            }
-          }
-          title="purple"
-        >
-          <svg
-            aria-hidden="true"
-            className="c9 c17 c18"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              fill="currentColor"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="purple"
-            onChange={[Function]}
-            tabIndex={-1}
-            type="checkbox"
-          />
-          <span
-            className="c19 c20"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#141a3e",
-                "focused": "#545ec8",
-                "label": "purple",
-                "passive": "#cbcfff",
+              title="yellow"
+            >
+              <svg
+                aria-hidden="true"
+                className="c9 c18 c19"
+                fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                checked={false}
+                name="yellow"
+                onChange={[Function]}
+                tabIndex={-1}
+                type="checkbox"
+              />
+              <span
+                className="c20 c21"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#8f7700",
+                    "focused": "#fed200",
+                    "label": "yellow",
+                    "passive": "#ffff8a",
+                  }
+                }
+              />
+              <span
+                className="c22"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#8f7700",
+                    "focused": "#fed200",
+                    "label": "yellow",
+                    "passive": "#ffff8a",
+                  }
+                }
+              />
+            </label>
+            <label
+              aria-label="Apply green highlight"
+              checked={false}
+              className="c23 c17"
+              component={<label />}
+              size="small"
+              style={
+                Object {
+                  "focusBorder": "#4e6f01",
+                  "focused": "#92d101",
+                  "label": "green",
+                  "passive": "#def99f",
+                }
               }
-            }
-          />
-          <span
-            className="c27"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#141a3e",
-                "focused": "#545ec8",
-                "label": "purple",
-                "passive": "#cbcfff",
+              title="green"
+            >
+              <svg
+                aria-hidden="true"
+                className="c9 c18 c19"
+                fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                checked={false}
+                name="green"
+                onChange={[Function]}
+                tabIndex={-1}
+                type="checkbox"
+              />
+              <span
+                className="c20 c21"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#4e6f01",
+                    "focused": "#92d101",
+                    "label": "green",
+                    "passive": "#def99f",
+                  }
+                }
+              />
+              <span
+                className="c24"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#4e6f01",
+                    "focused": "#92d101",
+                    "label": "green",
+                    "passive": "#def99f",
+                  }
+                }
+              />
+            </label>
+            <label
+              aria-label="Apply blue highlight"
+              checked={true}
+              className="c25 c17"
+              component={<label />}
+              size="small"
+              style={
+                Object {
+                  "focusBorder": "#006880",
+                  "focused": "#00c3ed",
+                  "label": "blue",
+                  "passive": "#c8f5ff",
+                }
               }
-            }
-          />
-        </label>
-        <label
-          aria-label="Apply pink highlight"
-          checked={false}
-          className="c28 c16"
-          component={<label />}
-          size="small"
-          style={
-            Object {
-              "focusBorder": "#560131",
-              "focused": "#de017e",
-              "label": "pink",
-              "passive": "#ffc5e1",
-            }
-          }
-          title="pink"
-        >
-          <svg
-            aria-hidden="true"
-            className="c9 c17 c18"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-              fill="currentColor"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="pink"
-            onChange={[Function]}
-            tabIndex={-1}
-            type="checkbox"
-          />
-          <span
-            className="c19 c20"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#560131",
-                "focused": "#de017e",
-                "label": "pink",
-                "passive": "#ffc5e1",
+              title="blue"
+            >
+              <svg
+                aria-hidden="true"
+                className="c9 c18 c19"
+                fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                checked={true}
+                name="blue"
+                onChange={[Function]}
+                tabIndex={-1}
+                type="checkbox"
+              />
+              <span
+                className="c20 c21"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#006880",
+                    "focused": "#00c3ed",
+                    "label": "blue",
+                    "passive": "#c8f5ff",
+                  }
+                }
+              />
+              <span
+                className="c26"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#006880",
+                    "focused": "#00c3ed",
+                    "label": "blue",
+                    "passive": "#c8f5ff",
+                  }
+                }
+              />
+            </label>
+            <label
+              aria-label="Apply purple highlight"
+              checked={false}
+              className="c27 c17"
+              component={<label />}
+              size="small"
+              style={
+                Object {
+                  "focusBorder": "#141a3e",
+                  "focused": "#545ec8",
+                  "label": "purple",
+                  "passive": "#cbcfff",
+                }
               }
-            }
-          />
-          <span
-            className="c29"
-            size="small"
-            style={
-              Object {
-                "focusBorder": "#560131",
-                "focused": "#de017e",
-                "label": "pink",
-                "passive": "#ffc5e1",
+              title="purple"
+            >
+              <svg
+                aria-hidden="true"
+                className="c9 c18 c19"
+                fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                checked={false}
+                name="purple"
+                onChange={[Function]}
+                tabIndex={-1}
+                type="checkbox"
+              />
+              <span
+                className="c20 c21"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#141a3e",
+                    "focused": "#545ec8",
+                    "label": "purple",
+                    "passive": "#cbcfff",
+                  }
+                }
+              />
+              <span
+                className="c28"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#141a3e",
+                    "focused": "#545ec8",
+                    "label": "purple",
+                    "passive": "#cbcfff",
+                  }
+                }
+              />
+            </label>
+            <label
+              aria-label="Apply pink highlight"
+              checked={false}
+              className="c29 c17"
+              component={<label />}
+              size="small"
+              style={
+                Object {
+                  "focusBorder": "#560131",
+                  "focused": "#de017e",
+                  "label": "pink",
+                  "passive": "#ffc5e1",
+                }
               }
-            }
-          />
-        </label>
-      </fieldset>
-      <ol
-        className="c30"
-      >
+              title="pink"
+            >
+              <svg
+                aria-hidden="true"
+                className="c9 c18 c19"
+                fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                checked={false}
+                name="pink"
+                onChange={[Function]}
+                tabIndex={-1}
+                type="checkbox"
+              />
+              <span
+                className="c20 c21"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#560131",
+                    "focused": "#de017e",
+                    "label": "pink",
+                    "passive": "#ffc5e1",
+                  }
+                }
+              />
+              <span
+                className="c30"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#560131",
+                    "focused": "#de017e",
+                    "label": "pink",
+                    "passive": "#ffc5e1",
+                  }
+                }
+              />
+            </label>
+          </fieldset>
+        </li>
         <li
           aria-label="Add note"
         >
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
index e4abcf53f0..82feefd4e1 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
@@ -69,8 +69,8 @@ input:checked + .c21 .c22 {
 .c19:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c19:focus-within .c20 {
@@ -277,8 +277,9 @@ input:checked + .c21 .c22 {
 
 .c25 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c32 {
@@ -310,8 +311,9 @@ input:checked + .c21 .c22 {
 
 .c32 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c34 {
@@ -343,8 +345,9 @@ input:checked + .c21 .c22 {
 
 .c34 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c36 {
@@ -376,8 +379,9 @@ input:checked + .c21 .c22 {
 
 .c36 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c38 {
@@ -409,8 +413,9 @@ input:checked + .c21 .c22 {
 
 .c38 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c48 {
diff --git a/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
index 889e6d0971..153b507ca6 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
@@ -47,8 +47,9 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
 
 .c7 input:focus + .c4 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c0 {
@@ -84,8 +85,9 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
 
 .c0 input:focus + .c4 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 <div
@@ -198,8 +200,9 @@ exports[`ColorIndicator matches snapshot 1`] = `
 
 .c0 input:focus + .c4 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 <div
diff --git a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
index 087ebd073c..f89008b657 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -125,8 +125,9 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c1 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c9 {
@@ -158,8 +159,9 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c9 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c11 {
@@ -191,8 +193,9 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c11 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c13 {
@@ -224,8 +227,9 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c13 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c15 {
@@ -257,8 +261,9 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c15 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c2 {
diff --git a/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap
index 7ff38089d3..dd7f4e6b6d 100644
--- a/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap
@@ -462,7 +462,7 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
 .c12 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c3 {
diff --git a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
index 74fd9b917c..81eef5c18c 100644
--- a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
@@ -72,8 +72,8 @@ input:checked + .c21 .c22 {
 .c19:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c19:focus-within .c20 {
@@ -115,8 +115,8 @@ input:checked + .c21 .c22 {
 .c25:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c25:focus-within .c20 {
@@ -369,8 +369,9 @@ input:checked + .c21 .c22 {
 
 .c28 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c35 {
@@ -402,8 +403,9 @@ input:checked + .c21 .c22 {
 
 .c35 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c37 {
@@ -435,8 +437,9 @@ input:checked + .c21 .c22 {
 
 .c37 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c39 {
@@ -468,8 +471,9 @@ input:checked + .c21 .c22 {
 
 .c39 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c10 {
diff --git a/src/app/developer/components/Books.tsx b/src/app/developer/components/Books.tsx
index c0aa518889..8f663b099c 100644
--- a/src/app/developer/components/Books.tsx
+++ b/src/app/developer/components/Books.tsx
@@ -56,8 +56,9 @@ const Books = () => {
     }
   }, [archiveLoader, osWebLoader]);
 
-  const renderBookLink = (id: string, book: Book | undefined) => {
+  function BookLink({id, book}: {id: string, book: Book | undefined}) {
     const page = book && findDefaultBookPage(book);
+
     return <>
       <div>
         <H3>{book && page
@@ -75,12 +76,12 @@ const Books = () => {
         : null
       }
     </>;
-  };
+  }
 
   return <Panel title='Books'>
     <ul style={{paddingBottom: '5rem'}}>
       {books.map(([id, config, book]) => <BookLI key={id}>
-        {renderBookLink(`${id}@${config.defaultVersion}`, book)}
+        <BookLink id={`${id}@${config.defaultVersion}`} book={book} />
       </BookLI>)}
     </ul>
   </Panel>;
diff --git a/src/app/theme.ts b/src/app/theme.ts
index 141ca5ffe8..a53b137f7e 100644
--- a/src/app/theme.ts
+++ b/src/app/theme.ts
@@ -30,10 +30,10 @@ const textColors = {
 
 // Browser default outline for focus items per
 // tslint:disable-next-line:max-line-length
-// https://stackoverflow.com/questions/20609485/what-is-the-default-style-of-the-blue-focus-outline-in-chrome/38498539#38498539
+// https://css-tricks.com/copy-the-browsers-native-focus-styles/
 export const defaultFocusOutline = `
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 `;
 
 const greyColors = {