Skip to content

Commit 27aeed5

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 09aa22c commit 27aeed5

File tree

12 files changed

+815
-29
lines changed

12 files changed

+815
-29
lines changed

‎docs-aspnet/html-helpers/navigation/actionsheet/accessibility/keyboard-navigation.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Learn how to use the keyboard navigation functionality of the Telerik ActionSheet HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_actionsheet_keyboardnavigation_aspnetcore
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the ActionSheet is always available.
12+
13+
For a complete example, refer to the [demo on keyboard navigation of the ActionSheet](https://demos.telerik.com/{{ site.platform }}/actionsheet/keyboard-navigation)
14+
## See Also
15+
16+
* [Keyboard Navigation by the ActionSheet HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/actionsheet/keyboard-navigation)
17+
* [Server-Side API](/api/actionsheet)

‎docs-aspnet/html-helpers/navigation/actionsheet/accessibility/overview.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the {{ site.product_short }} ActionSheet by Telerik UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: htmlhelpers_accessibility_actionsheet_aspnetcore
6+
position: 1
7+
---
8+
9+
# ActionSheet Accessibility
10+
11+
The ActionSheet is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Keyboard navigation by the {{ site.product_short }} ActionSheet]({% slug htmlhelpers_actionsheet_keyboardnavigation_aspnetcore %})
15+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
16+
17+
## WAI-ARIA
18+
19+
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in {{ site.product }}]({% slug overview_accessibility %}#wai-aria).
20+
21+
## Section 508
22+
23+
The ActionSheet is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in {{ site.product }}]({% slug overview_accessibility %}#section-508).
24+
25+
## WCAG 2.1
26+
27+
The ActionSheet supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
28+
29+
## See Also
30+
31+
* [Keyboard Navigation by the ActionSheet HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/actionsheet/keyboard-navigation)
32+
* [Keyboard Navigation by the ActionSheet HtmlHelper for {{ site.framework }}]({% slug htmlhelpers_actionsheet_keyboardnavigation_aspnetcore %})
33+
* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})

‎docs-aspnet/html-helpers/navigation/actionsheet/events.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the ActionSheet component."
5+
slug: htmlhelpers_events_actionsheet_aspnetcore
6+
position: 3
7+
---
8+
9+
# Events
10+
11+
The Kendo UI ActionSheet exposes events that provide easy configuration or extension points for custom functionality.
12+
13+
## Open
14+
15+
The open event fires when the ActionSheet is opened.
16+
17+
The following example demonstrates how you can subscribe to the open event of the component:
18+
19+
```Razor
20+
@(Html.Kendo().ActionSheet()
21+
.Name("actionsheet")
22+
.Title("Select item")
23+
.Items(items =>
24+
{
25+
items.Add().Text("Edit Item").IconClass("k-icon k-i-edit");
26+
items.Add().Text("Add to Favorites").IconClass("k-icon k-i-heart");
27+
items.Add().Text("Upload New").IconClass("k-icon k-i-upload").Click("onClick");
28+
items.Add().Text("Cancel").IconClass("k-icon k-i-cancel").Group("bottom");
29+
})
30+
.Events(e => e.open("onOpen"))
31+
)
32+
33+
<script>
34+
function onOpen() {
35+
console.log("Open")
36+
//your custom logic here
37+
}
38+
</script>
39+
```
40+
41+
## Close
42+
43+
The close event fires when the ActionSheet is closed.
44+
45+
The following example demonstrates how you can subscribe to the open event of the widget:
46+
47+
```Razor
48+
@(Html.Kendo().ActionSheet()
49+
.Name("actionsheet")
50+
.Title("Select item")
51+
.Items(items =>
52+
{
53+
items.Add().Text("Edit Item").IconClass("k-icon k-i-edit");
54+
items.Add().Text("Add to Favorites").IconClass("k-icon k-i-heart");
55+
items.Add().Text("Upload New").IconClass("k-icon k-i-upload");
56+
items.Add().Text("Cancel").IconClass("k-icon k-i-cancel").Group("bottom");
57+
})
58+
.Events(e => e.Close("onClose"))
59+
)
60+
61+
<script>
62+
function onClose() {
63+
console.log("Close")
64+
//your custom logic here
65+
}
66+
</script>
67+
```
68+
69+
## See Also
70+
71+
* [Overview of the ActionSheet HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/actionsheet/overview)
72+
* [Server-Side API](/api/actionsheet)

‎docs-aspnet/html-helpers/navigation/actionsheet/items.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Items
3+
page_title: Items
4+
description: "Learn how to configure the items of the ActionSheet component."
5+
slug: htmlhelpers_items_actionsheet_aspnetcore
6+
position: 2
7+
---
8+
9+
# Items
10+
11+
The `Items` configuration allows you to set specific attributes of the ActionSheet items. You can set their:
12+
13+
- Text
14+
- Icon
15+
- Group (items can be segregated in two groups - top and bottom.)
16+
- Description
17+
- Click event handler name
18+
19+
The following example demonstrates the possible options for the *items* configuration of the ActionSheet widget:
20+
21+
```Razor
22+
@(Html.Kendo().ActionSheet()
23+
.Name("actionsheet")
24+
.Title("Select item")
25+
.Items(items =>
26+
{
27+
items.Add().Text("Edit Item").IconClass("k-icon k-i-edit").Description("Select to enter edit mode.").Click("onClick");
28+
items.Add().Text("Add to Favorites").IconClass("k-icon k-i-heart").Click("onClick");
29+
items.Add().Text("Upload New").IconClass("k-icon k-i-upload").Click("onClick");
30+
items.Add().Text("Cancel").IconClass("k-icon k-i-cancel").Group("bottom").Click("onClick");
31+
})
32+
)
33+
34+
<script>
35+
$(function() {
36+
function onClick(e) {
37+
e.preventDefault();
38+
var actionsheet = $("#actionsheet").data("kendoActionSheet");
39+
actionsheet.close();
40+
}
41+
});
42+
</script>
43+
```
44+
45+
## See Also
46+
47+
* [Overview of the ActionSheet HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/actionsheet/overview)
48+
* [Server-Side API](/api/actionsheet)

‎docs-aspnet/html-helpers/navigation/actionsheet/overview.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn the basics when working with the Telerik UI ActionSheet HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_actionsheet_aspnetcore
6+
position: 1
7+
---
8+
9+
# ActionSheet HtmlHelper Overview
10+
11+
The Telerik ActionSheet HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI ActionSheet widget.
12+
13+
The ActionSheet is a dialog that displays a set of options for the user to choose from. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app.
14+
15+
Visit the [Demo page for the ActionSheet](https://demos.telerik.com/{{ site.platform }}/actionsheet/index) to see it in action.
16+
17+
## Initializing the ActionSheet
18+
19+
The following example demonstrates how to define the ActionSheet by using the ActionSheet HtmlHelper.
20+
21+
```Razor
22+
@(Html.Kendo().ActionSheet()
23+
.Name("actionsheet")
24+
)
25+
```
26+
27+
## Basic Configuration
28+
29+
The following example demonstrates the basic configuration for the ActionSheet HtmlHelper.
30+
31+
```Razor
32+
@(Html.Kendo().ActionSheet()
33+
.Name("actionsheet")
34+
.Title("Select item")
35+
.Items(items =>
36+
{
37+
items.Add().Text("Edit Item").IconClass("k-icon k-i-edit").Click("onClick");
38+
items.Add().Text("Add to Favorites").IconClass("k-icon k-i-heart").Click("onClick");
39+
items.Add().Text("Upload New").IconClass("k-icon k-i-upload").Click("onClick");
40+
items.Add().Text("Cancel").IconClass("k-icon k-i-cancel").Group("bottom").Click("onClick");
41+
})
42+
)
43+
44+
<script>
45+
$(function() {
46+
// The Name() of the ActionSheet is used to get its client-side instance.
47+
function onClick(e) {
48+
e.preventDefault();
49+
var actionsheet = $("#actionsheet").data("kendoActionSheet");
50+
actionsheet.close();
51+
}
52+
});
53+
</script>
54+
```
55+
56+
## Functionality and Features
57+
58+
* [Items]({% slug htmlhelpers_items_actionsheet_aspnetcore %}) - the configuration allows you to set various attributes like icons and text.
59+
* [Events]({% slug htmlhelpers_events_actionsheet_aspnetcore %}) - the events that provide easy configuration or extension points for custom functionality
60+
* [Accessibility]({% slug htmlhelpers_accessibility_actionsheet_aspnetcore %}) - the ActionSheet supports various accessibility standards.
61+
62+
## See Also
63+
64+
* [Basic Usage of the ActionSheet HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/actionsheet/index)
65+
* [Using the API of the ActionSheet HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/actionsheet/api)

‎docs/controls/navigation/actionsheet/accessibility/keyboard-navigation.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: jQuery ActionSheet Documentation | Keyboard Navigation
4+
description: "Get started with the jQuery ActionSheet by Kendo UI and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_actionsheet_jquery
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the ActionSheet is always available.
12+
13+
Kendo UI ActionSheet supports the following keyboard shortcuts:
14+
15+
| SHORTCUT | DESCRIPTION |
16+
|:--- |:--- |
17+
| `Enter` | Selects the focused item|
18+
| `Space` | Selects the focused item|
19+
| `Tab` | Navigates to the next item|
20+
| `Shift`+`Tab` | Navigates to the previous item|
21+
22+
For a complete example, refer to the [demo on keyboard navigation of the ActionSheet](https://demos.telerik.com/kendo-ui/actionsheet/keyboard-navigation).
23+
24+
## See Also
25+
26+
* [Keyboard Navigation by the ActionSheet (Demo)](https://demos.telerik.com/kendo-ui/actionsheet/keyboard-navigation)
27+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
28+
* [Accessibility in the ActionSheet]({% slug accessibility_kendoui_actionsheet_widget %})

‎docs/controls/navigation/actionsheet/accessibility/overview.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Overview
3+
page_title: jQuery ActionSheet Documentation | ActionSheet Accessibility
4+
description: "Get started with the jQuery ActionSheet and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_kendoui_actionsheet_widget
6+
position: 1
7+
---
8+
9+
# ActionSheet Accessibility
10+
11+
The ActionSheet is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Keyboard navigation by the Kendo UI ActionSheet]({% slug keynav_actionsheet_jquery %})
15+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
16+
17+
## WAI-ARIA
18+
19+
The widget follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in Kendo UI for jQuery]({% slug wai_aria_accessibility_support %}).
20+
21+
## Section 508
22+
23+
The ActionSheet is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Kendo UI for jQuery]({% slug section508_accessibility_support %}).
24+
25+
## WCAG 2.1
26+
27+
The ActionSheet supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in Kendo UI for jQuery]({% slug section508_wcag21_accessibility_support %})
28+
29+
## See Also
30+
31+
* [Keyboard Navigation by the ActionSheet (Demo)](https://demos.telerik.com/kendo-ui/actionsheet/keyboard-navigation)
32+
* [Keyboard Navigation by the actionsheet]({% slug keynav_actionsheet_jquery %})
33+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
34+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

0 commit comments

Comments
 (0)