From 1d8444572f4ab96989751a98b158902b24a068d9 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Thu, 13 Feb 2025 20:54:04 -0600
Subject: [PATCH] Add radio role and aria checked state to color checkboxes
 (#2331)

* Add radio role and aria checked state to color checkboxes

[DISCO-323]
Leaving the type as checkbox retained the functionality. Adding the role takes care of the accessibility.

* Add radiogroup role to fieldset

* Add trash can icon to color picker

* Only show trashcan when it will do something

* Separate trash button; fix tests

* Hide colorpicker legends; remove space instruction

* No fieldset grouping color indicators and trash icon

---------

Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
---
 .../highlights/components/ColorIndicator.tsx  |  29 +
 .../components/ColorPicker.spec.tsx           |  23 +-
 .../highlights/components/ColorPicker.tsx     |  80 ++-
 .../highlights/components/EditCard.spec.tsx   |  30 +-
 .../highlights/components/EditCard.tsx        |  14 +-
 .../__snapshots__/ContextMenu.spec.tsx.snap   | 605 +++++++++---------
 .../__snapshots__/ColorPicker.spec.tsx.snap   | 581 +++++++++--------
 .../__snapshots__/EditCard.spec.tsx.snap      |   4 +-
 .../components/ShowKeyboardShortcuts.tsx      |   1 -
 .../KeyboardShortcutsPopup.spec.tsx.snap      |  18 -
 .../ShowKeyboardShortcuts.spec.tsx.snap       |  18 -
 src/assets/trash-347.svg                      |   9 +
 12 files changed, 764 insertions(+), 648 deletions(-)
 create mode 100644 src/assets/trash-347.svg

diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
index a89010bc2d..fc0e06b043 100644
--- a/src/app/content/highlights/components/ColorIndicator.tsx
+++ b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -4,6 +4,8 @@ import { Check } from 'styled-icons/fa-solid/Check';
 import { isDefined } from '../../../guards';
 import { highlightStyles } from '../../constants';
 import { defaultFocusOutline } from '../../../theme';
+import { useIntl } from 'react-intl';
+import trashIcon from '../../../../assets/trash-347.svg';
 
 interface StyleProps {
   style: typeof highlightStyles[number];
@@ -114,4 +116,31 @@ const ColorIndicator = styled(Hoc)`
   }
 `;
 
+function TB({
+  onClick,
+  className,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  className: string;
+}) {
+  return (
+    <button
+      type='button'
+      className={className}
+      aria-label={useIntl().formatMessage({id: 'i18n:a11y:keyboard-shortcuts:deselect-highlight-color'})}
+      onClick={onClick}
+    >
+      <img src={trashIcon} alt='' />
+    </button>
+  );
+}
+
+// tslint:disable-next-line:variable-name
+export const TrashButton = styled(TB)`
+  img {
+    height: ${(props: Props) => indicatorSize(props) - 0.5}rem;
+    width: ${(props: Props) => indicatorSize(props) - 0.5}rem;
+  }
+`;
+
 export default ColorIndicator;
diff --git a/src/app/content/highlights/components/ColorPicker.spec.tsx b/src/app/content/highlights/components/ColorPicker.spec.tsx
index 1b5c1d3123..1fc9097f69 100644
--- a/src/app/content/highlights/components/ColorPicker.spec.tsx
+++ b/src/app/content/highlights/components/ColorPicker.spec.tsx
@@ -4,7 +4,7 @@ import { renderToDom, dispatchKeyDownEvent } from '../../../../test/reactutils';
 import TestContainer from '../../../../test/TestContainer';
 import { highlightStyles } from '../../constants';
 import ColorPicker from './ColorPicker';
-import { HTMLElement, HTMLFieldSetElement, HTMLInputElement } from '@openstax/types/lib.dom';
+import { HTMLElement, HTMLFieldSetElement, HTMLInputElement, HTMLButtonElement } from '@openstax/types/lib.dom';
 import { assertDocument } from '../../../utils';
 
 describe('ColorPicker', () => {
@@ -84,6 +84,27 @@ describe('ColorPicker', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
+  it('calls remove when trashcan is clicked', () => {
+    const onChange = jest.fn();
+    const onRemove = jest.fn();
+
+    const {root} = renderToDom(<TestContainer>
+      <ColorPicker color={highlightStyles[0].label} onChange={onChange} onRemove={onRemove} />
+    </TestContainer>);
+
+    const button = root.querySelector('button') as HTMLButtonElement;
+
+    // This should trigger the button, but does not in testing
+    dispatchKeyDownEvent({
+      element: button as HTMLElement,
+      key: 'Enter',
+    });
+
+    button.click();
+    expect(onRemove).toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it('operates as a radiogroup', () => {
     const onChange = jest.fn();
     const onRemove = jest.fn();
diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index 415ae6f8c2..1a49f2aba7 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -1,11 +1,12 @@
 import { HighlightColorEnum } from '@openstax/highlighter/dist/api';
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { hiddenButAccessible } from '../../../theme';
 import styled from 'styled-components/macro';
 import { match, not } from '../../../fpUtils';
 import { highlightStyles } from '../../constants';
 import { cardPadding } from '../constants';
-import ColorIndicator from './ColorIndicator';
+import ColorIndicator, { TrashButton } from './ColorIndicator';
 import { HTMLDivElement, HTMLInputElement } from '@openstax/types/lib.dom';
 
 interface SingleSelectProps {
@@ -48,7 +49,7 @@ const ColorButton = styled(({className, size, style, ...props}: ColorButtonProps
     component={<label />}
     className={className}
   >
-    <input type='checkbox' {...props} />
+    <input type='radio' aria-checked={props.checked} {...props} />
   </ColorIndicator>;
 })`
   cursor: pointer;
@@ -82,6 +83,17 @@ function nextIdx(idx: number, itemCount: number, key: NavKeys) {
   return idx;
 }
 
+// tslint:disable-next-line:variable-name
+const FSWrapper = styled.div`
+  border: 0;
+  display: flex;
+  flex-direction: row;
+
+  legend {
+    ${hiddenButAccessible}
+  }
+`;
+
 // tslint:disable-next-line:variable-name
 const ColorPicker = ({className, ...props}: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
@@ -113,33 +125,43 @@ const ColorPicker = ({className, ...props}: Props) => {
     },
     [color]
   );
+  const hasOnRemove = 'onRemove' in props && props.onRemove;
 
   React.useEffect(focusOnSelected, [focusOnSelected]);
 
   return (
-    <fieldset
-      className={className}
-      tabIndex={0}
-      ref={ref}
-      onKeyDown={handleKeyNavigation}
-      onFocus={focusOnSelected}
-    >
-      <legend>Choose highlight color</legend>
-      {highlightStyles.map((style) => <ColorButton key={style.label}
-        name={style.label}
-        checked={props.multiple ? props.selected.includes(style.label) : props.color === style.label}
-        style={style}
-        size={props.size}
-        tabIndex={-1}
-        onChange={() => props.multiple
-          ? props.selected.includes(style.label)
-            ? props.onChange(props.selected.filter(not(match(style.label))))
-            : props.onChange([...props.selected, style.label])
-          : props.color === style.label
-            ? props.onRemove ? props.onRemove() : null
-            : props.onChange(style.label)}
-      />)}
-    </fieldset>
+    <FSWrapper>
+      <fieldset
+        className={className}
+        tabIndex={0}
+        ref={ref}
+        onKeyDown={handleKeyNavigation}
+        onFocus={focusOnSelected}
+        role='radiogroup'
+      >
+        <legend>Choose highlight color</legend>
+        {highlightStyles.map((style) => <ColorButton key={style.label}
+          name={style.label}
+          checked={props.multiple ? props.selected.includes(style.label) : props.color === style.label}
+          style={style}
+          size={props.size}
+          tabIndex={-1}
+          onChange={() => props.multiple
+            ? props.selected.includes(style.label)
+              ? props.onChange(props.selected.filter(not(match(style.label))))
+              : props.onChange([...props.selected, style.label])
+            : props.color === style.label
+              ? props.onRemove ? props.onRemove() : null
+              : props.onChange(style.label)}
+        />)}
+      </fieldset>
+      { (!hasOnRemove || props.size === 'small') ? null :
+        <TrashButton
+          size={props.size}
+          onClick={props.onRemove}
+        />
+      }
+    </FSWrapper>
   );
 };
 
@@ -151,12 +173,4 @@ export default styled(ColorPicker)`
   overflow: visible;
   gap: ${cardPadding}rem;
   padding: ${cardPadding}rem 0.3rem;
-
-  legend {
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-  }
 `;
diff --git a/src/app/content/highlights/components/EditCard.spec.tsx b/src/app/content/highlights/components/EditCard.spec.tsx
index 5c1e19c13d..1a9c806d74 100644
--- a/src/app/content/highlights/components/EditCard.spec.tsx
+++ b/src/app/content/highlights/components/EditCard.spec.tsx
@@ -120,8 +120,9 @@ describe('EditCard', () => {
     const data = {
       ...highlightData,
       annotation: '',
+      color: 'red',
     };
-    const component = renderer.create(
+    const {root} = renderer.create(
       <TestContainer services={services} store={store}>
         <EditCard
           {...editCardProps}
@@ -131,7 +132,8 @@ describe('EditCard', () => {
       </TestContainer>
     );
 
-    const picker = component.root.findByType(ColorPicker);
+    const picker = root.findByType(ColorPicker);
+
     renderer.act(() => {
       picker.props.onRemove();
     });
@@ -154,14 +156,25 @@ describe('EditCard', () => {
     );
 
     const picker = component.root.findByType(ColorPicker);
-    renderer.act(() => {
-      picker.props.onRemove();
-    });
 
-    expect(editCardProps.onRemove).not.toHaveBeenCalled();
+    expect(picker.props.onRemove).toBeNull();
     mockSpyUser.mockClear();
   });
 
+  it('doesn\'t chain ColorPicker onRemove if there is no data', () => {
+    const mockSpyUser = jest.spyOn(selectAuth, 'user')
+      .mockReturnValue(formatUser(testAccountsUser));
+    const component = renderer.create(
+      <TestContainer services={services} store={store}>
+            <EditCard {...editCardProps} isActive={true} />
+      </TestContainer>
+    );
+
+    const picker = component.root.findByType(ColorPicker);
+
+    expect(picker.props.onRemove).toBeNull();
+    mockSpyUser.mockClear();
+  });
   it('doesn\'t chain ColorPicker onRemove if there is a pending note', () => {
     highlight.getStyle.mockReturnValue('red');
     const mockSpyUser = jest.spyOn(selectAuth, 'user')
@@ -186,11 +199,8 @@ describe('EditCard', () => {
     });
 
     const picker = component.root.findByType(ColorPicker);
-    renderer.act(() => {
-      picker.props.onRemove();
-    });
 
-    expect(editCardProps.onRemove).not.toHaveBeenCalled();
+    expect(picker.props.onRemove).toBeNull();
     mockSpyUser.mockClear();
   });
 
diff --git a/src/app/content/highlights/components/EditCard.tsx b/src/app/content/highlights/components/EditCard.tsx
index 0e1c48ceae..b4db5b9893 100644
--- a/src/app/content/highlights/components/EditCard.tsx
+++ b/src/app/content/highlights/components/EditCard.tsx
@@ -251,13 +251,17 @@ function ActiveEditCard({
 function useOnRemove(props: EditCardProps, pendingAnnotation: string) {
   const onRemove = props.onRemove;
   const trackDeleteHighlight = useAnalyticsEvent('deleteHighlight');
+  const removeAndTrack = React.useCallback(
+    () => {
+      const data = assertDefined(props.data, 'props.data must be defined');
 
-  return React.useCallback(() => {
-    if (props.data && !props.data.annotation && !pendingAnnotation) {
       onRemove();
-      trackDeleteHighlight(props.data.color);
-    }
-  }, [onRemove, pendingAnnotation, props.data, trackDeleteHighlight]);
+      trackDeleteHighlight(data.color);
+    },
+    [onRemove, props.data, trackDeleteHighlight]
+  );
+
+  return props.data && !props.data.annotation && !pendingAnnotation && props.data.color ? removeAndTrack : null;
 }
 
 function AnnotationEditor({
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 7874183ab1..e75b0cc356 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;
 }
 
-.c19 {
+.c20 {
   display: none;
 }
 
-.c21 {
+.c22 {
   display: none;
   position: absolute;
   height: 2rem;
@@ -155,7 +155,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border-radius: 50%;
 }
 
-.c22 {
+.c23 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -169,7 +169,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #fed200;
 }
 
-.c24 {
+.c25 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -183,7 +183,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #92d101;
 }
 
-.c26 {
+.c27 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -197,7 +197,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #00c3ed;
 }
 
-.c28 {
+.c29 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -211,7 +211,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #545ec8;
 }
 
-.c30 {
+.c31 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -225,7 +225,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #de017e;
 }
 
-.c16 {
+.c17 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -247,19 +247,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c16 .c18 {
+.c17 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c16 input:focus + .c20 {
+.c17 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c23 {
+.c24 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -281,19 +281,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c23 .c18 {
+.c24 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c23 input:focus + .c20 {
+.c24 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c25 {
+.c26 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -315,7 +315,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c25 .c18 {
+.c26 .c19 {
   height: 1rem;
   width: 1rem;
   color: #00c3ed;
@@ -324,14 +324,14 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
 }
 
-.c25 input:focus + .c20 {
+.c26 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c27 {
+.c28 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -353,19 +353,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c27 .c18 {
+.c28 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c27 input:focus + .c20 {
+.c28 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c29 {
+.c30 {
   position: relative;
   background-color: #ffc5e1;
   border: 1px solid #560131;
@@ -387,24 +387,24 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c29 .c18 {
+.c30 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c29 input:focus + .c20 {
+.c30 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c17 {
+.c18 {
   cursor: pointer;
   margin: 0;
 }
 
-.c17 input {
+.c18 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -412,9 +412,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
   width: 0;
 }
 
-.c15 {
+.c14 {
   border: 0;
-  outline: none;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -422,18 +421,34 @@ exports[`ContextMenu match snapshot when open 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  overflow: visible;
-  gap: 0.8rem;
-  padding: 0.8rem 0.3rem;
 }
 
-.c15 legend {
+.c14 legend {
   position: absolute;
-  height: 1px;
   width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
-  -webkit-clip: rect(1px,1px,1px,1px);
-  clip: rect(1px,1px,1px,1px);
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c16 {
+  border: 0;
+  outline: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  overflow: visible;
+  gap: 0.8rem;
+  padding: 0.8rem 0.3rem;
 }
 
 .c4 {
@@ -503,7 +518,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   color: #818181;
 }
 
-.c0 .c14 {
+.c0 .c15 {
   margin: 0.6rem 0 0 0.6rem;
 }
 
@@ -571,21 +586,21 @@ exports[`ContextMenu match snapshot when open 1`] = `
   width: 100%;
 }
 
-.c31 {
+.c32 {
   width: 15px;
   height: 15px;
   margin-right: 10px;
   color: #424242;
 }
 
-.c32 {
+.c33 {
   width: 15px;
   height: 15px;
   margin-right: 10px;
   color: #424242;
 }
 
-.c33 {
+.c34 {
   width: 15px;
   height: 15px;
   margin-right: 10px;
@@ -648,53 +663,24 @@ exports[`ContextMenu match snapshot when open 1`] = `
         className="c13"
       >
         <li>
-          <fieldset
-            className="c14 c15"
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={0}
+          <div
+            className="c14"
           >
-            <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",
-                }
-              }
-              title="yellow"
+            <fieldset
+              className="c15 c16"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              role="radiogroup"
+              tabIndex={0}
             >
-              <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
+              <legend>
+                Choose highlight color
+              </legend>
+              <label
+                aria-label="Apply yellow highlight"
                 checked={false}
-                name="yellow"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                className="c17 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -704,70 +690,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "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",
-                }
-              }
-              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"
+                title="yellow"
               >
-                <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"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   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
+                  aria-checked={false}
+                  checked={false}
+                  name="yellow"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
                 />
-              </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="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#8f7700",
+                      "focused": "#fed200",
+                      "label": "yellow",
+                      "passive": "#ffff8a",
+                    }
                   }
-                }
-              />
-              <span
-                className="c24"
+                />
+                <span
+                  className="c23"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#8f7700",
+                      "focused": "#fed200",
+                      "label": "yellow",
+                      "passive": "#ffff8a",
+                    }
+                  }
+                />
+              </label>
+              <label
+                aria-label="Apply green highlight"
+                checked={false}
+                className="c24 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -777,58 +752,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "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",
-                }
-              }
-              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"
+                title="green"
               >
-                <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"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   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
+                  aria-checked={false}
+                  checked={false}
+                  name="green"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
                 />
-              </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="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#4e6f01",
+                      "focused": "#92d101",
+                      "label": "green",
+                      "passive": "#def99f",
+                    }
                   }
-                }
-              />
-              <span
-                className="c26"
+                />
+                <span
+                  className="c25"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#4e6f01",
+                      "focused": "#92d101",
+                      "label": "green",
+                      "passive": "#def99f",
+                    }
+                  }
+                />
+              </label>
+              <label
+                aria-label="Apply blue highlight"
+                checked={true}
+                className="c26 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -838,58 +814,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "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",
-                }
-              }
-              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"
+                title="blue"
               >
-                <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"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   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
+                  aria-checked={true}
+                  checked={true}
+                  name="blue"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
                 />
-              </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="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#006880",
+                      "focused": "#00c3ed",
+                      "label": "blue",
+                      "passive": "#c8f5ff",
+                    }
                   }
-                }
-              />
-              <span
-                className="c28"
+                />
+                <span
+                  className="c27"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#006880",
+                      "focused": "#00c3ed",
+                      "label": "blue",
+                      "passive": "#c8f5ff",
+                    }
+                  }
+                />
+              </label>
+              <label
+                aria-label="Apply purple highlight"
+                checked={false}
+                className="c28 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -899,46 +876,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "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",
-                }
-              }
-              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"
+                title="purple"
               >
-                <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"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   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
+                  aria-checked={false}
+                  checked={false}
+                  name="purple"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
+                />
+                <span
+                  className="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#141a3e",
+                      "focused": "#545ec8",
+                      "label": "purple",
+                      "passive": "#cbcfff",
+                    }
+                  }
                 />
-              </svg>
-              <input
+                <span
+                  className="c29"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#141a3e",
+                      "focused": "#545ec8",
+                      "label": "purple",
+                      "passive": "#cbcfff",
+                    }
+                  }
+                />
+              </label>
+              <label
+                aria-label="Apply pink highlight"
                 checked={false}
-                name="pink"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                className="c30 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -948,21 +938,56 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "passive": "#ffc5e1",
                   }
                 }
-              />
-              <span
-                className="c30"
-                size="small"
-                style={
-                  Object {
-                    "focusBorder": "#560131",
-                    "focused": "#de017e",
-                    "label": "pink",
-                    "passive": "#ffc5e1",
+                title="pink"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
+                  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
+                  aria-checked={false}
+                  checked={false}
+                  name="pink"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
+                />
+                <span
+                  className="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#560131",
+                      "focused": "#de017e",
+                      "label": "pink",
+                      "passive": "#ffc5e1",
+                    }
                   }
-                }
-              />
-            </label>
-          </fieldset>
+                />
+                <span
+                  className="c31"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#560131",
+                      "focused": "#de017e",
+                      "label": "pink",
+                      "passive": "#ffc5e1",
+                    }
+                  }
+                />
+              </label>
+            </fieldset>
+          </div>
         </li>
         <li
           aria-label="Add note"
@@ -974,7 +999,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           >
             <svg
               aria-hidden="true"
-              className="c9 c31"
+              className="c9 c32"
               fill="currentColor"
               focusable="false"
               viewBox="0 0 576 512"
@@ -998,7 +1023,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           >
             <svg
               aria-hidden="true"
-              className="c9 c32"
+              className="c9 c33"
               fill="currentColor"
               focusable="false"
               viewBox="0 0 448 512"
@@ -1021,7 +1046,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           >
             <svg
               aria-hidden="true"
-              className="c9 c33"
+              className="c9 c34"
               fill="currentColor"
               focusable="false"
               viewBox="0 0 512 512"
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 f89008b657..fa2468b6e4 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPicker matches snapshot no selection 1`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: -.125em;
   overflow: hidden;
 }
 
-.c5 {
+.c6 {
   display: none;
 }
 
-.c7 {
+.c8 {
   display: none;
   position: absolute;
   height: 2.8rem;
@@ -26,7 +26,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border-radius: 50%;
 }
 
-.c8 {
+.c9 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -40,7 +40,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #fed200;
 }
 
-.c10 {
+.c11 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -54,7 +54,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #92d101;
 }
 
-.c12 {
+.c13 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -68,7 +68,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #00c3ed;
 }
 
-.c14 {
+.c15 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -82,7 +82,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #545ec8;
 }
 
-.c16 {
+.c17 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -96,7 +96,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #de017e;
 }
 
-.c1 {
+.c2 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -118,19 +118,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c1 .c4 {
+.c2 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c1 input:focus + .c6 {
+.c2 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c9 {
+.c10 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -152,19 +152,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c9 .c4 {
+.c10 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c9 input:focus + .c6 {
+.c10 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c11 {
+.c12 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -186,19 +186,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c11 .c4 {
+.c12 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c11 input:focus + .c6 {
+.c12 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c13 {
+.c14 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -220,19 +220,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c13 .c4 {
+.c14 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c13 input:focus + .c6 {
+.c14 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c15 {
+.c16 {
   position: relative;
   background-color: #ffc5e1;
   border: 1px solid #560131;
@@ -254,24 +254,29 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c15 .c4 {
+.c16 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c15 input:focus + .c6 {
+.c16 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c2 {
+.c18 img {
+  height: 1.9rem;
+  width: 1.9rem;
+}
+
+.c3 {
   cursor: pointer;
   margin: 0;
 }
 
-.c2 input {
+.c3 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -281,7 +286,6 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c0 {
   border: 0;
-  outline: none;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -289,66 +293,54 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  overflow: visible;
-  gap: 0.8rem;
-  padding: 0.8rem 0.3rem;
 }
 
 .c0 legend {
   position: absolute;
-  height: 1px;
   width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
-  -webkit-clip: rect(1px,1px,1px,1px);
-  clip: rect(1px,1px,1px,1px);
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c1 {
+  border: 0;
+  outline: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  overflow: visible;
+  gap: 0.8rem;
+  padding: 0.8rem 0.3rem;
 }
 
-<fieldset
+<div
   className="c0"
-  onFocus={[Function]}
-  onKeyDown={[Function]}
-  tabIndex={0}
 >
-  <legend>
-    Choose highlight color
-  </legend>
-  <label
-    aria-label="Apply yellow highlight"
-    checked={false}
-    className="c1 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#8f7700",
-        "focused": "#fed200",
-        "label": "yellow",
-        "passive": "#ffff8a",
-      }
-    }
-    title="yellow"
+  <fieldset
+    className="c1"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    role="radiogroup"
+    tabIndex={0}
   >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      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
+    <legend>
+      Choose highlight color
+    </legend>
+    <label
+      aria-label="Apply yellow highlight"
       checked={false}
-      name="yellow"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="checkbox"
-    />
-    <span
-      className="c6 c7"
+      className="c2 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#8f7700",
@@ -357,67 +349,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#ffff8a",
         }
       }
-    />
-    <span
-      className="c8"
-      style={
-        Object {
-          "focusBorder": "#8f7700",
-          "focused": "#fed200",
-          "label": "yellow",
-          "passive": "#ffff8a",
-        }
-      }
-    />
-  </label>
-  <label
-    aria-label="Apply green highlight"
-    checked={false}
-    className="c9 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#4e6f01",
-        "focused": "#92d101",
-        "label": "green",
-        "passive": "#def99f",
-      }
-    }
-    title="green"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="yellow"
     >
-      <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"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         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
+        aria-checked={false}
+        checked={false}
+        name="yellow"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
       />
-    </svg>
-    <input
-      checked={false}
-      name="green"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="checkbox"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#4e6f01",
-          "focused": "#92d101",
-          "label": "green",
-          "passive": "#def99f",
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#8f7700",
+            "focused": "#fed200",
+            "label": "yellow",
+            "passive": "#ffff8a",
+          }
         }
-      }
-    />
-    <span
-      className="c10"
+      />
+      <span
+        className="c9"
+        style={
+          Object {
+            "focusBorder": "#8f7700",
+            "focused": "#fed200",
+            "label": "yellow",
+            "passive": "#ffff8a",
+          }
+        }
+      />
+    </label>
+    <label
+      aria-label="Apply green highlight"
+      checked={false}
+      className="c10 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#4e6f01",
@@ -426,56 +408,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#def99f",
         }
       }
-    />
-  </label>
-  <label
-    aria-label="Apply blue highlight"
-    checked={false}
-    className="c11 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#006880",
-        "focused": "#00c3ed",
-        "label": "blue",
-        "passive": "#c8f5ff",
-      }
-    }
-    title="blue"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="green"
     >
-      <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"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         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
+        aria-checked={false}
+        checked={false}
+        name="green"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
       />
-    </svg>
-    <input
-      checked={false}
-      name="blue"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="checkbox"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#006880",
-          "focused": "#00c3ed",
-          "label": "blue",
-          "passive": "#c8f5ff",
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#4e6f01",
+            "focused": "#92d101",
+            "label": "green",
+            "passive": "#def99f",
+          }
         }
-      }
-    />
-    <span
-      className="c12"
+      />
+      <span
+        className="c11"
+        style={
+          Object {
+            "focusBorder": "#4e6f01",
+            "focused": "#92d101",
+            "label": "green",
+            "passive": "#def99f",
+          }
+        }
+      />
+    </label>
+    <label
+      aria-label="Apply blue highlight"
+      checked={false}
+      className="c12 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#006880",
@@ -484,56 +467,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#c8f5ff",
         }
       }
-    />
-  </label>
-  <label
-    aria-label="Apply purple highlight"
-    checked={false}
-    className="c13 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#141a3e",
-        "focused": "#545ec8",
-        "label": "purple",
-        "passive": "#cbcfff",
-      }
-    }
-    title="purple"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="blue"
     >
-      <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"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         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
+        aria-checked={false}
+        checked={false}
+        name="blue"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
       />
-    </svg>
-    <input
-      checked={false}
-      name="purple"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="checkbox"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#141a3e",
-          "focused": "#545ec8",
-          "label": "purple",
-          "passive": "#cbcfff",
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#006880",
+            "focused": "#00c3ed",
+            "label": "blue",
+            "passive": "#c8f5ff",
+          }
         }
-      }
-    />
-    <span
-      className="c14"
+      />
+      <span
+        className="c13"
+        style={
+          Object {
+            "focusBorder": "#006880",
+            "focused": "#00c3ed",
+            "label": "blue",
+            "passive": "#c8f5ff",
+          }
+        }
+      />
+    </label>
+    <label
+      aria-label="Apply purple highlight"
+      checked={false}
+      className="c14 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#141a3e",
@@ -542,45 +526,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#cbcfff",
         }
       }
-    />
-  </label>
-  <label
-    aria-label="Apply pink highlight"
-    checked={false}
-    className="c15 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#560131",
-        "focused": "#de017e",
-        "label": "pink",
-        "passive": "#ffc5e1",
-      }
-    }
-    title="pink"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="purple"
     >
-      <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"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         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
+        aria-checked={false}
+        checked={false}
+        name="purple"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
+      />
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#141a3e",
+            "focused": "#545ec8",
+            "label": "purple",
+            "passive": "#cbcfff",
+          }
+        }
+      />
+      <span
+        className="c15"
+        style={
+          Object {
+            "focusBorder": "#141a3e",
+            "focused": "#545ec8",
+            "label": "purple",
+            "passive": "#cbcfff",
+          }
+        }
       />
-    </svg>
-    <input
+    </label>
+    <label
+      aria-label="Apply pink highlight"
       checked={false}
-      name="pink"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="checkbox"
-    />
-    <span
-      className="c6 c7"
+      className="c16 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#560131",
@@ -589,18 +585,63 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#ffc5e1",
         }
       }
-    />
-    <span
-      className="c16"
-      style={
-        Object {
-          "focusBorder": "#560131",
-          "focused": "#de017e",
-          "label": "pink",
-          "passive": "#ffc5e1",
+      title="pink"
+    >
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
+        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
+        aria-checked={false}
+        checked={false}
+        name="pink"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
+      />
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#560131",
+            "focused": "#de017e",
+            "label": "pink",
+            "passive": "#ffc5e1",
+          }
         }
-      }
+      />
+      <span
+        className="c17"
+        style={
+          Object {
+            "focusBorder": "#560131",
+            "focused": "#de017e",
+            "label": "pink",
+            "passive": "#ffc5e1",
+          }
+        }
+      />
+    </label>
+  </fieldset>
+  <button
+    aria-label="Deselect current highlight color"
+    className="c18"
+    onClick={[MockFunction]}
+    type="button"
+  >
+    <img
+      alt=""
+      src="trash-347.svg"
     />
-  </label>
-</fieldset>
+  </button>
+</div>
 `;
diff --git a/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
index cdae254c9f..eb683b0c9a 100644
--- a/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
@@ -120,7 +120,7 @@ exports[`EditCard matches snapshot when editing 1`] = `
           Object {
             "color": undefined,
             "onChange": [Function],
-            "onRemove": [Function],
+            "onRemove": null,
           }
         }
         mock-color-picker="true"
@@ -238,7 +238,7 @@ exports[`EditCard matches snapshot with data 1`] = `
           Object {
             "color": undefined,
             "onChange": [Function],
-            "onRemove": [Function],
+            "onRemove": null,
           }
         }
         mock-color-picker="true"
diff --git a/src/app/content/keyboardShortcuts/components/ShowKeyboardShortcuts.tsx b/src/app/content/keyboardShortcuts/components/ShowKeyboardShortcuts.tsx
index 27754a452d..a35a2344ea 100644
--- a/src/app/content/keyboardShortcuts/components/ShowKeyboardShortcuts.tsx
+++ b/src/app/content/keyboardShortcuts/components/ShowKeyboardShortcuts.tsx
@@ -138,7 +138,6 @@ const ShowKeyboardShortcuts = () => (
         <Shortcut keys={['alt', 'h']} msgKey='move-focus-in-out'/>
         <Shortcut keys={['tab']} msgKey='move-through-note-editing'/>
         <Shortcut keys={['arrows']} msgKey='select-highlight-color'/>
-        <Shortcut keys={['space']} msgKey='deselect-highlight-color'/>
         <Shortcut keys={['enter']} msgKey='save-or-cancel'/>
       </ShortcutsTable>
     </ShortcutsCard>
diff --git a/src/app/content/keyboardShortcuts/components/__snapshots__/KeyboardShortcutsPopup.spec.tsx.snap b/src/app/content/keyboardShortcuts/components/__snapshots__/KeyboardShortcutsPopup.spec.tsx.snap
index 2ecdd9a87d..69b85ab12f 100644
--- a/src/app/content/keyboardShortcuts/components/__snapshots__/KeyboardShortcutsPopup.spec.tsx.snap
+++ b/src/app/content/keyboardShortcuts/components/__snapshots__/KeyboardShortcutsPopup.spec.tsx.snap
@@ -480,24 +480,6 @@ exports[`KeyboardShortcuts renders keyboard shortcuts modal if it is open 1`] =
               Select a different highlight color
             </div>
           </div>
-          <div
-            className="c11"
-          >
-            <div
-              className="c12"
-            >
-              <span
-                className="c13"
-              >
-                Space
-              </span>
-            </div>
-            <div
-              className="c12"
-            >
-              Deselect current highlight color
-            </div>
-          </div>
           <div
             className="c11"
           >
diff --git a/src/app/content/keyboardShortcuts/components/__snapshots__/ShowKeyboardShortcuts.spec.tsx.snap b/src/app/content/keyboardShortcuts/components/__snapshots__/ShowKeyboardShortcuts.spec.tsx.snap
index 3b43d6690e..04ef06e6af 100644
--- a/src/app/content/keyboardShortcuts/components/__snapshots__/ShowKeyboardShortcuts.spec.tsx.snap
+++ b/src/app/content/keyboardShortcuts/components/__snapshots__/ShowKeyboardShortcuts.spec.tsx.snap
@@ -252,24 +252,6 @@ exports[`ShowKeyboardShortcuts renders the keyboard shortcuts menu 1`] = `
           Select a different highlight color
         </div>
       </div>
-      <div
-        className="c4"
-      >
-        <div
-          className="c5"
-        >
-          <span
-            className="c6"
-          >
-            Space
-          </span>
-        </div>
-        <div
-          className="c5"
-        >
-          Deselect current highlight color
-        </div>
-      </div>
       <div
         className="c4"
       >
diff --git a/src/assets/trash-347.svg b/src/assets/trash-347.svg
new file mode 100644
index 0000000000..a71818fd57
--- /dev/null
+++ b/src/assets/trash-347.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+
+<defs>
+</defs>
+<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
+	<path d="M 76.777 2.881 H 57.333 V 2.412 C 57.333 1.08 56.253 0 54.921 0 H 35.079 c -1.332 0 -2.412 1.08 -2.412 2.412 v 0.469 H 13.223 c -1.332 0 -2.412 1.08 -2.412 2.412 v 9.526 c 0 1.332 1.08 2.412 2.412 2.412 h 63.554 c 1.332 0 2.412 -1.08 2.412 -2.412 V 5.293 C 79.189 3.961 78.109 2.881 76.777 2.881 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 73.153 22.119 H 16.847 c -1.332 0 -2.412 1.08 -2.412 2.412 v 63.057 c 0 1.332 1.08 2.412 2.412 2.412 h 56.306 c 1.332 0 2.412 -1.08 2.412 -2.412 V 24.531 C 75.565 23.199 74.485 22.119 73.153 22.119 z M 33.543 81.32 c 0 1.332 -1.08 2.412 -2.412 2.412 h -2.245 c -1.332 0 -2.412 -1.08 -2.412 -2.412 V 30.799 c 0 -1.332 1.08 -2.412 2.412 -2.412 h 2.245 c 1.332 0 2.412 1.08 2.412 2.412 V 81.32 z M 48.535 81.32 c 0 1.332 -1.08 2.412 -2.412 2.412 h -2.245 c -1.332 0 -2.412 -1.08 -2.412 -2.412 V 30.799 c 0 -1.332 1.08 -2.412 2.412 -2.412 h 2.245 c 1.332 0 2.412 1.08 2.412 2.412 V 81.32 z M 63.526 81.32 c 0 1.332 -1.08 2.412 -2.412 2.412 h -2.245 c -1.332 0 -2.412 -1.08 -2.412 -2.412 V 30.799 c 0 -1.332 1.08 -2.412 2.412 -2.412 h 2.245 c 1.332 0 2.412 1.08 2.412 2.412 V 81.32 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</svg>
\ No newline at end of file