From cdc76c4e9e797b81524cc7eb9a05d3a59e148b1b Mon Sep 17 00:00:00 2001
From: simurai <simurai@github.com>
Date: Mon, 27 Feb 2023 22:08:10 +0900
Subject: [PATCH] Add `Show on focus` utility

---
 content/foundations/css-utilities/layout.mdx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/content/foundations/css-utilities/layout.mdx b/content/foundations/css-utilities/layout.mdx
index db21afbf3..3aafe4a0f 100644
--- a/content/foundations/css-utilities/layout.mdx
+++ b/content/foundations/css-utilities/layout.mdx
@@ -195,12 +195,18 @@ Position utilities can be applied or changed per breakpoint in responsive layout
 
 <StorybookEmbed framework="css" stories={[{id: 'utilities-layout--position-responsive'}]} height="100" />
 
-### Screen reader only
+## Screen reader only
 
 Use `.sr-only` to position an element outside of the viewport for screen reader access only. **Even though the element can't be seen, make sure it still has a sensible tab order.**
 
 <StorybookEmbed framework="css" stories={[{id: 'utilities-layout--screen-reader-only'}]} height="100" />
 
+## Show on focus
+
+Use `.show-on-focus` to visually hide an element and only show it when focused. This utility can be used to provide additional functionality for keyboard users.
+
+<StorybookEmbed framework="css" stories={[{id: 'utilities-layout--show-on-focus'}]} height="100" />
+
 ## The media object
 
 Create a media object with utilities.