The Kendo UI Toolbar supports keyboard navigation between its items either via TAB/SHIFT+TAB or the RIGHT and LEFT arrow keys (documented here). However, there are some issues:
- While the arrow keys cycle endlessly, the user needs to be able the "escape" this cycle when using TAB, otherwise parts of the page would be inaccessible by keyboard. This "breakout" does not work when navigating backwards (SHIFT+TAB) in some scenarios as this DOJO demonstrates. Also, when focusing "After" and pressing SHIFT+TAB, the focus jumps to the splitButton instead of the overflow anchor which is inconsistent with the way TAB alone works.
- When the last visible (not-overflown) item is a separator after a splitButton, the overflow anchor is not focusable via TAB at all. This can be witnessed in this DOJO. However, when combining the items differently, everything seems to work fine.
Hi, Michael,
I am glad that you are happy with the current keyboard navigation.
Thank you for taking the time to share the positive feedback.
Regards,
Martin
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello, Michael,
Thank you for sharing your feedback. I will pass it along to the team.
Regards,
Martin
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
If the goal is not to use TAB for navigating "inside" of a widget, the documentation is wrong. It currently states:
TAB or Right focuses next focusable item
Shift + TAB or Left focuses previous focusable item
To my unterstanding, this implies that TAB and RIGHT as well as SHIFT+TAB and LEFT have the same behavior (which currently is not the case).
In such a case, however, I would suggest using an approach similar to the pager widget. The user may only focus the whole toolbar using TAB. By pressing ENTER, they can "step into" the widget and then navigate between the inner controls in a cycle using TAB again. This mode can be left by pressing ESC and the whole toolbar is focused again.
However I am not sure how convenient this is since a toolbar is probably not necessarily as much seen as a unit as the pager is. In each case, I do not understand the advantage of allowing navigation via the arrow keys only.
Hello, Michael,
Thank you for your patience.
The expected behaviour when navigating with Shift+Tab would be to focus the last focused item in the Toolbar. In the last Kendo version, the only issue is that if you focus the Toolbar and the navigate to the overflow (using right arrow key), then press Tab and then Shift+Tab, the expected behaviour would be to focus the overflow as the last focused item, while it currently focuses the first item in the Toolbar. I would once again like to note that navigation within the Toolbar, from one tool to another, happens through the arrow keys.
As we are currently revising the keyboard navigation for some widgets, we would greatly appreciate any feedback you have regarding the above or the subject in general.
Looking forward to your reply.
Regards,
Martin
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hello, Michael,
Thank you for reporting the behaviour.
I will need some additional time to carefully review it. I will get back to you when I have more information to share.
Thank you for your patience.
Regards,
Martin
Progress Telerik
Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.
- All
- Completed (2045)
- Declined (1262)
- Duplicated (78)
- Need More Info (34)
- Pending Review (2)
- Planned (3)
- Under Review (31)
- Unplanned (1809)
- Won't Fix (8)
- All
- Kendo UI for jQuery
- ActionSheet
- ActionSheet (Mobile)
- AIPrompt
- AppBar
- Application (Mobile)
- AutoComplete
- Avatar
- Badge
- Barcode
- BottomNavigation
- Breadcrumb
- BulletChart
- Button
- Button (Mobile)
- ButtonGroup
- ButtonGroup (Mobile)
- Calendar
- Captcha
- Card
- Chart
- Chat
- Checkbox
- CheckBoxGroup
- Chip
- ChipList
- CircularGauge
- CircularProgressBar
- Collapsible
- ColorGradient
- ColorPalette
- ColorPicker
- ComboBox
- Data Source
- Date/Time Pickers
- DateInput
- DateRangePicker
- Diagram
- Dialog
- DockManager
- Drag and Drop
- Drawer
- Drawer (Mobile)
- Drawing API
- DropDownButton
- DropDownList
- DropDownTree
- Editor
- Effects
- ExpansionPanel
- FileManager
- Filter
- FlatColorPicker
- FloatingActionButton
- Form
- Gantt
- Gauge
- Globalization
- Grid
- Heatmap
- Hierarchical Data Source
- History (Mobile)
- ImageEditor
- ListBox
- ListView
- ListView (Mobile)
- Loader
- Map
- MaskedTextBox
- MediaPlayer
- Menu
- ModalView (Mobile)
- MultiColumnComboBox
- MultiSelect
- MultiViewCalendar
- MVVM
- NavBar (Mobile)
- Notification
- NumericTextBox
- OrgChart
- Pager
- PanelBar
- PDFViewer
- PivotGrid
- PivotGridV2
- Popover
- PopOver (Mobile)
- ProgressBar
- PropertyGrid
- QRCode
- RadioButton
- RadioGroup
- Rating
- ResponsivePanel
- Ripple
- Sankey
- Scheduler
- Scroller (Mobile)
- ScrollView
- ScrollView (Mobile)
- Signature
- SkeletonContainer
- Slider
- Sortable
- SPA
- Sparkline
- SplitButton
- Splitter
- SplitView (Mobile)
- Spreadsheet
- Stepper
- Switch
- Switch (Mobile)
- TabStrip
- Tabstrip (Mobile)
- TaskBoard
- Templates
- TextArea
- TextBox
- TileLayout
- TimeDurationPicker
- Timeline
- ToggleButton
- Toolbar
- Tooltip
- Touch
- TreeList
- TreeMap
- TreeView
- Upload
- Validator
- View (Mobile)
- VS Code Extension
- Window
- Wizard