# ImageEditor Keyboard Navigation

The [ImageEditor](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview) provides keyboard navigation for its toolbar, sidebar, tool panes, and canvas. This article lists the default keyboard shortcuts. It extends the general information about [keyboard navigation in Telerik UI for Blazor](https://www.telerik.com/blazor-ui/documentation/accessibility/overview#keyboard-navigation).

The sidebar uses [roving focus](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). The tool pane is exposed as a labeled region. The canvas is focusable and exposed as an application when an image is loaded, and the canvas image has an accessible name.

## General Shortcuts

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Key Combination         | Description                                                                                                                   |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `Tab` / `Shift` + `Tab` | Moves focus through the focusable controls in the toolbar, the sidebar, the tool pane, and the canvas.                        |
| `Alt` + `W`             | Moves focus to the first available control in the toolbar when focus is inside the editor. On macOS, use `Option` + `W`.      |
| `Ctrl` + `O`            | Opens an image. This shortcut also works when no image is loaded.                                                             |
| `Ctrl` + `Z`            | Undoes the last edit.                                                                                                         |
| `Ctrl` + `Y`            | Redoes the last reverted edit.                                                                                                |
| `Ctrl` + `Shift` + `S`  | Opens the [Export Image dialog](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/export#export-dialog). |
| `Escape`                | Stops the text editing, closes the active tool pane, or clears the selected object.                                           |

## Zoom Shortcuts

| Key Combination                              | Description                            |
| -------------------------------------------- | -------------------------------------- |
| `Ctrl` + `+` / `Ctrl` + `=` / `Ctrl` + `Add` | Zooms in.                              |
| `Ctrl` + `-` / `Ctrl` + `Subtract`           | Zooms out.                             |
| `Shift` + `1`                                | Fits the image to the screen.          |
| `Shift` + `0`                                | Displays the image at its actual size. |

## Sidebar and Tool Pane Shortcuts

| Key Combination   | Description                                      |
| ----------------- | ------------------------------------------------ |
| `Arrow` keys      | Move focus between the tools in the sidebar.     |
| `Home` / `End`    | Focus the first or the last tool in the sidebar. |
| `Enter` / `Space` | Activate the focused sidebar tool.               |
| `Ctrl` + `F3`     | Moves focus to the active tool pane.             |

## Object Shortcuts

The following shortcuts apply to the [objects on the canvas](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#objects).

| Key Combination | Description                                                                                    |
| --------------- | ---------------------------------------------------------------------------------------------- |
| `R`             | Inserts a rectangle.                                                                           |
| `O`             | Inserts an ellipse.                                                                            |
| `L`             | Inserts a line.                                                                                |
| `T`             | Inserts a text box.                                                                            |
| `Arrow` keys    | Nudge the selected object.                                                                     |
| `Ctrl` + `D`    | Duplicates the selected object.                                                                |
| `Delete`        | Deletes the selected object. The component requests confirmation before it deletes the object. |

## Text Formatting Shortcuts

The following shortcuts apply when editable text is active or selected.

| Key Combination        | Description                   |
| ---------------------- | ----------------------------- |
| `Ctrl` + `B`           | Applies bold formatting.      |
| `Ctrl` + `I`           | Applies italic formatting.    |
| `Ctrl` + `U`           | Applies underline formatting. |
| `Ctrl` + `Shift` + `L` | Aligns the text to the left.  |
| `Ctrl` + `Shift` + `E` | Centers the text.             |
| `Ctrl` + `Shift` + `R` | Aligns the text to the right. |

## Notes

* On macOS, the `Command` key replaces `Ctrl` for the command shortcuts.
* While the text editor has focus, the component handles the text formatting shortcuts and `Escape`, but not the other editor shortcuts.
* `Backspace` does not delete the selected object.

## See Also

* [Live Demo: ImageEditor](https://demos.telerik.com/blazor-ui/imageeditor/overview)
* [ImageEditor API Reference](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.telerikimageeditor)
* [Accessibility in Telerik UI for Blazor](https://www.telerik.com/blazor-ui/documentation/accessibility/overview)