Keyboard
The keyboard conventions CoreUI for React components share, and an index of each component's keyboard table.
Interactive components are built to be operated with the keyboard alone. The components follow the keyboard models of the ARIA Authoring Practices Guide, so a user who knows how a native control or another accessible widget behaves can predict how ours behave.
Conventions
| Key | Action |
|---|---|
| Tab / Shift + Tab | Move to the next or previous component. A composite component, such as tabs, a chip set, a list box or a calendar grid, is a single stop; the arrow keys move inside it. |
| Arrow keys | Move between the items of a composite component: tabs, options, chips, days. In an open menu, move focus to the items and between them. |
| Home / End | Move to the first or last item, where the component has a list of them. |
| Enter / Space | Activate the focused button, link or item, select an option, or open a popup. |
| Escape | Close the open menu, picker panel, tooltip, popover or dialog. Dropdowns, pickers and dialogs return focus to the element that opened them. |
Where a component differs, its own keyboard table says so.
Focus in dialogs
A modal dialog, such as the modal or the offcanvas, moves focus inside when it opens and keeps Tab inside while it is open. When it closes, focus returns to the element that opened it. An offcanvas opened with backdrop: false and scroll: true is not modal: Tab moves on to the page.
Visible focus
The element that has focus always shows it. Buttons and other controls you click to act show the focus ring only for keyboard focus, so a mouse click does not leave one behind; fields you type into show it on any focus. See color contrast for its contrast.
Component keyboard tables
These components document their own keys: