From 4fc40b1d1909d2d97d7c86490b960e960b53f389 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Tue, 20 Aug 2024 11:49:57 -0500
Subject: [PATCH 1/7] 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.
---
 src/app/content/highlights/components/ColorPicker.tsx  |  2 +-
 .../__snapshots__/ContextMenu.spec.tsx.snap            | 10 ++++++++++
 .../components/__snapshots__/ColorPicker.spec.tsx.snap | 10 ++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index 415ae6f8c2..9cb8b6c95b 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -48,7 +48,7 @@ const ColorButton = styled(({className, size, style, ...props}: ColorButtonProps
     component={<label />}
     className={className}
   >
-    <input type='checkbox' {...props} />
+    <input type='checkbox' role='radio' aria-checked={props.checked} {...props} />
   </ColorIndicator>;
 })`
   cursor: pointer;
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..e33de49228 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
@@ -687,9 +687,11 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 />
               </svg>
               <input
+                aria-checked={false}
                 checked={false}
                 name="yellow"
                 onChange={[Function]}
+                role="radio"
                 tabIndex={-1}
                 type="checkbox"
               />
@@ -748,9 +750,11 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 />
               </svg>
               <input
+                aria-checked={false}
                 checked={false}
                 name="green"
                 onChange={[Function]}
+                role="radio"
                 tabIndex={-1}
                 type="checkbox"
               />
@@ -809,9 +813,11 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 />
               </svg>
               <input
+                aria-checked={true}
                 checked={true}
                 name="blue"
                 onChange={[Function]}
+                role="radio"
                 tabIndex={-1}
                 type="checkbox"
               />
@@ -870,9 +876,11 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 />
               </svg>
               <input
+                aria-checked={false}
                 checked={false}
                 name="purple"
                 onChange={[Function]}
+                role="radio"
                 tabIndex={-1}
                 type="checkbox"
               />
@@ -931,9 +939,11 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 />
               </svg>
               <input
+                aria-checked={false}
                 checked={false}
                 name="pink"
                 onChange={[Function]}
+                role="radio"
                 tabIndex={-1}
                 type="checkbox"
               />
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..edfd57ec59 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -341,9 +341,11 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       />
     </svg>
     <input
+      aria-checked={false}
       checked={false}
       name="yellow"
       onChange={[Function]}
+      role="radio"
       tabIndex={-1}
       type="checkbox"
     />
@@ -399,9 +401,11 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       />
     </svg>
     <input
+      aria-checked={false}
       checked={false}
       name="green"
       onChange={[Function]}
+      role="radio"
       tabIndex={-1}
       type="checkbox"
     />
@@ -457,9 +461,11 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       />
     </svg>
     <input
+      aria-checked={false}
       checked={false}
       name="blue"
       onChange={[Function]}
+      role="radio"
       tabIndex={-1}
       type="checkbox"
     />
@@ -515,9 +521,11 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       />
     </svg>
     <input
+      aria-checked={false}
       checked={false}
       name="purple"
       onChange={[Function]}
+      role="radio"
       tabIndex={-1}
       type="checkbox"
     />
@@ -573,9 +581,11 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       />
     </svg>
     <input
+      aria-checked={false}
       checked={false}
       name="pink"
       onChange={[Function]}
+      role="radio"
       tabIndex={-1}
       type="checkbox"
     />

From 8febcd72a7412d3af49ea4538e0b417a5e6e338d Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Tue, 20 Aug 2024 12:02:06 -0500
Subject: [PATCH 2/7] Add radiogroup role to fieldset

---
 src/app/content/highlights/components/ColorPicker.tsx            | 1 +
 .../SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap         | 1 +
 .../components/__snapshots__/ColorPicker.spec.tsx.snap           | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index 9cb8b6c95b..a84918394d 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -123,6 +123,7 @@ const ColorPicker = ({className, ...props}: Props) => {
       ref={ref}
       onKeyDown={handleKeyNavigation}
       onFocus={focusOnSelected}
+      role='radiogroup'
     >
       <legend>Choose highlight color</legend>
       {highlightStyles.map((style) => <ColorButton key={style.label}
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 e33de49228..f6d236a8be 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
@@ -652,6 +652,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             className="c14 c15"
             onFocus={[Function]}
             onKeyDown={[Function]}
+            role="radiogroup"
             tabIndex={0}
           >
             <legend>
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 edfd57ec59..b17b548e03 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -307,6 +307,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   className="c0"
   onFocus={[Function]}
   onKeyDown={[Function]}
+  role="radiogroup"
   tabIndex={0}
 >
   <legend>

From d3bc546811baedaf5bcbfa6d175cc97aadff6b79 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Mon, 9 Sep 2024 17:50:24 -0500
Subject: [PATCH 3/7] Add trash can icon to color picker

---
 .../highlights/components/ColorIndicator.tsx  | 28 +++++++++++++++
 .../components/ColorPicker.spec.tsx           | 35 ++++++++++++++++++-
 .../highlights/components/ColorPicker.tsx     | 18 +++++++---
 .../__snapshots__/ContextMenu.spec.tsx.snap   | 15 +++-----
 .../__snapshots__/ColorPicker.spec.tsx.snap   | 31 ++++++++++------
 src/assets/trash-347.svg                      |  9 +++++
 6 files changed, 110 insertions(+), 26 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..75e4d8b032 100644
--- a/src/app/content/highlights/components/ColorIndicator.tsx
+++ b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -4,6 +4,7 @@ import { Check } from 'styled-icons/fa-solid/Check';
 import { isDefined } from '../../../guards';
 import { highlightStyles } from '../../constants';
 import { defaultFocusOutline } from '../../../theme';
+import trashIcon from '../../../../assets/trash-347.svg';
 
 interface StyleProps {
   style: typeof highlightStyles[number];
@@ -114,4 +115,31 @@ const ColorIndicator = styled(Hoc)`
   }
 `;
 
+function TB({
+  onClick,
+  className,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  className: string;
+}) {
+  return (
+    <button
+      type='button'
+      className={className}
+      aria-label='remove highlight'
+      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..c29fb7a448 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,39 @@ 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('handles having no onRemove when trashcan is clicked', () => {
+    const onChange = jest.fn();
+    const component = renderer.create(<TestContainer>
+      <ColorPicker color={highlightStyles[0].label} onChange={onChange} />
+    </TestContainer>);
+
+    const button = component.root.findByType('button');
+
+    button.props.onClick();
+    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 a84918394d..0c644f9bc1 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -5,7 +5,7 @@ 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 +48,7 @@ const ColorButton = styled(({className, size, style, ...props}: ColorButtonProps
     component={<label />}
     className={className}
   >
-    <input type='checkbox' role='radio' aria-checked={props.checked} {...props} />
+    <input type='radio' aria-checked={props.checked} {...props} />
   </ColorIndicator>;
 })`
   cursor: pointer;
@@ -98,9 +98,11 @@ const ColorPicker = ({className, ...props}: Props) => {
       const destIdx = nextIdx(idx, inputs.length, event.key as NavKeys);
       const el = inputs[destIdx];
 
-      event.preventDefault();
-      el.focus();
-      el.click();
+      if (el) {
+        event.preventDefault();
+        el.focus();
+        el.click();
+      }
     },
     []
   );
@@ -140,6 +142,12 @@ const ColorPicker = ({className, ...props}: Props) => {
             ? props.onRemove ? props.onRemove() : null
             : props.onChange(style.label)}
       />)}
+      { props.size === 'small' ? null :
+        <TrashButton
+          size={props.size}
+          onClick={() => 'onRemove' in props && props.onRemove ? props.onRemove() : null}
+        />
+      }
     </fieldset>
   );
 };
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 f6d236a8be..4c9cbd9582 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
@@ -692,9 +692,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 checked={false}
                 name="yellow"
                 onChange={[Function]}
-                role="radio"
                 tabIndex={-1}
-                type="checkbox"
+                type="radio"
               />
               <span
                 className="c20 c21"
@@ -755,9 +754,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 checked={false}
                 name="green"
                 onChange={[Function]}
-                role="radio"
                 tabIndex={-1}
-                type="checkbox"
+                type="radio"
               />
               <span
                 className="c20 c21"
@@ -818,9 +816,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 checked={true}
                 name="blue"
                 onChange={[Function]}
-                role="radio"
                 tabIndex={-1}
-                type="checkbox"
+                type="radio"
               />
               <span
                 className="c20 c21"
@@ -881,9 +878,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 checked={false}
                 name="purple"
                 onChange={[Function]}
-                role="radio"
                 tabIndex={-1}
-                type="checkbox"
+                type="radio"
               />
               <span
                 className="c20 c21"
@@ -944,9 +940,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 checked={false}
                 name="pink"
                 onChange={[Function]}
-                role="radio"
                 tabIndex={-1}
-                type="checkbox"
+                type="radio"
               />
               <span
                 className="c20 c21"
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 b17b548e03..67752fbf0c 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -266,6 +266,11 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   z-index: 1;
 }
 
+.c17 img {
+  height: 1.9rem;
+  width: 1.9rem;
+}
+
 .c2 {
   cursor: pointer;
   margin: 0;
@@ -346,9 +351,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       checked={false}
       name="yellow"
       onChange={[Function]}
-      role="radio"
       tabIndex={-1}
-      type="checkbox"
+      type="radio"
     />
     <span
       className="c6 c7"
@@ -406,9 +410,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       checked={false}
       name="green"
       onChange={[Function]}
-      role="radio"
       tabIndex={-1}
-      type="checkbox"
+      type="radio"
     />
     <span
       className="c6 c7"
@@ -466,9 +469,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       checked={false}
       name="blue"
       onChange={[Function]}
-      role="radio"
       tabIndex={-1}
-      type="checkbox"
+      type="radio"
     />
     <span
       className="c6 c7"
@@ -526,9 +528,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       checked={false}
       name="purple"
       onChange={[Function]}
-      role="radio"
       tabIndex={-1}
-      type="checkbox"
+      type="radio"
     />
     <span
       className="c6 c7"
@@ -586,9 +587,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       checked={false}
       name="pink"
       onChange={[Function]}
-      role="radio"
       tabIndex={-1}
-      type="checkbox"
+      type="radio"
     />
     <span
       className="c6 c7"
@@ -613,5 +613,16 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       }
     />
   </label>
+  <button
+    aria-label="remove highlight"
+    className="c17"
+    onClick={[Function]}
+    type="button"
+  >
+    <img
+      alt=""
+      src="trash-347.svg"
+    />
+  </button>
 </fieldset>
 `;
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

From fdf55a3a1c0f3f71c03fec9e148ed898d575859a Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Thu, 12 Sep 2024 11:09:58 -0500
Subject: [PATCH 4/7] Only show trashcan when it will do something

---
 .../highlights/components/ColorPicker.tsx        |  5 +++--
 .../content/highlights/components/EditCard.tsx   | 16 ++++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index 0c644f9bc1..15c20b1442 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -115,6 +115,7 @@ const ColorPicker = ({className, ...props}: Props) => {
     },
     [color]
   );
+  const hasOnRemove = 'onRemove' in props && props.onRemove;
 
   React.useEffect(focusOnSelected, [focusOnSelected]);
 
@@ -142,10 +143,10 @@ const ColorPicker = ({className, ...props}: Props) => {
             ? props.onRemove ? props.onRemove() : null
             : props.onChange(style.label)}
       />)}
-      { props.size === 'small' ? null :
+      { (!hasOnRemove || props.size === 'small') ? null :
         <TrashButton
           size={props.size}
-          onClick={() => 'onRemove' in props && props.onRemove ? props.onRemove() : null}
+          onClick={props.onRemove}
         />
       }
     </fieldset>
diff --git a/src/app/content/highlights/components/EditCard.tsx b/src/app/content/highlights/components/EditCard.tsx
index 0e1c48ceae..d771c4658a 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(
+    () => {
+      if (props.data) {
+        onRemove();
+        trackDeleteHighlight(props.data.color);
+      }
+    },
+    [onRemove, props.data, trackDeleteHighlight]
+  );
 
-  return React.useCallback(() => {
-    if (props.data && !props.data.annotation && !pendingAnnotation) {
-      onRemove();
-      trackDeleteHighlight(props.data.color);
-    }
-  }, [onRemove, pendingAnnotation, props.data, trackDeleteHighlight]);
+  return props.data && !props.data.annotation && !pendingAnnotation && props.data.color ? removeAndTrack : null;
 }
 
 function AnnotationEditor({

From 1b7bf3b2a49f54071822fc9fc6fe6e43f690cc9f Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 18 Sep 2024 15:29:20 -0500
Subject: [PATCH 5/7] Separate trash button; fix tests

---
 .../components/ColorPicker.spec.tsx           |  14 +-
 .../highlights/components/ColorPicker.tsx     |  66 +-
 .../highlights/components/EditCard.spec.tsx   |  30 +-
 .../highlights/components/EditCard.tsx        |   8 +-
 .../__snapshots__/ContextMenu.spec.tsx.snap   | 588 +++++++++---------
 .../__snapshots__/ColorPicker.spec.tsx.snap   | 558 +++++++++--------
 .../__snapshots__/EditCard.spec.tsx.snap      |   4 +-
 7 files changed, 655 insertions(+), 613 deletions(-)

diff --git a/src/app/content/highlights/components/ColorPicker.spec.tsx b/src/app/content/highlights/components/ColorPicker.spec.tsx
index c29fb7a448..32c030449d 100644
--- a/src/app/content/highlights/components/ColorPicker.spec.tsx
+++ b/src/app/content/highlights/components/ColorPicker.spec.tsx
@@ -105,18 +105,6 @@ describe('ColorPicker', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('handles having no onRemove when trashcan is clicked', () => {
-    const onChange = jest.fn();
-    const component = renderer.create(<TestContainer>
-      <ColorPicker color={highlightStyles[0].label} onChange={onChange} />
-    </TestContainer>);
-
-    const button = component.root.findByType('button');
-
-    button.props.onClick();
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
   it('operates as a radiogroup', () => {
     const onChange = jest.fn();
     const onRemove = jest.fn();
@@ -125,7 +113,7 @@ describe('ColorPicker', () => {
         <ColorPicker color={highlightStyles[0].label} onChange={onChange} onRemove={onRemove} />
       </TestContainer>
     );
-    const rg = root.querySelector('fieldset') as HTMLFieldSetElement;
+    const rg = root.querySelector('fieldset > fieldset') as HTMLFieldSetElement;
 
     expect(rg).toBeTruthy();
     rg?.focus();
diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index 15c20b1442..d20610c7dd 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -82,6 +82,13 @@ function nextIdx(idx: number, itemCount: number, key: NavKeys) {
   return idx;
 }
 
+// tslint:disable-next-line:variable-name
+const FSWrapper = styled.fieldset`
+  border: 0;
+  display: flex;
+  flex-direction: row;
+`;
+
 // tslint:disable-next-line:variable-name
 const ColorPicker = ({className, ...props}: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
@@ -98,11 +105,9 @@ const ColorPicker = ({className, ...props}: Props) => {
       const destIdx = nextIdx(idx, inputs.length, event.key as NavKeys);
       const el = inputs[destIdx];
 
-      if (el) {
-        event.preventDefault();
-        el.focus();
-        el.click();
-      }
+      event.preventDefault();
+      el.focus();
+      el.click();
     },
     []
   );
@@ -120,36 +125,39 @@ const ColorPicker = ({className, ...props}: Props) => {
   React.useEffect(focusOnSelected, [focusOnSelected]);
 
   return (
-    <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)}
-      />)}
+    <FSWrapper>
+      <legend>Select or clear highlight color</legend>
+      <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}
         />
       }
-    </fieldset>
+    </FSWrapper>
   );
 };
 
diff --git a/src/app/content/highlights/components/EditCard.spec.tsx b/src/app/content/highlights/components/EditCard.spec.tsx
index 6eb7e59ba0..ba8bc81cf5 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 d771c4658a..b4db5b9893 100644
--- a/src/app/content/highlights/components/EditCard.tsx
+++ b/src/app/content/highlights/components/EditCard.tsx
@@ -253,10 +253,10 @@ function useOnRemove(props: EditCardProps, pendingAnnotation: string) {
   const trackDeleteHighlight = useAnalyticsEvent('deleteHighlight');
   const removeAndTrack = React.useCallback(
     () => {
-      if (props.data) {
-        onRemove();
-        trackDeleteHighlight(props.data.color);
-      }
+      const data = assertDefined(props.data, 'props.data must be defined');
+
+      onRemove();
+      trackDeleteHighlight(data.color);
     },
     [onRemove, props.data, trackDeleteHighlight]
   );
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 4c9cbd9582..756502d44f 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,7 +412,18 @@ exports[`ContextMenu match snapshot when open 1`] = `
   width: 0;
 }
 
-.c15 {
+.c14 {
+  border: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c16 {
   border: 0;
   outline: none;
   display: -webkit-box;
@@ -427,7 +438,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c15 legend {
+.c16 legend {
   position: absolute;
   height: 1px;
   width: 1px;
@@ -503,7 +514,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   color: #818181;
 }
 
-.c0 .c14 {
+.c0 .c15 {
   margin: 0.6rem 0 0 0.6rem;
 }
 
@@ -571,21 +582,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;
@@ -649,54 +660,26 @@ exports[`ContextMenu match snapshot when open 1`] = `
       >
         <li>
           <fieldset
-            className="c14 c15"
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            role="radiogroup"
-            tabIndex={0}
+            className="c14"
           >
             <legend>
-              Choose highlight color
+              Select or clear 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
-                aria-checked={false}
+              <legend>
+                Choose highlight color
+              </legend>
+              <label
+                aria-label="Apply yellow highlight"
                 checked={false}
-                name="yellow"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <span
-                className="c20 c21"
+                className="c17 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -706,71 +689,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
-                aria-checked={false}
-                checked={false}
-                name="green"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <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 {
@@ -780,59 +751,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
-                aria-checked={true}
-                checked={true}
-                name="blue"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <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 {
@@ -842,59 +813,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
-                aria-checked={false}
-                checked={false}
-                name="purple"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <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 {
@@ -904,47 +875,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",
+                    }
+                  }
+                />
+                <span
+                  className="c29"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#141a3e",
+                      "focused": "#545ec8",
+                      "label": "purple",
+                      "passive": "#cbcfff",
+                    }
+                  }
                 />
-              </svg>
-              <input
-                aria-checked={false}
+              </label>
+              <label
+                aria-label="Apply pink highlight"
                 checked={false}
-                name="pink"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <span
-                className="c20 c21"
+                className="c30 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -954,20 +937,55 @@ 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>
+                />
+                <span
+                  className="c31"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#560131",
+                      "focused": "#de017e",
+                      "label": "pink",
+                      "passive": "#ffc5e1",
+                    }
+                  }
+                />
+              </label>
+            </fieldset>
           </fieldset>
         </li>
         <li
@@ -980,7 +998,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"
@@ -1004,7 +1022,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"
@@ -1027,7 +1045,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 67752fbf0c..7a7363abe3 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,29 +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;
 }
 
-.c17 img {
+.c18 img {
   height: 1.9rem;
   width: 1.9rem;
 }
 
-.c2 {
+.c3 {
   cursor: pointer;
   margin: 0;
 }
 
-.c2 input {
+.c3 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -285,6 +285,17 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 }
 
 .c0 {
+  border: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1 {
   border: 0;
   outline: none;
   display: -webkit-box;
@@ -299,7 +310,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c0 legend {
+.c1 legend {
   position: absolute;
   height: 1px;
   width: 1px;
@@ -310,63 +321,25 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 <fieldset
   className="c0"
-  onFocus={[Function]}
-  onKeyDown={[Function]}
-  role="radiogroup"
-  tabIndex={0}
 >
   <legend>
-    Choose highlight color
+    Select or clear 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
-      aria-checked={false}
+    <legend>
+      Choose highlight color
+    </legend>
+    <label
+      aria-label="Apply yellow highlight"
       checked={false}
-      name="yellow"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#8f7700",
-          "focused": "#fed200",
-          "label": "yellow",
-          "passive": "#ffff8a",
-        }
-      }
-    />
-    <span
-      className="c8"
+      className="c2 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#8f7700",
@@ -375,57 +348,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "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
-      aria-checked={false}
-      checked={false}
-      name="green"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <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",
@@ -434,57 +407,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
-      aria-checked={false}
-      checked={false}
-      name="blue"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <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",
@@ -493,57 +466,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
-      aria-checked={false}
-      checked={false}
-      name="purple"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <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",
@@ -552,46 +525,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",
+          }
+        }
       />
-    </svg>
-    <input
-      aria-checked={false}
+      <span
+        className="c15"
+        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="radio"
-    />
-    <span
-      className="c6 c7"
+      className="c16 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#560131",
@@ -600,23 +584,57 @@ 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",
+          }
         }
-      }
-    />
-  </label>
+      />
+      <span
+        className="c17"
+        style={
+          Object {
+            "focusBorder": "#560131",
+            "focused": "#de017e",
+            "label": "pink",
+            "passive": "#ffc5e1",
+          }
+        }
+      />
+    </label>
+  </fieldset>
   <button
     aria-label="remove highlight"
-    className="c17"
-    onClick={[Function]}
+    className="c18"
+    onClick={[MockFunction]}
     type="button"
   >
     <img
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 5fa7d6b69b..892647e975 100644
--- a/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
@@ -118,7 +118,7 @@ exports[`EditCard matches snapshot when editing 1`] = `
       <div
         mock-color-picker={true}
         onChange={[Function]}
-        onRemove={[Function]}
+        onRemove={null}
       />
       <div
         edit={false}
@@ -225,7 +225,7 @@ exports[`EditCard matches snapshot with data 1`] = `
       <div
         mock-color-picker={true}
         onChange={[Function]}
-        onRemove={[Function]}
+        onRemove={null}
       />
       <div
         edit={false}

From 510fd4abd48698e88e666227fbbe50a0fedb0805 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Mon, 23 Sep 2024 11:38:43 -0500
Subject: [PATCH 6/7] Hide colorpicker legends; remove space instruction

---
 .../highlights/components/ColorIndicator.tsx  |  3 ++-
 .../highlights/components/ColorPicker.tsx     | 13 ++++------
 .../__snapshots__/ContextMenu.spec.tsx.snap   | 22 ++++++++++-------
 .../__snapshots__/ColorPicker.spec.tsx.snap   | 24 +++++++++++--------
 .../components/ShowKeyboardShortcuts.tsx      |  1 -
 .../KeyboardShortcutsPopup.spec.tsx.snap      | 18 --------------
 .../ShowKeyboardShortcuts.spec.tsx.snap       | 18 --------------
 7 files changed, 34 insertions(+), 65 deletions(-)

diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
index 75e4d8b032..fc0e06b043 100644
--- a/src/app/content/highlights/components/ColorIndicator.tsx
+++ b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -4,6 +4,7 @@ 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 {
@@ -126,7 +127,7 @@ function TB({
     <button
       type='button'
       className={className}
-      aria-label='remove highlight'
+      aria-label={useIntl().formatMessage({id: 'i18n:a11y:keyboard-shortcuts:deselect-highlight-color'})}
       onClick={onClick}
     >
       <img src={trashIcon} alt='' />
diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index d20610c7dd..0cc82afb0d 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -1,6 +1,7 @@
 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';
@@ -87,6 +88,10 @@ const FSWrapper = styled.fieldset`
   border: 0;
   display: flex;
   flex-direction: row;
+
+  legend {
+    ${hiddenButAccessible}
+  }
 `;
 
 // tslint:disable-next-line:variable-name
@@ -169,12 +174,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/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
index 756502d44f..5341d20d97 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
@@ -423,6 +423,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   flex-direction: row;
 }
 
+.c14 legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .c16 {
   border: 0;
   outline: none;
@@ -438,15 +451,6 @@ exports[`ContextMenu match snapshot when open 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c16 legend {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  -webkit-clip: rect(1px,1px,1px,1px);
-  clip: rect(1px,1px,1px,1px);
-}
-
 .c4 {
   cursor: pointer;
   border: none;
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 7a7363abe3..18b64836a2 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -295,6 +295,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   flex-direction: row;
 }
 
+.c0 legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .c1 {
   border: 0;
   outline: none;
@@ -310,15 +323,6 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c1 legend {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  -webkit-clip: rect(1px,1px,1px,1px);
-  clip: rect(1px,1px,1px,1px);
-}
-
 <fieldset
   className="c0"
 >
@@ -632,7 +636,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
     </label>
   </fieldset>
   <button
-    aria-label="remove highlight"
+    aria-label="Deselect current highlight color"
     className="c18"
     onClick={[MockFunction]}
     type="button"
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"
       >

From f3b4f9440df99bc81b8b1122e69f1de5108c01f6 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 25 Sep 2024 09:59:51 -0500
Subject: [PATCH 7/7] No fieldset grouping color indicators and trash icon

---
 src/app/content/highlights/components/ColorPicker.spec.tsx | 2 +-
 src/app/content/highlights/components/ColorPicker.tsx      | 3 +--
 .../SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap   | 7 ++-----
 .../components/__snapshots__/ColorPicker.spec.tsx.snap     | 7 ++-----
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/app/content/highlights/components/ColorPicker.spec.tsx b/src/app/content/highlights/components/ColorPicker.spec.tsx
index 32c030449d..1fc9097f69 100644
--- a/src/app/content/highlights/components/ColorPicker.spec.tsx
+++ b/src/app/content/highlights/components/ColorPicker.spec.tsx
@@ -113,7 +113,7 @@ describe('ColorPicker', () => {
         <ColorPicker color={highlightStyles[0].label} onChange={onChange} onRemove={onRemove} />
       </TestContainer>
     );
-    const rg = root.querySelector('fieldset > fieldset') as HTMLFieldSetElement;
+    const rg = root.querySelector('fieldset') as HTMLFieldSetElement;
 
     expect(rg).toBeTruthy();
     rg?.focus();
diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index 0cc82afb0d..1a49f2aba7 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -84,7 +84,7 @@ function nextIdx(idx: number, itemCount: number, key: NavKeys) {
 }
 
 // tslint:disable-next-line:variable-name
-const FSWrapper = styled.fieldset`
+const FSWrapper = styled.div`
   border: 0;
   display: flex;
   flex-direction: row;
@@ -131,7 +131,6 @@ const ColorPicker = ({className, ...props}: Props) => {
 
   return (
     <FSWrapper>
-      <legend>Select or clear highlight color</legend>
       <fieldset
         className={className}
         tabIndex={0}
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 5341d20d97..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
@@ -663,12 +663,9 @@ exports[`ContextMenu match snapshot when open 1`] = `
         className="c13"
       >
         <li>
-          <fieldset
+          <div
             className="c14"
           >
-            <legend>
-              Select or clear highlight color
-            </legend>
             <fieldset
               className="c15 c16"
               onFocus={[Function]}
@@ -990,7 +987,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
                 />
               </label>
             </fieldset>
-          </fieldset>
+          </div>
         </li>
         <li
           aria-label="Add note"
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 18b64836a2..fa2468b6e4 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -323,12 +323,9 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-<fieldset
+<div
   className="c0"
 >
-  <legend>
-    Select or clear highlight color
-  </legend>
   <fieldset
     className="c1"
     onFocus={[Function]}
@@ -646,5 +643,5 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       src="trash-347.svg"
     />
   </button>
-</fieldset>
+</div>
 `;