Merge branch 'main' into add-highlight-color-to-search-highlight-aria…

…-labels
openstax · Jan 8, 2024 · c657567 · c657567
2 parents c60b61e + 3ff6fb9
commit c657567
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 6 deletions.
diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -569,6 +569,7 @@ Array [
 @media screen {
   .c2 .highlight.yellow.focus {
     background-color: #fed200;
+    border-bottom: 0.2rem solid #8f7700;
   }
 
   .c2 .highlight.yellow.focus.block:after {
@@ -583,6 +584,7 @@ Array [
 @media screen {
   .c2 .highlight.green.focus {
     background-color: #92d101;
+    border-bottom: 0.2rem solid #4e6f01;
   }
 
   .c2 .highlight.green.focus.block:after {
@@ -597,6 +599,7 @@ Array [
 @media screen {
   .c2 .highlight.blue.focus {
     background-color: #00c3ed;
+    border-bottom: 0.2rem solid #006880;
   }
 
   .c2 .highlight.blue.focus.block:after {
@@ -611,6 +614,7 @@ Array [
 @media screen {
   .c2 .highlight.purple.focus {
     background-color: #545ec8;
+    border-bottom: 0.2rem solid #141a3e;
     color: #fff;
   }
 
@@ -626,6 +630,7 @@ Array [
 @media screen {
   .c2 .highlight.pink.focus {
     background-color: #de017e;
+    border-bottom: 0.2rem solid #560131;
     color: #fff;
   }
 

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
@@ -111,6 +111,7 @@ export default styled(MainContent)`
       @media screen {
         &.focus {
           background-color: ${style.focused};
+          border-bottom: 0.2rem solid ${style.focusBorder};
 
           ${Color(style.focused).isDark() && css`
             color: ${theme.color.text.white};

diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2209,6 +2209,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.yellow.focus {
     background-color: #fed200;
+    border-bottom: 0.2rem solid #8f7700;
   }
 
   .c77 .highlight.yellow.focus.block:after {
@@ -2223,6 +2224,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.green.focus {
     background-color: #92d101;
+    border-bottom: 0.2rem solid #4e6f01;
   }
 
   .c77 .highlight.green.focus.block:after {
@@ -2237,6 +2239,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.blue.focus {
     background-color: #00c3ed;
+    border-bottom: 0.2rem solid #006880;
   }
 
   .c77 .highlight.blue.focus.block:after {
@@ -2251,6 +2254,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.purple.focus {
     background-color: #545ec8;
+    border-bottom: 0.2rem solid #141a3e;
     color: #fff;
   }
 
@@ -2266,6 +2270,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.pink.focus {
     background-color: #de017e;
+    border-bottom: 0.2rem solid #560131;
     color: #fff;
   }
 
@@ -6707,6 +6712,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.yellow.focus {
     background-color: #fed200;
+    border-bottom: 0.2rem solid #8f7700;
   }
 
   .c77 .highlight.yellow.focus.block:after {
@@ -6721,6 +6727,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.green.focus {
     background-color: #92d101;
+    border-bottom: 0.2rem solid #4e6f01;
   }
 
   .c77 .highlight.green.focus.block:after {
@@ -6735,6 +6742,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.blue.focus {
     background-color: #00c3ed;
+    border-bottom: 0.2rem solid #006880;
   }
 
   .c77 .highlight.blue.focus.block:after {
@@ -6749,6 +6757,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.purple.focus {
     background-color: #545ec8;
+    border-bottom: 0.2rem solid #141a3e;
     color: #fff;
   }
 
@@ -6764,6 +6773,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.pink.focus {
     background-color: #de017e;
+    border-bottom: 0.2rem solid #560131;
     color: #fff;
   }
 

diff --git a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
@@ -511,6 +511,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#8f7700",
             "focused": "#fed200",
             "label": "yellow",
             "passive": "#ffff8a",
@@ -571,6 +572,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#4e6f01",
             "focused": "#92d101",
             "label": "green",
             "passive": "#def99f",
@@ -631,6 +633,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#006880",
             "focused": "#00c3ed",
             "label": "blue",
             "passive": "#c8f5ff",
@@ -691,6 +694,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#141a3e",
             "focused": "#545ec8",
             "label": "purple",
             "passive": "#cbcfff",
@@ -751,6 +755,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#560131",
             "focused": "#de017e",
             "label": "pink",
             "passive": "#ffc5e1",

diff --git a/src/app/content/components/popUp/__snapshots__/Filters.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/Filters.spec.tsx.snap
@@ -1061,26 +1061,31 @@ exports[`Filters matches snapshot when open color filters 1`] = `
         styles={
           Array [
             Object {
+              "focusBorder": "#8f7700",
               "focused": "#fed200",
               "label": "yellow",
               "passive": "#ffff8a",
             },
             Object {
+              "focusBorder": "#4e6f01",
               "focused": "#92d101",
               "label": "green",
               "passive": "#def99f",
             },
             Object {
+              "focusBorder": "#006880",
               "focused": "#00c3ed",
               "label": "blue",
               "passive": "#c8f5ff",
             },
             Object {
+              "focusBorder": "#141a3e",
               "focused": "#545ec8",
               "label": "purple",
               "passive": "#cbcfff",
             },
             Object {
+              "focusBorder": "#560131",
               "focused": "#de017e",
               "label": "pink",
               "passive": "#ffc5e1",

diff --git a/src/app/content/constants.ts b/src/app/content/constants.ts
@@ -14,12 +14,42 @@ export const modalQueryParameterName = 'modal';
 export const colorFilterQueryParameterName = 'colors';
 export const locationIdsFilterQueryParameterName = 'locationIds';
 
-export const highlightStyles: Array<{label: HighlightColorEnum, passive: string, focused: string}> = [
-  {label: HighlightColorEnum.Yellow, passive: '#ffff8a', focused: '#fed200'},
-  {label: HighlightColorEnum.Green, passive: '#def99f', focused: '#92d101'},
-  {label: HighlightColorEnum.Blue, passive: '#c8f5ff', focused: '#00c3ed'},
-  {label: HighlightColorEnum.Purple, passive: '#cbcfff', focused: '#545ec8'},
-  {label: HighlightColorEnum.Pink, passive: '#ffc5e1', focused: '#de017e'},
+export const highlightStyles: Array<{
+  label: HighlightColorEnum;
+  passive: string;
+  focused: string;
+  focusBorder: string;
+}> = [
+  {
+    label: HighlightColorEnum.Yellow,
+    passive: '#ffff8a',
+    focused: '#fed200',
+    focusBorder: '#8f7700',
+  },
+  {
+    label: HighlightColorEnum.Green,
+    passive: '#def99f',
+    focused: '#92d101',
+    focusBorder: '#4e6f01',
+  },
+  {
+    label: HighlightColorEnum.Blue,
+    passive: '#c8f5ff',
+    focused: '#00c3ed',
+    focusBorder: '#006880',
+  },
+  {
+    label: HighlightColorEnum.Purple,
+    passive: '#cbcfff',
+    focused: '#545ec8',
+    focusBorder: '#141a3e',
+  },
+  {
+    label: HighlightColorEnum.Pink,
+    passive: '#ffc5e1',
+    focused: '#de017e',
+    focusBorder: '#560131',
+  },
 ];
 
 export type TextResizerValue = -2 | -1 | 0 | 1 | 2 | 3;

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
@@ -600,6 +600,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#8f7700",
               "focused": "#fed200",
               "label": "yellow",
               "passive": "#ffff8a",
@@ -631,6 +632,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#8f7700",
                 "focused": "#fed200",
                 "label": "yellow",
                 "passive": "#ffff8a",
@@ -646,6 +648,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#4e6f01",
               "focused": "#92d101",
               "label": "green",
               "passive": "#def99f",
@@ -677,6 +680,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#4e6f01",
                 "focused": "#92d101",
                 "label": "green",
                 "passive": "#def99f",
@@ -692,6 +696,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#006880",
               "focused": "#00c3ed",
               "label": "blue",
               "passive": "#c8f5ff",
@@ -723,6 +728,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#006880",
                 "focused": "#00c3ed",
                 "label": "blue",
                 "passive": "#c8f5ff",
@@ -738,6 +744,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#141a3e",
               "focused": "#545ec8",
               "label": "purple",
               "passive": "#cbcfff",
@@ -769,6 +776,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#141a3e",
                 "focused": "#545ec8",
                 "label": "purple",
                 "passive": "#cbcfff",
@@ -784,6 +792,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#560131",
               "focused": "#de017e",
               "label": "pink",
               "passive": "#ffc5e1",
@@ -815,6 +824,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#560131",
                 "focused": "#de017e",
                 "label": "pink",
                 "passive": "#ffc5e1",

diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
@@ -952,6 +952,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#8f7700",
                   "focused": "#fed200",
                   "label": "yellow",
                   "passive": "#ffff8a",
@@ -1012,6 +1013,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#4e6f01",
                   "focused": "#92d101",
                   "label": "green",
                   "passive": "#def99f",
@@ -1072,6 +1074,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#006880",
                   "focused": "#00c3ed",
                   "label": "blue",
                   "passive": "#c8f5ff",
@@ -1132,6 +1135,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#141a3e",
                   "focused": "#545ec8",
                   "label": "purple",
                   "passive": "#cbcfff",
@@ -1192,6 +1196,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#560131",
                   "focused": "#de017e",
                   "label": "pink",
                   "passive": "#ffc5e1",

diff --git a/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
@@ -85,6 +85,7 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
     className="c4 c5"
     style={
       Object {
+        "focusBorder": "#8f7700",
         "focused": "#fed200",
         "label": "yellow",
         "passive": "#ffff8a",
@@ -168,6 +169,7 @@ exports[`ColorIndicator matches snapshot 1`] = `
     className="c4 c5"
     style={
       Object {
+        "focusBorder": "#8f7700",
         "focused": "#fed200",
         "label": "yellow",
         "passive": "#ffff8a",