Skip to content

Commit e4555d6

Browse files
committed
Sync with Kendo UI Professional
1 parent 65cc151 commit e4555d6

File tree

12 files changed

+321
-20
lines changed

12 files changed

+321
-20
lines changed

docs-aspnet/docs-builder-core.yml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -419,10 +419,13 @@ meta:
419419
title: Conversational UI
420420
html-helpers/navigation/menu/contextmenu:
421421
title: ContextMenu
422-
position: 4
422+
position: 9
423423
html-helpers/navigation/menu/binding:
424424
title: Data Binding
425425
position: 3
426+
html-helpers/navigation/menu/accessibility:
427+
title: Accessibility
428+
position: 8
426429
html-helpers/navigation/radiobutton:
427430
title: RadioButton
428431
html-helpers/navigation/wizard:

docs-aspnet/docs-builder-mvc.yml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -466,10 +466,13 @@ meta:
466466
title: Conversational UI
467467
html-helpers/navigation/menu/contextmenu:
468468
title: ContextMenu
469-
position: 4
469+
position: 9
470470
html-helpers/navigation/menu/binding:
471471
title: Data Binding
472472
position: 3
473+
html-helpers/navigation/menu/accessibility:
474+
title: Accessibility
475+
position: 8
473476
html-helpers/navigation/radiobutton:
474477
title: RadioButton
475478
html-helpers/navigation/wizard:
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product_short }} ColorPicker by Telerik UI and learn about the component keyboard navigation functionality."
5+
slug: keynav_aspnetcore_colorpicker
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the ColorPicker is always available.
12+
13+
For a runnable example, refer to the [demo on using the keyboard navigation of the ColorPicker](https://demos.telerik.com/{{ site.platform }}/colorpicker/keyboard-navigation).
14+
15+
The ColorPicker supports the following keyboard shortcuts:
16+
17+
| SHORTCUT | DESCRIPTION |
18+
| -------- | -------- |
19+
| `Enter` or `Alt/Opt(Mac) + Down` | Opens the popup (when the popup is closed). |
20+
| `Tab` | Navigates to the next focusable element in the popup. |
21+
| `Shift` + `Tab` | Navigates to the previous focusable element in the popup. |
22+
| `Arrows` | Updates the saturation/value in the gradient rectangle. |
23+
| `Ctrl` + `Left/Right arrow` | Updates the hue slider. |
24+
| `Ctrl` + `Up/Down arrow` | Updates the opacity slider (when opacity is present). |
25+
| `Shift` | Hold for fine-tuning. |
26+
| `Enter` | For buttons, executes the currently focused button's action. |
27+
| `Left Arrow` | Selects the previous color (in Palette view). |
28+
| `Right Arrow` | Selects the next color (in Palette view). |
29+
| `Esc` | Cancels the selection and closes the popup (when the popup is opened). |
30+
31+
## See Also
32+
33+
* [Keyboard Navigation by the ColorPicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/keyboard-navigation)
34+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})

docs-aspnet/html-helpers/editors/colorpicker/overview.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,9 @@ The following example demonstrates how to configure the tile size, columns, `Cha
9292
| [Contrast Tool]({% slug htmlhelpers_contrast_tool_colorpickerhelper_aspnetcore %})| The ColorPicker supports a contrast tool. |
9393
| [Formats]({% slug htmlhelpers_formats_colorpickerhelper_aspnetcore %})| Configure the ColorPicker input formats. |
9494
| [Palettes]({% slug palettes_colorpicker %})| Define a color palette that the user can pick from. |
95+
| [Adaptive Mode]({% slug htmlhelpers_colorpicker_adaptive_mode_aspnetcore %})| The ColorPicker supports an adaptive mode that renders a mobile-friendly popup. |
9596
| [Events]({% slug events_colorpicker %})| The ColorPicker allows you to handle its events and implement any custom logic. |
96-
| [Adaptive Mode](% slug htmlhelpers_colorpicker_adaptive_mode_aspnetcore %)| The ColorPicker supports an adaptive mode that renders a mobile-friendly popup. |
97+
| [Accessibility]({% slug accessibility_colorpicker_overview %})| The component is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_colorpicker %}) for faster navigation. |
9798

9899
## Next Steps
99100

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

docs-aspnet/html-helpers/navigation/chip/accessibility/overview.md

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

6464
## Keyboard Navigation
6565

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

6868
## See Also
6969

docs-aspnet/html-helpers/navigation/chip/overview.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,9 @@ The following example demonstrates how to initialize the Chip.
4444

4545
## Functionality and Features
4646

47-
* [Customization]({% slug htmlhelpers_chip_aspnetcore_customization %})—You can add a **Select** or **Remove** custom icon to the Chip as well as display avatars in it.
4847
* [Appearance]({% slug htmlhelpers_chip_aspnetcore_appearance %})—The Chip delivers a number of ready-to-use, predefined sets of styling options.
48+
* [Customization]({% slug htmlhelpers_chip_aspnetcore_customization %})—You can add a **Select** or **Remove** custom icon to the Chip as well as display avatars in it.
49+
* [Accessibility]({% slug accessibility_chip_overview %})—The Chip is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_chip %}) for faster navigation.
4950

5051
>tip To learn more about the appearance, anatomy, and accessibility of the Chip, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/chip/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
5152
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product_short }} ChipList by Telerik UI and learn about the component keyboard navigation functionality."
5+
slug: keynav_aspnetcore_chiplist
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the ChipList is always available.
12+
13+
For a runnable example, refer to the [demo on using the keyboard navigation of the ChipList](https://demos.telerik.com/{{ site.platform }}/chiplist/keyboard-navigation).
14+
15+
The ChipList supports the following keyboard shortcuts:
16+
17+
| SHORTCUT | DESCRIPTION |
18+
| -------- | -------- |
19+
| `RightArrow` | Focuses the next chip in the ChipList. |
20+
| `LeftArrow` | Focuses to the previous chip in the group. |
21+
| `Enter` or `Space` | Triggers a `click` action on the chip. |
22+
| `Delete` or `Backspace` | Removes the chip when a delete action is configured.|
23+
24+
## See Also
25+
26+
* [Keyboard Navigation by the ChipList for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chiplist/keyboard-navigation)
27+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})

docs-aspnet/html-helpers/navigation/chiplist/accessibility/overview.md

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

7272
## Keyboard Navigation
7373

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

7676
## See Also
7777

docs-aspnet/html-helpers/navigation/chiplist/overview.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ The following example demonstrates how to initialize the ChipList.
5353

5454
## Functionality and Features
5555

56-
* [Customization]({% slug htmlhelpers_chiplist_aspnetcore_customization %})—You can specify icons for the item content of the chips displayed in the ChipList.
5756
* [Appearance]({% slug htmlhelpers_chiplist_aspnetcore_appearance %})—The ChipList delivers a number of ready-to-use, predefined sets of styling options.
57+
* [Customization]({% slug htmlhelpers_chiplist_aspnetcore_customization %})—You can specify icons for the item content of the chips displayed in the ChipList.
58+
* [Accessibility]({% slug accessibility_chiplist_overview %})—The ChipList is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_chiplist %}) for faster navigation.
5859

5960
## Next Steps
6061

0 commit comments

Comments
 (0)