diff --git a/spec/__snapshots__/colorPickerPill.spec.tsx.snap b/spec/__snapshots__/colorPickerPill.spec.tsx.snap
index b31e5db8..489e9439 100644
--- a/spec/__snapshots__/colorPickerPill.spec.tsx.snap
+++ b/spec/__snapshots__/colorPickerPill.spec.tsx.snap
@@ -2,16 +2,17 @@
 
 exports[`<ColorPickerPill/> should render chosen dots as larger 1`] = `
 <div
-  className="ColorPicker"
+  className="color-picker"
 >
-  <div
-    className="EnclosingCircle"
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(0, 0, 0, 0.64)"
     key="rgba(0, 0, 0, 0.64)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(0, 0, 0, 0.64)",
@@ -22,15 +23,16 @@ exports[`<ColorPickerPill/> should render chosen dots as larger 1`] = `
         }
       }
     />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(233, 0, 0, 0.64)"
     key="rgba(233, 0, 0, 0.64)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(233, 0, 0, 0.64)",
@@ -41,22 +43,23 @@ exports[`<ColorPickerPill/> should render chosen dots as larger 1`] = `
         }
       }
     />
-  </div>
+  </button>
 </div>
 `;
 
 exports[`<ColorPickerPill/> should render correctly 1`] = `
 <div
-  className="ColorPicker"
+  className="color-picker"
 >
-  <div
-    className="EnclosingCircle"
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(0, 142, 255, 0.64)"
     key="rgba(0, 142, 255, 0.64)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(0, 142, 255, 0.64)",
@@ -67,15 +70,16 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
         }
       }
     />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(38, 196, 58, 0.64)"
     key="rgba(38, 196, 58, 0.64)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(38, 196, 58, 0.64)",
@@ -86,15 +90,16 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
         }
       }
     />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(246, 178, 2, 0.64)"
     key="rgba(246, 178, 2, 0.64)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(246, 178, 2, 0.64)",
@@ -105,15 +110,16 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
         }
       }
     />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(233, 0, 0, 0.64)"
     key="rgba(233, 0, 0, 0.64)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(233, 0, 0, 0.64)",
@@ -124,22 +130,23 @@ exports[`<ColorPickerPill/> should render correctly 1`] = `
         }
       }
     />
-  </div>
+  </button>
 </div>
 `;
 
 exports[`<ColorPickerPill/> should render outlined dot if provided in props 1`] = `
 <div
-  className="ColorPicker"
+  className="color-picker"
 >
-  <div
-    className="EnclosingCircle"
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(246, 178, 2, 1)"
     key="rgba(246, 178, 2, 1)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(246, 178, 2, 1)",
@@ -150,15 +157,16 @@ exports[`<ColorPickerPill/> should render outlined dot if provided in props 1`]
         }
       }
     />
-  </div>
-  <div
-    className="EnclosingCircle"
+  </button>
+  <button
+    className="enclosing-circle"
     data-testid="colorDot rgba(255, 255, 255, 1)"
     key="rgba(255, 255, 255, 1)"
     onClick={[Function]}
+    tabIndex={0}
   >
     <div
-      className="ColorDot"
+      className="color-dot"
       style={
         Object {
           "background": "rgba(255, 255, 255, 1)",
@@ -169,6 +177,6 @@ exports[`<ColorPickerPill/> should render outlined dot if provided in props 1`]
         }
       }
     />
-  </div>
+  </button>
 </div>
 `;
diff --git a/spec/__snapshots__/snippingTool.spec.tsx.snap b/spec/__snapshots__/snippingTool.spec.tsx.snap
index 6658bcbe..824a19fe 100644
--- a/spec/__snapshots__/snippingTool.spec.tsx.snap
+++ b/spec/__snapshots__/snippingTool.spec.tsx.snap
@@ -2,15 +2,15 @@
 
 exports[`Snipping Tool should render correctly 1`] = `
 <div
-  className="SnippingTool"
+  className="snipping-tool"
   lang="en-US"
 >
   <header>
     <div
-      className="DrawActions"
+      className="draw-actions"
     >
       <button
-        className="ActionButton"
+        className="action-button"
         data-testid="pen-button"
         onClick={[Function]}
         style={
@@ -25,7 +25,7 @@ exports[`Snipping Tool should render correctly 1`] = `
         />
       </button>
       <button
-        className="ActionButton"
+        className="action-button"
         data-testid="highlight-button"
         onClick={[Function]}
         title="Highlight"
@@ -35,7 +35,7 @@ exports[`Snipping Tool should render correctly 1`] = `
         />
       </button>
       <button
-        className="ActionButton"
+        className="action-button"
         data-testid="erase-button"
         onClick={[Function]}
         title="Erase"
@@ -46,10 +46,10 @@ exports[`Snipping Tool should render correctly 1`] = `
       </button>
     </div>
     <div
-      className="ClearActions"
+      className="clear-actions"
     >
       <button
-        className="ClearButton"
+        className="clear-button"
         data-testid="clear-button"
         onClick={[Function]}
       >
@@ -59,7 +59,7 @@ exports[`Snipping Tool should render correctly 1`] = `
   </header>
   <main>
     <div
-      className="imageContainer"
+      className="image-container"
     >
       <AnnotateArea
         annotateAreaDimensions={
@@ -71,7 +71,7 @@ exports[`Snipping Tool should render correctly 1`] = `
         backgroundImagePath=""
         chosenTool="PEN"
         data-testid="annotate-component"
-        highlightColor="rgba(0, 142, 255, 0.64)"
+        highlightColor="rgba(0,  142,  255, 0.3"
         imageDimensions={
           Object {
             "height": 600,
@@ -86,7 +86,7 @@ exports[`Snipping Tool should render correctly 1`] = `
   </main>
   <footer>
     <button
-      className="DoneButton"
+      className="done-button"
       data-testid="done-button"
       onClick={[Function]}
     >