Add default focus style to styled Checkbox (#2099)

* Add default focus style to styled Checkbox For: openstax/unified#2713 * update snaps * Indent style * Comment to explain defaultFocusOutline
openstax · Jan 10, 2024 · 9a33b54 · 9a33b54
1 parent ef6f665
commit 9a33b54
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 0 deletions.
diff --git a/src/app/components/Checkbox.tsx b/src/app/components/Checkbox.tsx
@@ -48,6 +48,14 @@ const Checkbox = ({children, className, ...props}: React.PropsWithChildren<Props
   {children}
 </label>;
 
+// Browser default outline for focus items per
+// tslint:disable-next-line:max-line-length
+// https://stackoverflow.com/questions/20609485/what-is-the-default-style-of-the-blue-focus-outline-in-chrome/38498539#38498539
+const defaultFocusOutline = `
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
+`;
+
 export default styled(Checkbox)`
   cursor: pointer;
   display: flex;
@@ -67,6 +75,7 @@ export default styled(Checkbox)`
     &:focus-within {
       border-radius: 0.4rem;
       background-color: ${theme.color.neutral.pageBackground};
+      ${defaultFocusOutline}
 
       ${CustomCheckbox} {
         border: 1px solid ${theme.color.primary.orange.darkest};

diff --git a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
@@ -115,6 +115,8 @@ input:checked + .c10 .c12 {
 .c8:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
 }
 
 .c8:focus-within .c9 {
@@ -159,6 +161,8 @@ input:checked + .c10 .c12 {
 .c15:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
 }
 
 .c15:focus-within .c9 {

diff --git a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
@@ -115,6 +115,8 @@ input:checked + .c8 .c10 {
 .c6:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
 }
 
 .c6:focus-within .c7 {
@@ -159,6 +161,8 @@ input:checked + .c8 .c10 {
 .c21:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
 }
 
 .c21:focus-within .c7 {

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
@@ -69,6 +69,8 @@ input:checked + .c21 .c22 {
 .c19:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
 }
 
 .c19:focus-within .c20 {

diff --git a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
@@ -72,6 +72,8 @@ input:checked + .c21 .c22 {
 .c19:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
 }
 
 .c19:focus-within .c20 {
@@ -113,6 +115,8 @@ input:checked + .c21 .c22 {
 .c25:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
+  outline: 0.1rem dotted #212121;
+  outline: 0.5rem auto -webkit-focus-ring-color;
 }
 
 .c25:focus-within .c20 {