Use <Keyboard> and <SlotProvider> to get kbd styles

Author: devongovett

packages/@react-aria/breadcrumbs/docs/useBreadcrumbs.mdx

@@ -12,6 +12,7 @@ export default Layout;
 
 import docs from 'docs:@react-aria/breadcrumbs';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/breadcrumbs/package.json';
 import Anatomy from './anatomy.svg';
 
@@ -58,7 +59,7 @@ Breadcrumbs provide a list of links to parent pages of the current page in hiera
 Breadcrumbs consist of a navigation landmark element and a list of links, typically with a visual separator
 icon between each item. The last link represents the current page in the hierarchy, with the previous links representing the
 parent pages of the current page. Each of these parent links can be clicked, tapped, or
-triggered via the <kbd>Enter</kbd> key to navigate to that page. Optionally, breadcrumbs can be used
+triggered via the <Keyboard>Enter</Keyboard> key to navigate to that page. Optionally, breadcrumbs can be used
 in place of a page title, in which case the last breadcrumb acts as a heading.
 
 `useBreadcrumbs` returns props to be spread onto the navigation element:

packages/@react-aria/button/docs/useButton.mdx

@@ -12,6 +12,7 @@ export default Layout;
 
 import docs from 'docs:@react-aria/button';
 import {HeaderInfo, FunctionAPI} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/button/package.json';
 
 ```jsx import
@@ -49,13 +50,13 @@ cross browser inconsistencies in interactions and accessibility features to cons
 * `<a>` and custom element type support via ARIA
 * Mouse and touch event handling, and press state management
 * Keyboard focus management and cross browser normalization
-* Keyboard event support for <kbd>Space</kbd> and <kbd>Enter</kbd> keys
+* Keyboard event support for <Keyboard>Space</Keyboard> and <Keyboard>Enter</Keyboard> keys
 
 ## Anatomy
 
 Buttons consist of a clickable area usually containing a textual label or an icon
 that users can click to perform an action. In addition, keyboard users may activate
-buttons using the <kbd>Space</kbd> or <kbd>Enter</kbd> keys.
+buttons using the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys.
 
 If a visual label is not provided (e.g. an icon only button), then an `aria-label` or
 `aria-labelledby` prop must be passed to identify the button to assistive technology.

packages/@react-aria/button/docs/useToggleButton.mdx

@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-aria/button';
 import statelyDocs from 'docs:@react-stately/toggle';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/button/package.json';
 
 ```jsx import
@@ -50,13 +51,13 @@ represents a toggle button, so React Aria implements it using ARIA attributes.
 * Exposed as a toggle button via ARIA
 * Mouse and touch event handling, and press state management
 * Keyboard focus management and cross browser normalization
-* Keyboard event support for <kbd>Space</kbd> and <kbd>Enter</kbd> keys
+* Keyboard event support for <Keyboard>Space</Keyboard> and <Keyboard>Enter</Keyboard> keys
 
 ## Anatomy
 
 Toggle buttons consist of a clickable area usually containing a textual label or an icon
 that users can click to toggle a selection state. In addition, keyboard users may toggle
-the state using the <kbd>Space</kbd> or <kbd>Enter</kbd> keys.
+the state using the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys.
 
 `useToggleButton` returns props to be spread onto the button element, along with a boolean indicating
 whether the user is currently pressing the button:

packages/@react-aria/checkbox/docs/useCheckbox.mdx

@@ -15,6 +15,7 @@ import hiddenDocs from 'docs:@react-aria/visually-hidden';
 import focusDocs from 'docs:@react-aria/focus';
 import statelyDocs from 'docs:@react-stately/toggle';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/checkbox/package.json';
 import Anatomy from './checkbox-anatomy.svg';
 
@@ -61,7 +62,7 @@ that can be styled as needed.
 
 A checkbox consists of a visual selection indicator and a label. Checkboxes support three
 selection states: checked, unchecked, and indeterminate. Users may click or touch a checkbox
-to toggle the selection state, or use the <kbd>Tab</kbd> key to navigate to it and the <kbd>Space</kbd> key to toggle it.
+to toggle the selection state, or use the <Keyboard>Tab</Keyboard> key to navigate to it and the <Keyboard>Space</Keyboard> key to toggle it.
 
 `useCheckbox` returns props to be spread onto its input element:
 

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -15,6 +15,7 @@ import hiddenDocs from 'docs:@react-aria/visually-hidden';
 import focusDocs from 'docs:@react-aria/focus';
 import statelyDocs from 'docs:@react-stately/checkbox';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/checkbox/package.json';
 import Anatomy from './checkboxgroup-anatomy.svg';
 
@@ -66,8 +67,8 @@ checkbox groups that can be styled as needed.
 A checkbox group consists of a set of checkboxes, and a label. Each checkbox
 includes a label and a visual selection indicator. Zero or more checkboxes
 within the group can be selected at a time. Users may click or touch a checkbox
-to select it, or use the <kbd>Tab</kbd> key to navigate to it
-and the <kbd>Space</kbd> key to toggle it.
+to select it, or use the <Keyboard>Tab</Keyboard> key to navigate to it
+and the <Keyboard>Space</Keyboard> key to toggle it.
 
 `useCheckboxGroup` returns props for the group and its label, which you should spread
 onto the appropriate element:

packages/@react-aria/dialog/docs/useDialog.mdx

@@ -14,6 +14,7 @@ import docs from 'docs:@react-aria/dialog';
 import overlaysDocs from 'docs:@react-aria/overlays';
 import focusDocs from 'docs:@react-aria/focus';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/dialog/package.json';
 import Anatomy from './anatomy.svg';
 
@@ -51,7 +52,7 @@ helps achieve accessible dialogs that can be styled as needed.
 * Contains focus inside the dialog when combined with &lt;<TypeLink links={focusDocs.links} type={focusDocs.exports.FocusScope} />&gt;
 * Hides content behind the dialog from screen readers when combined with <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.useModal} />
 * Prevents scrolling the page behind the dialog when combined with <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.usePreventScroll} />
-* Handles closing the dialog when interacting outside and pressing the <kbd>Escape</kbd> key, when combined with <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.useOverlay} />
+* Handles closing the dialog when interacting outside and pressing the <Keyboard>Escape</Keyboard> key, when combined with <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.useOverlay} />
 
 ## Anatomy
 
@@ -81,7 +82,7 @@ and hides content outside the dialog
 with <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.useModal} />.
 
 The modal can be closed by clicking or interacting outside the dialog if the `isDismissable`
-prop is set to true, or by pressing the <kbd>Escape</kbd> key.
+prop is set to true, or by pressing the <Keyboard>Escape</Keyboard> key.
 This is handled by <TypeLink links={overlaysDocs.links} type={overlaysDocs.exports.useOverlay} />.
 
 Focus is contained within the dialog while it is open using a

packages/@react-aria/focus/docs/FocusScope.mdx

@@ -12,6 +12,7 @@ export default Layout;
 
 import docs from 'docs:@react-aria/focus';
 import {HeaderInfo, PropTable, FunctionAPI, TypeLink, ClassAPI} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/focus/package.json';
 
 ```tsx import
@@ -61,7 +62,7 @@ from a component within the FocusScope. A focus manager supports the following m
 
 A basic example of a focus scope that contains focus within it is below. Clicking the "Open"
 button mounts a FocusScope, which auto focuses the first input inside it. Once open, you can
-press the <kbd>Tab</kbd> key to move within the scope, but focus is contained inside. Clicking the "Close"
+press the <Keyboard>Tab</Keyboard> key to move within the scope, but focus is contained inside. Clicking the "Close"
 button unmounts the focus scope, which restores focus back to the button.
 
 For a full example of building a modal dialog, see [useDialog](useDialog.html).

packages/@react-aria/interactions/docs/interactions.mdx

@@ -11,6 +11,7 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import {HeaderInfo, PropTable, TypeLink} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 
 ---
 category: Concepts
@@ -73,10 +74,10 @@ Keyboard and focus support is important to allow users to navigate your app with
 who are unable to physically use a mouse or touch screen, but also nice for power users who may find it faster to navigate
 parts of your app without lifting their hands from the keyboard.
 
-At a high level, keyboard navigation is broken up into **tab stops**, which may be navigated by pressing the <kbd>Tab</kbd> key to
-move to the next tab stop, and <kbd>Shift</kbd> + <kbd>Tab</kbd> to move to the previous tab stop. A tab stop may be an atomic
+At a high level, keyboard navigation is broken up into **tab stops**, which may be navigated by pressing the <Keyboard>Tab</Keyboard> key to
+move to the next tab stop, and <Keyboard>Shift</Keyboard> + <Keyboard>Tab</Keyboard> to move to the previous tab stop. A tab stop may be an atomic
 component like a text field or button, or a composite component like a listbox, radio group, grid, or toolbar. Composite components
-behave as a single tab stop. Elements within a composite component are typically navigated with the arrow keys, while the <kbd>Tab</kbd>
+behave as a single tab stop. Elements within a composite component are typically navigated with the arrow keys, while the <Keyboard>Tab</Keyboard>
 key continues to navigate to the next/previous tab stop. React Aria implements hooks for many of these composite components and handles
 all of the keyboard navigation behavior for elements inside them.
 

packages/@react-aria/interactions/docs/usePress.mdx

@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-aria/interactions';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/interactions/package.json';
 
 ```jsx import
@@ -44,7 +45,7 @@ start again if the pointer re-enters the target. `usePress` returns the current
 the visual appearance of the target. If the pointer is released over the target, then an `onPress` event is fired.
 
 * Handles mouse and touch events
-* Handles <kbd>Enter</kbd> or <kbd>Space</kbd> key presses
+* Handles <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> key presses
 * Handles screen reader virtual clicks
 * Uses pointer events where available, with fallbacks to mouse and touch events
 * Normalizes focus behavior on mouse and touch interactions across browsers
@@ -80,7 +81,7 @@ type of event that triggered the interaction.
 This example shows a simple target that handles press events with `usePress` and logs them to a list below.
 It also uses the `isPressed` state to adjust the background color when the target is pressed.
 Press down on the target and drag your pointer off and over to see when the events are fired, and try focusing
-the target with a keyboard and pressing the <kbd>Enter</kbd> or <kbd>Space</kbd> keys to trigger events as well.
+the target with a keyboard and pressing the <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> keys to trigger events as well.
 
 **NOTE: for more advanced button functionality, see [useButton](useButton.html).**
 

packages/@react-aria/link/docs/useLink.mdx

@@ -12,6 +12,7 @@ export default Layout;
 
 import docs from 'docs:@react-aria/link';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs';
+import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/link/package.json';
 
 ```jsx import
@@ -53,7 +54,7 @@ handled client side with JavaScript instead, it will not be exposed to assistive
 
 A link consists of a pressable area usually containing a textual label or an icon
 that users can click or tap to navigate to another page or resource. In addition,
-keyboard users may activate links using the <kbd>Enter</kbd> key.
+keyboard users may activate links using the <Keyboard>Enter</Keyboard> key.
 
 `useLink` returns props to be spread onto the link element: