Add Show on focus utility

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.