## Managing the Focus


The FlatColorPicker is a single-tab-stop component. Its inner navigation is activated by pressing the `Enter` key. In that case the focus remains trapped within the component elements. The user returns to page navigation by pressing `Esc`.

## Keyboard Shortcuts

### When wrapper is focused

| Shortcut | Behavior |
| -------- | -------- |
| `Enter` | Activates inner FlatColorPicker navigation. |
| `Tab` | Navigates to the next focusable element on the page. |
| `Shift` + `Tab` | Navigates to the previous focusable element on the page. |

### When inner navigation is activated

| Shortcut | Behavior |
| -------- | -------- |
| `Esc` | Moves focus back to wrapper element. Deactivates inner FlatColorPicker navigation. |
| `Tab` | Navigates to the next focusable element in the FlatColorPicker. If current focus is on the last element, moves focus to the first focusable item in the component. |
| `Shift` + `Tab` | Navigates to the previous focusable element in the FlatColorPicker. If current focus is on the first element, moves focus to the last focusable item in the component. |
| `Enter` | For button items, FlatColorPicker executes the currently focused button action. |

### Inner elements shortcuts


The inner elements implement the shortcuts for their component type. There are **ColorGradient**, **ColorPalette**, and **Button** elements. Note that the ColorGradient must expose directly its inner navigation when used in a FlatColorPicker (the wrapper must not be focusable itself).