Add z-index so MH ColorIndicator focus outline is visible

Author: RoyEJohnson

src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap

@@ -298,6 +298,7 @@ input:checked + .c8 .c10 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c20 {
@@ -331,6 +332,7 @@ input:checked + .c8 .c10 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c23 {
@@ -364,6 +366,7 @@ input:checked + .c8 .c10 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c25 {
@@ -397,6 +400,7 @@ input:checked + .c8 .c10 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c27 {
@@ -430,6 +434,7 @@ input:checked + .c8 .c10 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c19 {

src/app/content/highlights/components/ColorIndicator.tsx

@@ -110,6 +110,7 @@ const ColorIndicator = styled(Hoc)`
   input:focus + ${FocusedStyle} {
     display: block;
     ${defaultFocusOutline}
+    z-index: 1;
   }
 `;
 

src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap

@@ -256,6 +256,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c23 {
@@ -289,6 +290,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c25 {
@@ -326,6 +328,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c27 {
@@ -359,6 +362,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c29 {
@@ -392,6 +396,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c17 {

src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap

@@ -279,6 +279,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c32 {
@@ -312,6 +313,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c34 {
@@ -345,6 +347,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c36 {
@@ -378,6 +381,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c38 {
@@ -411,6 +415,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c48 {

src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap

@@ -49,6 +49,7 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c0 {
@@ -86,6 +87,7 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 <div
@@ -200,6 +202,7 @@ exports[`ColorIndicator matches snapshot 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 <div

src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap

@@ -127,6 +127,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c9 {
@@ -160,6 +161,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c11 {
@@ -193,6 +195,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c13 {
@@ -226,6 +229,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c15 {
@@ -259,6 +263,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c2 {

src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap

@@ -371,6 +371,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c35 {
@@ -404,6 +405,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c37 {
@@ -437,6 +439,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c39 {
@@ -470,6 +473,7 @@ input:checked + .c21 .c22 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c10 {