Skip to content

Commit d9a7adb

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 76a153e commit d9a7adb

File tree

16 files changed

+993
-53
lines changed

16 files changed

+993
-53
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -615,6 +615,11 @@ defaults:
615615
path: "html-helpers/navigation/floatingactionbutton"
616616
values:
617617
title_prefix: "ASP.NET MVC FloatingActionButton Component"
618+
-
619+
scope:
620+
path: "html-helpers/navigation/speechtotextbutton"
621+
values:
622+
title_prefix: "ASP.NET MVC SpeechToTextButton Component"
618623
-
619624
scope:
620625
path: "html-helpers/navigation/splitbutton"

‎docs-aspnet/_config.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -763,6 +763,9 @@ navigation:
763763
isNew: true
764764
"*switch":
765765
title: "Switch"
766+
"*speechtotextbutton":
767+
title: "SpeechToTextButton"
768+
isNew: true
766769
"*splitbutton":
767770
title: "SplitButton"
768771
"*/dropdownbutton":
@@ -1246,6 +1249,11 @@ defaults:
12461249
path: "html-helpers/navigation/floatingactionbutton"
12471250
values:
12481251
title_prefix: "ASP.NET Core FloatingActionButton Component"
1252+
-
1253+
scope:
1254+
path: "html-helpers/navigation/speechtotextbutton"
1255+
values:
1256+
title_prefix: "ASP.NET Core SpeechToTextButton Component"
12491257
-
12501258
scope:
12511259
path: "html-helpers/navigation/splitbutton"

‎docs-aspnet/accessibility/accessibility-compliance.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ Also check the [notes below the table](#accessibility-compliance-notes).
110110
| SkeletonContainer | AAA | N/A | N/A |
111111
| Slider | AA | [Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/slider) | [Documentation](https://docs.telerik.com/{{ site.platform }}/html-helpers/editors/slider/accessibility/overview) |
112112
| Sortable | AA | N/A | [Documentation](https://docs.telerik.com/{{ site.platform }}/html-helpers/interactivity/sortable/accessibility/overview) |
113+
| SpeechToTextButton | AAA | [Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/speechtotextbutton) | [Documentation](https://docs.telerik.com/{{ site.platform }}/html-helpers/navigation/speechtotextbutton/accessibility/overview) |
113114
| SplitButton | AA | [Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/splitbutton) | [Documentation](https://docs.telerik.com/{{ site.platform }}/html-helpers/navigation/splitbutton/accessibility/overview) |
114115
| Splitter | AA | [Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/splitter) | [Documentation](https://docs.telerik.com/{{ site.platform }}/html-helpers/layout/splitter/accessibility/overview) |
115116
| Spreadsheet | AA | [Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/spreadsheet) | [Documentation](https://docs.telerik.com/{{ site.platform }}/html-helpers/data-management/spreadsheet/accessibility/overview) |

‎docs-aspnet/docs-builder-core.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,8 @@ meta:
267267
position: 50
268268
"*/dropdownbutton":
269269
title: DropDownButton
270+
"*speechtotextbutton":
271+
title: SpeechToTextButton
270272
"*splitbutton":
271273
title: SplitButton
272274
"*switch":

‎docs-aspnet/docs-builder-mvc.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,8 @@ meta:
226226
position: 50
227227
"*/dropdownbutton":
228228
title: DropDownButton
229+
"*speechtotextbutton":
230+
title: SpeechToTextButton
229231
"*splitbutton":
230232
title: SplitButton
231233
"*switch":

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

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: SpeechToTextButton Documentation | SpeechToTextButton Keyboard Navigation
4+
description: "Get started with the {{ site.product_short }} SpeechToTextButton by Telerik UI and learn about the component keyboard navigation functionality."
5+
slug: htmlhelpers_speechtotextbutton_keynav
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the SpeechToTextButton is always available.
12+
13+
## Managing the Focus
14+
15+
The SpeechToTextButton is focusable by default, and follows the regular tab order of the page.
16+
17+
## Keyboard Navigation
18+
19+
The component supports the following keyboard shortcuts:
20+
21+
| SHORTCUT | DESCRIPTION |
22+
|:--- |:--- |
23+
| `Enter` or `Space` | Triggers a click action on the button. Toggles the active listening state of the component. |
24+
25+
## See Also
26+
27+
* [Keyboard Navigation in {{ site.product }}]({% slug overview_accessibility %}#keyboard-navigation)

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Overview
3+
page_title: SpeechToTextButton Documentation | SpeechToTextButton Accessibility
4+
description: "Get started with the {{ site.product }} SpeechToTextButton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: htmlhelpers_speechtotextbutton_accessibility
6+
position: 1
7+
---
8+
9+
# SpeechToTextButton Accessibility
10+
11+
Out of the box, the {{ site.product }} SpeechToTextButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
12+
13+
The SpeechToTextButton is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
14+
15+
## WAI-ARIA
16+
17+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
18+
19+
| Selector | Attribute | Usage |
20+
| -------- | --------- | ----- |
21+
| `.k-button.k-speech-to-text-button` | `role=button` or `nodeName=button` | If the used element is not `<button>`, explicitly set its `role` to `button`. |
22+
| `.k-button` | `aria-pressed=true/false` | Announced the toggle behaviour of the button. |
23+
24+
## Resources
25+
26+
[WAI-ARIA Authoring Practices: Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
27+
28+
## Section 508
29+
30+
The SpeechToTextButton is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
31+
32+
## Testing
33+
34+
The SpeechToTextButton has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
35+
36+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
37+
38+
### Screen Readers
39+
40+
The SpeechToTextButton has been tested with the following screen readers and browsers combinations:
41+
42+
| Environment | Tool |
43+
| ----------- | ---- |
44+
| Firefox | NVDA |
45+
| Chrome | JAWS |
46+
| Microsoft Edge | JAWS |
47+
48+
### Test Example
49+
50+
To test the SpeechToTextSpeechToTextButton component, refer to the [SpeechToTextSpeechToTextButton Accessibility Demo](https://demos.telerik.com/{{ site.platform }}/accessibility/speechtotextbutton).
51+
52+
## Keyboard Navigation
53+
54+
For details on how the SpeechToTextSpeechToTextButton keyboard navigation works, refer to the [SpeechToTextSpeechToTextButton Keyboard Navigation]({%slug htmlhelpers_speechtotextbutton_keynav%}) article.
55+
56+
## See Also
57+
58+
* [Keyboard Navigation by the SpeechToTextSpeechToTextButton for {{ site.framework }}]({% slug htmlhelpers_speechtotextbutton_keynav %})
59+
* [Accessibility in {{ site.product }}]({%slug overview_accessibility%})

‎docs-aspnet/html-helpers/navigation/speechtotextbutton/appearance.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
title: Appearance
3+
page_title: Appearance
4+
description: "Learn how to customize the appearance of the Telerik UI SpeechToTextButton HtmlHelper for {{ site.framework }}."
5+
slug: speechtotextbutton_appearance
6+
position: 2
7+
---
8+
9+
# Appearance
10+
11+
In this article, you will find information about the styling options of the {{ site.product }} SpeechToTextButton.
12+
13+
For a live example, visit to the [Appearance Demo of the SpeechToTextButton component](https://demos.telerik.com/{{ site.platform }}/speechtotextbutton/appearance).
14+
15+
## Options
16+
17+
The SpeechToTextButton component provides the following options for styling:
18+
19+
* [`Size()`](#size)&mdash;Configures the overall size of the component.
20+
* [`ThemeColor()`](#themecolor)&mdash;Sets what color will be applied to the component.
21+
* [`FillMode()`](#fillmode)&mdash;Defines how the color is applied to the SpeechToTextButton.
22+
* [`Rounded()`](#rounded)&mdash;Determines the border radius of the component.
23+
* [`Icon()` and `StopIcon()`](#icons)&mdash;Customize the default icons in the active and inactive states.
24+
25+
### Size
26+
27+
To control the size of the SpeechToTextButton, configure the `Size()` option with any of the following values:
28+
29+
- `Small`
30+
- `Medium` (the default size)
31+
- `Large`
32+
- `None`
33+
34+
```HtmlHelper
35+
@(Html.Kendo().SpeechToTextButton()
36+
.Name("speechButton")
37+
.Size(ComponentSize.Medium)
38+
)
39+
```
40+
{% if site.core %}
41+
```TagHelper
42+
@addTagHelper *, Kendo.Mvc
43+
44+
<kendo-speechtotextbutton name="speechButton" size="ComponentSize.Medium">
45+
</kendo-speechtotextbutton>
46+
```
47+
{% endif %}
48+
49+
### ThemeColor
50+
51+
The `ThemeColor()` configuration provides a variety of colors that can be applied to the SpeechToTextButton. The available options are:
52+
53+
- `Base`
54+
- `Primary`
55+
- `Secondary`
56+
- `Tertiary`
57+
- `Info`
58+
- `Success`
59+
- `Warning`
60+
- `Error`
61+
- `Dark`
62+
- `Light`
63+
- `Inverse`
64+
- `None`
65+
66+
The default `ThemeColor` is `Base`.
67+
68+
```HtmlHelper
69+
@(Html.Kendo().SpeechToTextButton()
70+
.Name("speechButton")
71+
.ThemeColor(ThemeColor.Base)
72+
)
73+
```
74+
{% if site.core %}
75+
```TagHelper
76+
@addTagHelper *, Kendo.Mvc
77+
78+
<kendo-speechtotextbutton name="speechButton" theme-color="ThemeColor.Base">
79+
</kendo-speechtotextbutton>
80+
```
81+
{% endif %}
82+
83+
### FillMode
84+
85+
The `FillMode()` method specifies how the color is applied to the component. The default SpeechToTextButton fill mode is `Solid`.
86+
87+
```HtmlHelper
88+
@(Html.Kendo().SpeechToTextButton()
89+
.Name("speechButton")
90+
.FillMode(ButtonFillMode.Solid)
91+
)
92+
```
93+
{% if site.core %}
94+
```TagHelper
95+
@addTagHelper *, Kendo.Mvc
96+
97+
<kendo-speechtotextbutton name="speechButton" fill-mode="ButtonFillMode.Solid">
98+
</kendo-speechtotextbutton>
99+
```
100+
{% endif %}
101+
102+
The following options are available for the `FillMode()` configuration:
103+
104+
- `Solid`
105+
- `Outline`
106+
- `Flat`
107+
- `Link`
108+
- `Clear`
109+
- `None`
110+
111+
### Rounded
112+
113+
The border radius of the SpeechToTextButton can be customized through the `Rounded()` method. The default option is `Medium`.
114+
115+
```HtmlHelper
116+
@(Html.Kendo().SpeechToTextButton()
117+
.Name("speechButton")
118+
.Rounded(Rounded.Medium)
119+
)
120+
```
121+
{% if site.core %}
122+
```TagHelper
123+
@addTagHelper *, Kendo.Mvc
124+
125+
<kendo-speechtotextbutton name="speechButton" rounded="Rounded.Medium">
126+
</kendo-speechtotextbutton>
127+
```
128+
{% endif %}
129+
130+
The following values are available for the `Rounded()` option:
131+
132+
- `Small`
133+
- `Medium`
134+
- `Large`
135+
- `Full`
136+
- `None`
137+
138+
### Icons
139+
140+
The SpeechToTextButton displays different icons based on its [operational state]({% slug htmlhelpers_overview_speechtotextbutton%}#button-states). When the component is in inactive mode (ready to start recording), it displays the `microphone-outline` icon by default. You can customize this using the `Icon()` configuration option to specify a different icon that better fits your application's design.
141+
142+
During active mode (while recording speech), the component automatically switches to the `stop-sm` icon to indicate that recording is in progress and can be stopped. The `StopIcon()` option allows you to override this default behavior with a custom icon of your choice.
143+
144+
Select the desired icons from the comprehensive list of available <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">built-in icons in {{ site.product }}</a>.
145+
146+
```HtmlHelper
147+
@(Html.Kendo().SpeechToTextButton()
148+
.Name("speechButton")
149+
.Icon("microphone-outline")
150+
.StopIcon("stop-sm")
151+
)
152+
```
153+
{% if site.core %}
154+
```TagHelper
155+
@addTagHelper *, Kendo.Mvc
156+
157+
<kendo-speechtotextbutton name="speechButton"
158+
icon="microphone-outline"
159+
stop-icon="stop-sm">
160+
</kendo-speechtotextbutton>
161+
```
162+
{% endif %}
163+
164+
## See Also
165+
166+
* [Appearance of the SpeechToTextButton for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/speechtotextbutton/appearance)
167+
* [Server-Side API of the SpeechToTextButton](/api/speechtotextbutton)
168+
{% if site.core %}
169+
* [Server-Side API of the SpeechToTextButton TagHelper](/api/taghelpers/speechtotextbutton)
170+
{% endif %}
171+
* [Client-Side API of the SpeechToTextButton](https://docs.telerik.com/kendo-ui/api/javascript/ui/speechtotextbutton)

0 commit comments

Comments
 (0)