New to Telerik UI for Blazor? Download Free 30-day trial

ImageEditor - Keyboard Navigation

  • Example
    View Source
Ready to create?
Upload a JPEG, PNG, or WebP image to unlock the full capabilities of ImageEditor.
Loading the demo source code...please wait.

Focus

  • Alt + W focuses the first component in the example

Supported keys and user actions

  • Alt / Option (Mac) + W Focuses the first focusable element in the Image Editor Toolbar.
  • Tab Focuses the next focusable item.
  • Shift + Tab Focuses the previous focusable item.
  • Enter Presses the focused button.
  • Space Presses the focused button.
  • Control / Command (Mac) + Z Undo the operation.
  • Control / Command (Mac) + Y Redo the operation.
  • Escape Deselect or cancel the operation.
  • Delete Deletes the selected element.
  • Control / Command (Mac) + Plus Zooms in on the image. Conflicts with browser zoom in all browsers; requires preventDefault when the component is focused.
  • Control / Command (Mac) + Minus Zooms out from the image. Conflicts with browser zoom out in all browsers; requires preventDefault when the component is focused.
  • Control / Command (Mac) + O Opens the image browser to import a new image. Conflicts with the Open File dialog in all browsers; requires preventDefault when the component is focused.
  • Control / Command (Mac) + D Duplicates the selected element. Conflicts with Bookmark Page in all browsers; requires preventDefault when the component is focused.
  • Control / Command (Mac) + Shift + S Exports the image. Conflicts with the Firefox Screenshot tool; requires preventDefault when the component is focused.
  • Shift + 1 Fits the image to the screen.
  • Shift + 0 Zooms the image to 100%.
  • Control / Command (Mac) + F3 Moves keyboard focus directly to the Side Panel.
  • R Inserts and selects a rectangle shape. The Floating Toolbar appears, but the side panel remains closed.
  • O Inserts and selects an oval shape. The Floating Toolbar appears, but the side panel remains closed.
  • L Inserts and selects a line shape. The Floating Toolbar appears, but the side panel remains closed.
  • T Inserts a text box with a typing cursor and selects it. The Floating Toolbar appears, but the side panel remains closed.
  • ArrowLeft Moves the selected object left.
  • ArrowRight Moves the selected object right.
  • ArrowUp Moves the selected object up.
  • ArrowDown Moves the selected object down.
  • Control / Command (Mac) + B Bolds the text. Conflicts with the Firefox Bookmarks Sidebar; requires preventDefault when the component is focused.
  • Control / Command (Mac) + I Italicizes the text. Conflicts with Firefox Page Info; requires preventDefault when the component is focused.
  • Control / Command (Mac) + U Underlines the text. Conflicts with View Source in Chrome, Firefox, and Edge; requires preventDefault when the component is focused.
  • Control / Command (Mac) + Shift + L Left-aligns the text.
  • Control / Command (Mac) + Shift + E Center-aligns the text. Conflicts with Firefox Search in Tabs; requires preventDefault when the component is focused.
  • Control / Command (Mac) + Shift + R Right-aligns the text. Conflicts with Hard Refresh in all browsers; requires preventDefault when the component is focused.

Description

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features - it enables users with disabilities to fully control their website or app access through the keyboard.

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

The keyboard navigation of the Telerik UI for Blazor ImageEditor is always enabled, as demonstrated in this demo.

This Blazor ImageEditor Keyboard Navigation example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources
An error has occurred. This application may no longer respond until reloaded.