Merge branch 'main' into use-toast-for-confirmation-messages

src/app/components/Button.tsx

@@ -82,6 +82,11 @@ const Button = styled(ButtonHoc)`
     border: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+
+    &:focus {
+      outline: solid ${theme.color.white};
+      box-shadow: inset 0 0 0 0.3rem ${theme.color.black};
+    }
   `}
   ${(props) => props.variant === 'secondary' && `
     ${applyColor(theme.color.secondary.lightGray)}

src/app/components/__snapshots__/Button.spec.tsx.snap

@@ -219,6 +219,11 @@ exports[`Button matches snapshot - primary 1`] = `
   background-color: ,#b03808,;
 }
 
+.c0:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 <button
   className="c0"
 />

src/app/content/components/__snapshots__/LabsCall.spec.tsx.snap

@@ -144,6 +144,11 @@ exports[`LabsCTA renders cta when selector is true 1`] = `
   background-color: ,#b03808,;
 }
 
+.c9:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 @media screen and (max-width:50em) {
   .c0 {
     background-position: center center;

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

@@ -88,6 +88,11 @@ exports[`HighlightDeleteWrapper match snapshot when editing is set to true 1`] =
   background-color: ,#b03808,;
 }
 
+.c3:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;

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

@@ -41,6 +41,11 @@ exports[`HighlightDeleteWrapper match snapshot 1`] = `
   background-color: ,#b03808,;
 }
 
+.c2:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;

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

@@ -40,6 +40,11 @@ exports[`Confirmation matches snapshot no selection 1`] = `
   background-color: ,#b03808,;
 }
 
+.c2:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;

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

@@ -41,6 +41,11 @@ exports[`ConfirmationModal matches snapshot 1`] = `
   background-color: ,#b03808,;
 }
 
+.c9:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c10 {
   display: -webkit-box;
   display: -webkit-flex;

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

@@ -40,6 +40,11 @@ exports[`EditCard matches snapshot when editing 1`] = `
   background-color: ,#b03808,;
 }
 
+.c3:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;

src/app/content/practiceQuestions/components/__snapshots__/EmptyScreen.spec.tsx.snap

@@ -40,6 +40,11 @@ exports[`EmptyScreen for practice questions renders properly and dispatches acti
   background-color: ,#b03808,;
 }
 
+.c7:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c2 {
   max-width: 38rem;
   overflow: initial;

src/app/content/practiceQuestions/components/__snapshots__/FinalScreen.spec.tsx.snap

@@ -40,6 +40,11 @@ exports[`FinalScreen for practice questions renders properly and dispatches acti
   background-color: ,#b03808,;
 }
 
+.c9:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c2 {
   max-width: 38rem;
   overflow: initial;

src/app/content/practiceQuestions/components/__snapshots__/IntroScreen.spec.tsx.snap

@@ -40,6 +40,11 @@ exports[`IntroScreen for practice questions renders properly for 1 question 1`]
   background-color: ,#b03808,;
 }
 
+.c3:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c0 {
   text-align: center;
 }
@@ -113,6 +118,11 @@ exports[`IntroScreen for practice questions renders properly for 2 questions 1`]
   background-color: ,#b03808,;
 }
 
+.c3:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c0 {
   text-align: center;
 }

src/app/errors/components/__snapshots__/ErrorModal.spec.tsx.snap

@@ -41,6 +41,11 @@ exports[`ErrorModal matches snapshot 1`] = `
   background-color: ,#b03808,;
 }
 
+.c10:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -369,6 +374,11 @@ exports[`ErrorModal matches snapshots with recorded error ids 1`] = `
   background-color: ,#b03808,;
 }
 
+.c11:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;

src/app/notifications/components/__snapshots__/Notifications.spec.tsx.snap

@@ -41,6 +41,11 @@ exports[`Notifications matches snapshot for acceptCookies 1`] = `
   background-color: ,#b03808,;
 }
 
+.c6:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c5 {
   display: grid;
   overflow: visible;
@@ -265,6 +270,11 @@ exports[`Notifications matches snapshot for appMessage 1`] = `
   background-color: ,#b03808,;
 }
 
+.c6:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c5 {
   display: grid;
   overflow: visible;
@@ -489,6 +499,11 @@ exports[`Notifications matches snapshot for retiredBookRedirect 1`] = `
   background-color: ,#b03808,;
 }
 
+.c6:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c5 {
   display: grid;
   overflow: visible;
@@ -715,6 +730,11 @@ exports[`Notifications matches snapshot for updateAvailable 1`] = `
   background-color: ,#b03808,;
 }
 
+.c6:focus {
+  outline: solid #fff;
+  box-shadow: inset 0 0 0 0.3rem #000;
+}
+
 .c5 {
   display: grid;
   overflow: visible;