diff --git a/src/app/components/Checkbox.tsx b/src/app/components/Checkbox.tsx index 08ac48a66b..4131a7ee05 100644 --- a/src/app/components/Checkbox.tsx +++ b/src/app/components/Checkbox.tsx @@ -48,6 +48,14 @@ const Checkbox = ({children, className, ...props}: React.PropsWithChildren; +// 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 index 99320524c2..929605d292 100644 --- 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 index db63417127..de16402fa7 100644 --- 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 index f9f6aee662..2899d6c0c8 100644 --- 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 index fccb046538..d6eb29e918 100644 --- 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 {