Prevent .show-on-focus to change width/height (#2391)

* Update `.show-on-focus` to not reset width/height * Add `ShowOnFocus` story * Create .changeset/shy-pumpkins-walk.md
primer · Feb 28, 2023 · 95ab0d0 · 95ab0d0
1 parent 5dc4fea
commit 95ab0d0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/.changeset/shy-pumpkins-walk.md b/.changeset/shy-pumpkins-walk.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Prevent `.show-on-focus` to change width/height
diff --git a/docs/src/stories/utilities/Layout.stories.jsx b/docs/src/stories/utilities/Layout.stories.jsx
@@ -285,6 +285,13 @@ export const ScreenReaderOnly = ({}) => (
   </div>
 )
 
+export const ShowOnFocus = ({}) => (
+  <div>
+    <div class="mb-2">Click here and press tab to make the ".show-on-focus" element appear</div>
+    <button type="button" class="btn show-on-focus">.show-on-focus</button>
+  </div>
+)
+
 export const MediaObject = ({}) => (
   <div class="clearfix p-3 border">
     <div class="float-left p-3 mr-3 color-bg-subtle">

diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
@@ -107,17 +107,18 @@
 
 // Only display content on focus
 .show-on-focus {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+
+  &:not(:focus) {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    border: 0 !important;
+  }
 
   &:focus {
     z-index: 999;
-    width: auto;
-    height: auto;
-    clip: auto;
   }
 }