Skip to content

Commit 7db1332

Browse files
author
Marin Bratanov
committed
docs(calendar): access key and kbd nav
1 parent 764a528 commit 7db1332

File tree

1 file changed

+30
-6
lines changed

1 file changed

+30
-6
lines changed

controls/calendar/accessibility-and-internationalization/keyboard-support.md

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,41 @@ position: 5
1111
# Keyboard Support
1212

1313

14-
The **RadCalendar** control provides support for **Access Keys** and navigation using the tab and arrow keys:
14+
The **RadCalendar** control provides keyboard navigation using the tab and arrow keys:
1515

16-
* **Access Keys** - You can specify a key that lets the end user move focus directly to the **RadCalendar** control. Once focus is on the control, the user can use the keyboard to navigate around the control select a value. The access key is defined using the **AccessKey** property. For example, if you set the **AccessKey** property to "C", focus moves to the **RadCalendar** control when the user presses "**Alt+C**".
1716

18-
````ASPNET
19-
<telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" MonthLayout="Layout_7columns_x_6rows" AccessKey="C">
17+
You can use the `TAB` key to focus the control. Once focus is on the **RadCalendar** control, you can use the following commands:
18+
19+
* the `TAB` key and `SHIFT+TAB` key combination move through the parts of the control.
20+
21+
* The first time the user presses the `TAB` key, focus moves to the first navigation control in the title bar.
22+
23+
* Pressing `TAB` repeatedly moves through the navigation controls in the title bar and then through each day shown in the main calendar area.
24+
25+
* Pressing `SHIFT+TAB` moves backward through the same elements.
26+
27+
* Pressing the `ENTER` key when focus is on a navigation control causes the view to change.
28+
29+
* Pressing the `ENTER` key when focus is on a day in the main calendar area selects the day.
30+
31+
* Pressing the `arrow` keys when focus is on the calendar moves the focused date in the respective direction.
32+
33+
A built-in access key is `Y` so you can use `Alt+Y` to focus the control by default. If you need more granular access key settings, you can use JavaScript to set them:
34+
35+
>caption How to set a custom access key to a RadCalendar.
36+
37+
````ASPX
38+
<telerik:RadCalendar ID="RadCalendar1" RenderMode="Lightweight" runat="server"
39+
EnableKeyboardNavigation="true" EnableAriaSupport="true" EnableMultiSelect="false">
40+
<ClientEvents OnLoad="OnLoad" />
2041
</telerik:RadCalendar>
42+
<script>
43+
function OnLoad(sender, args) {
44+
$telerik.$(sender.get_element()).find(".rcMainTable").first().attr("accessKey", "Q");
45+
}
46+
</script>
2147
````
2248

23-
* **Tab key Navigation** - Once focus is on the **RadCalendar** control, the TAB key and SHIFT+TAB key combination move through the parts of the control. The first time the user presses the TAB key, focus moves to the first navigation control in the title bar. Pressing TAB repeatedly moves through the navigation controls in the title bar and then through each day shown in the main calendar area. Pressing SHIFT+TAB moves backward through the same elements. Pressing the ENTER key when focus is on a navigation control causes the view to change. Pressing the ENTER key when focus is on a day in the main calendar area selects the day.
24-
2549

2650
# See Also
2751

0 commit comments

Comments
 (0)