Skip to content

Commit

Permalink
Sync with Kendo UI Professional
Browse files Browse the repository at this point in the history
  • Loading branch information
kendo-bot committed May 1, 2024
1 parent 5031b3b commit f3d7dc3
Show file tree
Hide file tree
Showing 13 changed files with 696 additions and 50 deletions.
2 changes: 2 additions & 0 deletions docs/_config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -680,6 +680,8 @@ navigation:
title: "Upload"
"*window":
title: "Window"
"*aiprompt":
title: "AIPrompt"
"*hello-kendo-ui":
title: "Hello Kendo UI"
"*home-page":
Expand Down
1 change: 1 addition & 0 deletions docs/accessibility/keyboard-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ Keyboard support in Kendo UI maps access-key combinations and ensures that users

Besides the `accesskey` attribute support, most Kendo UI components also offer a series of keyboard controls for interacting with them. The specific keyboard shortcuts supported by each component are provided in the following keyboard examples.

- [AIPrompt](https://demos.telerik.com/kendo-ui/aiprompt/keyboard-navigation)
- [AutoComplete](https://demos.telerik.com/kendo-ui/autocomplete/keyboard-navigation)
- [BottomNavigation](https://demos.telerik.com/kendo-ui/bottomnavigaiton/keyboard-navigation)
- [Breadcrumb](https://demos.telerik.com/kendo-ui/breadcrumb/keyboard-navigation)
Expand Down
1 change: 1 addition & 0 deletions docs/accessibility/wcag.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ The following table lists the Section 508 and WCAG compliance levels of support
|Component |WCAG 2.2| Accessibility Example |
|:--- |:---|:---
|ActionSheet |AA | [Demo](https://demos.telerik.com/kendo-ui/accessibility/actionsheet)|
|AIPrompt |AA | n/a|
|AppBar |AA | [Demo](https://demos.telerik.com/kendo-ui/accessibility/appbar)|
|AutoComplete |AA | [Demo](https://demos.telerik.com/kendo-ui/accessibility/autocomplete)|
|Avatar |AA | [Demo](https://demos.telerik.com/kendo-ui/accessibility/avatar)|
Expand Down
61 changes: 61 additions & 0 deletions docs/api/javascript/ui/treelist.md
Original file line number Diff line number Diff line change
Expand Up @@ -5903,6 +5903,67 @@ The name of the toolbar command. Can be either a built-in ("create", "excel", or
});
</script>


### toolbar.template `String|Function`

The [template](/api/javascript/kendo/methods/template) which renders the command. By default renders a button. Uses the template for a ToolBar item [toolbar.items.template](/api/javascript/ui/toolbar/configuration/items.template)

#### Example - set the template as a function

<div id="treelist"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Toolbar command is clicked!");
return false;
}
$("#treelist").kendoTreeList({
toolbar: [
{ template: kendo.template($("#template").html()) }
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>

> Check [Toolbar template](https://demos.telerik.com/kendo-ui/treelist/toolbar-template) for a live demo.
#### Example - set the template as a string

<div id="treelist"></div>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Toolbar command is clicked!");
return false;
}
$("#treelist").kendoTreeList({
toolbar: [
{
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
}
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>


### toolbar.text `String`

The text that is displayed by the command button. If not set, the TreeList will use the [`name`](/api/javascript/ui/treelist#configuration-toolbar.name)` option as the button text instead.
Expand Down
29 changes: 29 additions & 0 deletions docs/controls/aiprompt/accessibility/key-nav.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: Keyboard Navigation
page_title: jQuery AIPrompt Documentation - Keyboard Navigation
description: "Get started with the jQuery AIPrompt by Kendo UI and learn about the accessibility support it provides through its keyboard navigation functionality."
slug: keynav_aiprompt_jquery
position: 2
---

# Keyboard Navigation

The keyboard navigation of the AIPrompt is always available.

Kendo UI AIPrompt supports the following keyboard shortcuts:

| SHORTCUT | DESCRIPTION |
|:--- |:--- |
| `Enter`/`Space` | When the toolbar is focused, selects the focused view. When a panel item is focused, expands or collapses the item. When a button is focused, triggers the click event.|
| `Tab` | Navigates to the next structure element of the AIPrompt&mdash;either the header, the content, or the footer element.|
| `Shift`+`Tab` | Navigates to the previous structure element of the AIPrompt&mdash;either the header, the content, or the footer element.|
| `Up/Down Arrows` | Navigates to the next/previous item when a panel is focused.|
| `Right/Left Arrows` | Navigates to the next/previous view button when the toolbar is focused.|

For a complete example, refer to the [demo on keyboard navigation of the AIPrompt](https://demos.telerik.com/kendo-ui/aiprompt/keyboard-navigation).

## See Also

* [Keyboard Navigation by the AIPrompt (Demo)](https://demos.telerik.com/kendo-ui/aiprompt/keyboard-navigation)
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
* [Accessibility in the AIPrompt]({% slug accessibility_kendoui_aiprompt_component %})
34 changes: 34 additions & 0 deletions docs/controls/aiprompt/accessibility/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
title: Overview
page_title: jQuery AIPrompt Documentation - AIPrompt Accessibility
description: "Get started with the jQuery AIPrompt and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
slug: accessibility_kendoui_aiprompt_component
position: 1
---

# AIPrompt Accessibility

The AIPrompt is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

For more information, refer to:
* [Keyboard navigation by the Kendo UI AIPrompt]({% slug keynav_aiprompt_jquery %})
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

## WAI-ARIA

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 Kendo UI for jQuery]({% slug wai_aria_accessibility_support %}).

## Section 508

The AIPrompt 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 %}).

## WCAG 2.2

The AIPrompt 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.2 compliance in Kendo UI for jQuery]({% slug section508_wcag21_accessibility_support %})

## See Also

* [Keyboard Navigation by the AIPrompt (Demo)](https://demos.telerik.com/kendo-ui/aiprompt/keyboard-navigation)
* [Keyboard Navigation by the AIPrompt]({% slug keynav_aiprompt_jquery %})
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
Loading

0 comments on commit f3d7dc3

Please sign in to comment.