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

TaskBoard - Keyboard Navigation

To Do
Campaigns

Create a new landing page for campaign

Newsletters

Send newsletter

Ads Analytics

Review ads performance

SEO Analytics

Review SEO results

Customer Research

Interview focus groups

Testimonials & Case Studies

Publish new case study

Content

Plan content for podcasts

Customer Journey

Update virtual classrooms' experience

In Progress
Funnel Analytics

Funnel analysis

Customer Research

Refine feedback from user interviews

Campaigns

Collaborate with designers on new banners

Done
Customer Journey

Review shopping cart experience

  • Keyboard-navigation.razor
Loading the demo source code...please wait.
Style in ThemeBuilder
  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Focus

  • Alt + W focuses the first component in the example

Managing Focus

  • Tab Focuses the TaskBoard component.

Supported keys and user actions

Columns

  • Left arrow Focuses the previous column.
  • Right arrow Focuses the next column.
  • Down arrow Focuses the first card in the column.
  • Delete Deletes the focused column.
  • Ctrl + E Puts the focused column in edit mode.
  • Ctrl + A Opens the add card pane for the focused column.

Cards

  • Up arrow Focuses the previous card. If the focused card is first in the column, focuses the column header instead.
  • Down arrow Focuses the next card in the column.
  • Left arrow Focuses the card at the same position in the previous column, or the column header if the previous column has no cards.
  • Right arrow Focuses the card at the same position in the next column, or the column header if the next column has no cards.
  • Enter Selects the focused card and triggers the OnCardClick event.
  • Delete Deletes the focused card.
  • Ctrl + E Opens the edit pane for the focused card.
  • Ctrl + A Opens the add card pane for the current column.

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 TaskBoard is always enabled, as demonstrated in this demo.

This Blazor TaskBoard 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.