Merge pull request #2037 from cfpb/ans_default_offset

Adjust focus rectangle offset for default links, expandables, summaries
cfpb · Sep 6, 2024 · ae4a124 · ae4a124
2 parents 62179e8 + 3ed54e6
commit ae4a124
Show file tree

Hide file tree

Showing 19 changed files with 25 additions and 24 deletions.
diff --git a/packages/cfpb-design-system/dist/base/index.css b/packages/cfpb-design-system/dist/base/index.css
diff --git a/packages/cfpb-design-system/dist/base/index.css.map b/packages/cfpb-design-system/dist/base/index.css.map
diff --git a/packages/cfpb-design-system/dist/base/index.js.map b/packages/cfpb-design-system/dist/base/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map
diff --git a/packages/cfpb-design-system/dist/index.css b/packages/cfpb-design-system/dist/index.css
diff --git a/packages/cfpb-design-system/dist/index.css.map b/packages/cfpb-design-system/dist/index.css.map
diff --git a/packages/cfpb-design-system/dist/index.js.map b/packages/cfpb-design-system/dist/index.js.map
diff --git a/packages/cfpb-design-system/dist/utilities/index.css b/packages/cfpb-design-system/dist/utilities/index.css
diff --git a/packages/cfpb-design-system/dist/utilities/index.css.map b/packages/cfpb-design-system/dist/utilities/index.css.map
diff --git a/packages/cfpb-design-system/dist/utilities/index.js.map b/packages/cfpb-design-system/dist/utilities/index.js.map
diff --git a/packages/cfpb-design-system/src/base/base.scss b/packages/cfpb-design-system/src/base/base.scss
@@ -151,6 +151,7 @@ a {
   &.focus {
     border-style: solid;
     outline: thin dotted;
+    outline-offset: 1px;
   }
 
   &:active,

diff --git a/packages/cfpb-design-system/src/components/cfpb-expandables/expandable.scss b/packages/cfpb-design-system/src/components/cfpb-expandables/expandable.scss
@@ -30,7 +30,7 @@
 
     &:focus {
       outline: 1px dotted var(--black);
-      outline-offset: 1px;
+      outline-offset: 2px;
     }
 
     .o-expandable__cue-close,

diff --git a/packages/cfpb-design-system/src/components/cfpb-expandables/summary-minimal.scss b/packages/cfpb-design-system/src/components/cfpb-expandables/summary-minimal.scss
@@ -22,7 +22,7 @@
 
     &:focus {
       outline: 1px dotted var(--pacific);
-      outline-offset: 2px;
+      outline-offset: 1px;
     }
 
     .o-summary-minimal__cue-close,

diff --git a/packages/cfpb-design-system/src/components/cfpb-expandables/summary.scss b/packages/cfpb-design-system/src/components/cfpb-expandables/summary.scss
@@ -28,7 +28,7 @@
 
     &:focus {
       outline: 1px dotted var(--pacific);
-      outline-offset: 2px;
+      outline-offset: 1px;
     }
 
     &[aria-expanded='false']::before {
@@ -42,7 +42,7 @@
       right: 0;
 
       // 4px is needed because the 2px movement of the content's bounding box.
-      top: calc(-100% + 4px);
+      top: calc(-100% + 2px);
       background: linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0%) 0%,