make focus outlines a bit more visible

mitodl · Feb 24, 2025 · ef55f4a · ef55f4a
1 parent 52c71f2
commit ef55f4a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx
@@ -171,6 +171,10 @@ const TabsContainer = styled(TabList)(({ theme }) => ({
   a: {
     padding: "0",
     opacity: "1",
+
+    "&:focus-visible": {
+      outlineOffset: "-1px",
+    },
   },
   "&:hover": {
     a: {

diff --git a/frontends/ol-components/src/components/Checkbox/Checkbox.tsx b/frontends/ol-components/src/components/Checkbox/Checkbox.tsx
@@ -64,6 +64,11 @@ const Container = styled.div`
   && input[type="checkbox"] {
     margin: 0;
     margin-right: 4px;
+
+    /* Help avoid focus outline from being cutoff  */
+    :focus-visible {
+      outline-offset: -1px;
+    }
   }
 
   ${containerStyles}