Skip to content

Commit 0a40b83

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 91e24e9 commit 0a40b83

File tree

13 files changed

+475
-36
lines changed

13 files changed

+475
-36
lines changed

‎docs-aspnet/html-helpers/conversational-ui/aiprompt/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ The AIPrompt provides options for configuring its views, toolbar items, and appe
145145
* [Templates]({% slug htmlhelpers_templates_aiprompt %})—The available templates allow you to control the rendering of the views and prompt suggestions layout.
146146
* [Integration with Microsoft.Extensions.AI]({% slug integration_microsoft_extensions_ai %})&mdash;The AIPrompt supports using the <a href="https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.ai?view=net-9.0-pp" target="_blank">Microsoft.Extensions.AI library</a> to provide seamless integration with various AI models and boost your workflow when connecting the AIPrompt with AI models.
147147
* [Events]({% slug htmlhelpers_events_aiprompt %})&mdash;The component emits a variety of events that allow you to implement custom functionality.
148-
* [Accessibility]({% slug accessibility_aspnetcore_aiprompt %})&mdash;The AIPrompt is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts({% slug keynav_aspnetcore_aiprompt %})] for faster navigation.
148+
* [Accessibility]({% slug accessibility_aspnetcore_aiprompt %})&mdash;The AIPrompt is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_aiprompt %}) for faster navigation.
149149

150150
## Next Steps
151151

‎docs-aspnet/html-helpers/conversational-ui/chat/accessibility/keyboard-navigation.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product_short }} Chat by Telerik UI and learn about the component keyboard navigation functionality."
5+
slug: keynav_aspnetcore_chat
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the Chat is always available.
12+
13+
For a runnable example, refer to the [demo on using the keyboard navigation of the Chat](https://demos.telerik.com/{{ site.platform }}/chat/keyboard-navigation).
14+
15+
## Managing the Focus
16+
17+
Focusable elements in the Chat are part of the page tab sequence:
18+
19+
- `k-quick-reply` (if present);
20+
- `k-message-box input`;
21+
- `k-input-suffix button` elements;
22+
- `k-toolbar-box` (if present)&mdash;it implements the keyboard navigation for a ToolBar component.
23+
24+
## Keyboard Shortcuts Applicable to the Message Input
25+
26+
The Chat supports the following keyboard shortcuts when the message input is focused:
27+
28+
| SHORTCUT | DESCRIPTION |
29+
| -------- | -------- |
30+
| `F10` | Opens and focuses the Chat ToolBar (if present). |
31+
32+
## Keyboard Shortcuts Аpplicable to the Buttons
33+
34+
The Chat supports the following keyboard shortcuts when any of the buttons is focused:
35+
36+
| SHORTCUT | DESCRIPTION |
37+
| -------- | -------- |
38+
| `Enter` or `Space` | Triggers a `click` action on the button. |
39+
40+
## See Also
41+
42+
* [Keyboard Navigation by the Chat HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chat/keyboard-navigation)
43+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})

‎docs-aspnet/html-helpers/conversational-ui/chat/accessibility/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ To test the Chat component, refer to the [Chat Accessibility Demo](https://demos
7171

7272
## Keyboard Navigation
7373

74-
For details on how the Chat keyboard navigation works, refer to the [Accessibility Overview]({%slug overview_accessibility%}#keyboard-navigation) article.
74+
For details on how the Chat keyboard navigation works, refer to the [Chat Keyboard Navigation]({%slug keynav_aspnetcore_chat%}) article.
7575

7676
## See Also
7777

‎docs-aspnet/html-helpers/conversational-ui/chat/overview.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@ The following example demonstrates the available configuration options supported
8484

8585
* [Toolbar]({% slug htmlhelpers_chat_toolbar_aspnetcore %})—The component allows you to add toolbar actions for achieving a more user-friendly conversational UI.
8686
* [Peer-to-Peer Chat]({% slug htmlhelpers_chat_aspnetcore_signalr %})—The Chat provides an option for creating a peer-to-peer Chat application by using SignalR.
87+
* [Events]({% slug events_chat_aspnetcore %})&mdash;Subscribe to the available client-side events to implement any custom logic.
88+
* [Accessibility]({% slug accessibility_chat_overview %})&mdash;The Chat is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_chat %}) for faster navigation.
8789

8890
## Next Steps
8991

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product_short }} CheckBox by Telerik UI and learn about the component keyboard navigation functionality."
5+
slug: keynav_aspnetcore_checkbox
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the CheckBox is always available.
12+
13+
For a runnable example, refer to the [demo on using the keyboard navigation of the CheckBox](https://demos.telerik.com/{{ site.platform }}/checkbox/keyboard-navigation).
14+
15+
The CheckBox supports the following keyboard shortcuts:
16+
17+
| SHORTCUT | DESCRIPTION |
18+
| -------- | -------- |
19+
| `Space` | Toggles the checked state. Regardless of the indeterminate state, the key always considers the `value` of the CheckBox. |
20+
21+
## See Also
22+
23+
* [Keyboard Navigation by the CheckBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/checkbox/keyboard-navigation)
24+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})

‎docs-aspnet/html-helpers/editors/checkbox/accessibility/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ The CheckBox has been tested with the following screen readers and browsers comb
6363

6464
## Keyboard Navigation
6565

66-
For details on how the CheckBox keyboard navigation works, refer to the [Accessibility Overview]({%slug overview_accessibility%}#keyboard-navigation) article.
66+
For details on how the CheckBox keyboard navigation works, refer to the [CheckBox Keyboard Navigation]({%slug keynav_aspnetcore_checkbox%}) article.
6767

6868
## See Also
6969

‎docs-aspnet/html-helpers/editors/checkbox/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ The following example demonstrates how to define the CheckBox.
4040

4141
* [Appearance]({% slug checkbox_appearance %})&mdash;The CheckBox enables you to customize its appearance based on your requirements.
4242
* [Events]({% slug events_checkbox %})&mdash;The CheckBox allows you to handle its events and implement custom functionality.
43+
* [Accessibility]({% slug accessibility_checkbox_overview %})&mdash;The CheckBox is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_checkbox %}) for faster navigation.
4344

4445
>tip To learn more about the appearance, anatomy, and accessibility of the CheckBox, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/checkbox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
4546

‎docs/accessibility/compliance.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ Also check the [notes below the table](#accessibility-compliance-notes).
4646
|Charts |AA |[Demo](https://demos.telerik.com/kendo-ui/accessibility/chart)| [Documentation](https://docs.telerik.com/kendo-ui/controls/charts/accessibility/overview)|
4747
|Chat |AA |[Demo](https://demos.telerik.com/kendo-ui/accessibility/chat)| [Documentation](https://docs.telerik.com/kendo-ui/controls/chat/accessibility/overview)|
4848
|CheckBox |AA |n/a| [Documentation](https://docs.telerik.com/kendo-ui/controls/checkbox/accessibility/overview)|
49-
|CheckBoxGroup |AA |[Demo](hhttps://demos.telerik.com/kendo-ui/accessibility/checkboxgroup)| [Documentation](https://docs.telerik.com/kendo-ui/controls/checkboxgroup/accessibility/overview)|
50-
|CircularGauge |AA |[Demo](hhttps://demos.telerik.com/kendo-ui/accessibility/circulargauge)| n/a|
49+
|CheckBoxGroup |AA |[Demo](https://demos.telerik.com/kendo-ui/accessibility/checkboxgroup)| [Documentation](https://docs.telerik.com/kendo-ui/controls/checkboxgroup/accessibility/overview)|
50+
|CircularGauge |AA |[Demo](https://demos.telerik.com/kendo-ui/accessibility/circulargauge)| n/a|
5151
|ColorGradient |AA |[Demo](https://demos.telerik.com/kendo-ui/accessibility/colorgradient)| [Documentation](https://docs.telerik.com/kendo-ui/controls/colorgradient/accessibility/overview)|
5252
|ColorPalette |n/a |[Demo](https://demos.telerik.com/kendo-ui/accessibility/colorpalette)| [Documentation](https://docs.telerik.com/kendo-ui/controls/colorpalette/accessibility/overview)|
5353
|ColorPicker |AA |[Demo](https://demos.telerik.com/kendo-ui/accessibility/colorpicker)| [Documentation](https://docs.telerik.com/kendo-ui/controls/colorpicker/accessibility/overview)|

‎docs/api/javascript/ui/actionsheet.md‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,80 @@ Controls the main color applied to the button. Valid values are: `"base"`, `"pr
423423
actionsheet.open();
424424
</script>
425425

426+
### actionButtonsOrientation `String`*(default: "horizontal")*
427+
428+
Determines the orientation of the action buttons in the footer. Valid values are `"horizontal"` and `"vertical"`.
429+
430+
#### Example
431+
432+
<div id="actionsheet"></div>
433+
<script>
434+
var actionsheet = $('#actionsheet').kendoActionSheet({
435+
title: 'Confirmation',
436+
actionButtonsOrientation: "vertical",
437+
actionButtons: [
438+
{
439+
text: "Confirm",
440+
icon: "check",
441+
fillMode: "solid",
442+
themeColor: "primary",
443+
click: onClick
444+
},
445+
{
446+
text: "Cancel",
447+
icon: "x",
448+
fillMode: "flat",
449+
click: onClick
450+
}
451+
]
452+
}).data('kendoActionSheet');
453+
454+
function onClick(e) {
455+
e.preventDefault();
456+
actionsheet.close();
457+
}
458+
459+
actionsheet.open();
460+
</script>
461+
462+
### actionButtonsAlignment `String`*(default: "stretched")*
463+
464+
Controls the alignment of the action buttons in the footer. This configuation works only in horizontal mode.
465+
466+
Valid values are `"stretched"`, `"justify"`, `"start"`, `"center"`, and `"end"`.
467+
468+
#### Example
469+
470+
<div id="actionsheet"></div>
471+
<script>
472+
var actionsheet = $('#actionsheet').kendoActionSheet({
473+
title: 'Confirmation',
474+
actionButtonsAlignment: "end",
475+
actionButtons: [
476+
{
477+
text: "Confirm",
478+
icon: "check",
479+
fillMode: "solid",
480+
themeColor: "primary",
481+
click: onClick
482+
},
483+
{
484+
text: "Cancel",
485+
icon: "x",
486+
fillMode: "flat",
487+
click: onClick
488+
}
489+
]
490+
}).data('kendoActionSheet');
491+
492+
function onClick(e) {
493+
e.preventDefault();
494+
actionsheet.close();
495+
}
496+
497+
actionsheet.open();
498+
</script>
499+
426500
### adaptive `Boolean`*(default: false)*
427501

428502
When the ActionSheet is adaptive, it occupies the full width of the screen and has the option to cover the entire screen if the `fullscreen` is set to `true` as well.
@@ -466,6 +540,59 @@ When the ActionSheet is adaptive, it occupies the full width of the screen and h
466540
}
467541
</script>
468542

543+
### animation `Boolean|Object`*(default: false)*
544+
545+
Configures the opening and closing animations of the ActionSheet. Setting the `animation` option to `false` will disable the opening and closing animations. As a result the ActionSheet will open and close instantly. This property has effect only in `adaptive` mode.
546+
547+
`animation:true` is not a valid configuration.
548+
549+
#### Example - disable open and close animations
550+
551+
<div id="actionsheet"></div>
552+
<script>
553+
var actionsheet = $('#actionsheet').kendoActionSheet({
554+
title: 'Action Sheet',
555+
adaptive: true,
556+
animation: false,
557+
items:[
558+
{
559+
text: 'Edit Item',
560+
icon: 'pencil'
561+
}
562+
]
563+
}).data('kendoActionSheet');
564+
565+
actionsheet.open();
566+
</script>
567+
568+
#### Example - configure custom animation
569+
570+
<div id="actionsheet"></div>
571+
<script>
572+
var actionsheet = $('#actionsheet').kendoActionSheet({
573+
title: 'Action Sheet',
574+
adaptive: true,
575+
animation: {
576+
open: {
577+
effects: "fadeIn",
578+
duration: 300
579+
},
580+
close: {
581+
effects: "fadeOut",
582+
duration: 150
583+
}
584+
},
585+
items:[
586+
{
587+
text: 'Edit Item',
588+
icon: 'pencil'
589+
}
590+
]
591+
}).data('kendoActionSheet');
592+
593+
actionsheet.open();
594+
</script>
595+
469596
### closeButton `Boolean`*(default: false)*
470597

471598
Whether a close button would be rendered in the titlebar. A title needs to be set to get the titlebar rendered.
@@ -509,6 +636,39 @@ Whether a close button would be rendered in the titlebar. A title needs to be se
509636
}
510637
</script>
511638

639+
### closeOnClick `Boolean`*(default: true)*
640+
641+
Determines whether the ActionSheet will close when clicking outside of it. If set to `false`, the ActionSheet will remain open until explicitly closed through code or by clicking the close button (if enabled).
642+
643+
#### Example
644+
645+
<div id="actionsheet"></div>
646+
<script>
647+
var actionsheet = $('#actionsheet').kendoActionSheet({
648+
title: 'Select item',
649+
closeOnClick: false,
650+
closeButton: true,
651+
items:[
652+
{
653+
text: 'Edit Item',
654+
icon: 'pencil',
655+
click: onClick
656+
},
657+
{
658+
text: 'Add to Favorites',
659+
icon: 'heart',
660+
click: onClick
661+
}
662+
]
663+
}).data('kendoActionSheet');
664+
665+
actionsheet.open();
666+
function onClick(e) {
667+
e.preventDefault();
668+
actionsheet.close();
669+
}
670+
</script>
671+
512672
### contentTemplate `String|Function`
513673

514674
The text or the function whose result will be shown within the ActionSheet. By default, the ActionSheet will display the content of the target element. The content template will be disregarded if there are `items` defined in the widget options.
@@ -1030,6 +1190,49 @@ Specifies the main text of the item
10301190
}
10311191
</script>
10321192

1193+
### startButton `Object`*(default: false)*
1194+
1195+
When configured, a start button will be rendered in the left side of the header section of the ActionSheet. Typically used for navigation or back functionality. The button is only visible when `title` is also specified.
1196+
1197+
#### Example
1198+
1199+
<div id="actionsheet"></div>
1200+
<script>
1201+
var actionsheet = $('#actionsheet').kendoActionSheet({
1202+
title: 'Select item',
1203+
startButton: {
1204+
icon: "chevron-left",
1205+
click: function(e) {
1206+
console.log("Start button clicked");
1207+
}
1208+
},
1209+
items:[
1210+
{
1211+
text: 'Edit Item',
1212+
icon: 'pencil',
1213+
click: onClick
1214+
},
1215+
{
1216+
text: 'Add to Favorites',
1217+
icon: 'heart',
1218+
click: onClick
1219+
}
1220+
]
1221+
}).data('kendoActionSheet');
1222+
1223+
actionsheet.open();
1224+
function onClick(e) {
1225+
e.preventDefault();
1226+
}
1227+
</script>
1228+
1229+
### startButton.icon `String`
1230+
1231+
Specifies the icon to be displayed in the start button.
1232+
1233+
### startButton.click `Function`
1234+
1235+
The function that will be executed when the start button is clicked.
10331236

10341237
### subtitle `String`
10351238

0 commit comments

Comments
 (0)