Skip to content

Commit eb6fff1

Browse files
P1l3T0P1l3T0
authored
feat(sttb): speech to text button documentation (#720)
1 parent 3b2a8da commit eb6fff1

File tree

21 files changed

+1050
-0
lines changed

21 files changed

+1050
-0
lines changed

‎controls/speechtotextbutton/accessibility-and-internationalization/internationalization.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Internationalization
3+
page_title: SpeechToTextButton Internationalization
4+
description: "Internationalization of the Telerik WebForms SpeechToTextButton component."
5+
slug: speechtotextbutton/accessibility/internationalization
6+
tags: internationalization
7+
position: 1
8+
---
9+
10+
# Internationalization
11+
12+
The SpeechToTextButton supports Internationalization by its `Messages` collection. The collection consists of text messages, used as aria-labels by the control. Users can use this option to customize or localize the messages.
13+
14+
Example
15+
16+
````ASP.NET
17+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton1">
18+
<Messages NotInitialized="Not Initializaed yet" Start="Started" Stop="Stopped" Unsupported="This is not supported" />
19+
</telerik:RadSpeechToTextButton>
20+
````
21+
22+
The available Messages can be found in the [Server Properties article]({%slug speechtotextbutton/server-side-programming/properties#messages%}).

‎controls/speechtotextbutton/accessibility-and-internationalization/overview.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Overview
3+
page_title: SpeechToTextButton Accessibility
4+
description: Get started with the WebForms SpeechToTextButton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2.
5+
slug: speechtotextbutton/accessibility/overview
6+
position: 0
7+
---
8+
9+
# SpeechToTextButton Accessibility
10+
11+
The SpeechToTextButton is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
12+
13+
Out of the box, the WebForms SpeechToTextButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
14+
15+
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.
16+
17+
## WAI-ARIA
18+
19+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
20+
21+
| Selector | Attribute | Usage |
22+
| ----------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------- |
23+
| `.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`. |
24+
| | `aria-pressed=true/false` | Announced the toggle behaviour of the button. |
25+
26+
## Resources
27+
28+
[WAI-ARIA Authoring Practices: Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
29+
30+
## Section 508
31+
32+
The SpeechToTextButton is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
33+
34+
## Testing
35+
36+
The SpeechToTextButton has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
37+
38+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
39+
40+
### Screen Readers
41+
42+
The SpeechToTextButton has been tested with the following screen readers and browsers combinations:
43+
44+
| Environment | Tool |
45+
| -------------- | ---- |
46+
| Firefox | NVDA |
47+
| Chrome | JAWS |
48+
| Microsoft Edge | JAWS |
49+
50+
### Automated Testing
51+
52+
The SpeechToTextButton has been tested with [axe-core](https://github.com/dequelabs/axe-core).
53+
54+
### Test Example
55+
56+
A live test example of the SpeechToTextButton component could be found here: https://demos.telerik.com/aspnet-ajax/speechtotextbutton/accessibility-and-internationalization/rtl/defaultcs.aspx

‎controls/speechtotextbutton/appearance.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
title: Appearance
3+
page_title: SpeechToTextButton Appearance
4+
description: "Learn how to set the options to change the appearance such as, sizes, border radiuses, fill modes and theme colors."
5+
slug: speechtotextbutton/appearance
6+
tags: appearance,speechtotextbutton
7+
published: True
8+
position: 2
9+
---
10+
11+
# Appearance
12+
13+
In this article, you will find information about the styling options and rendering of the WebForms SpeechToTextButton.
14+
15+
For a live example, visit the [Appearance Demo of the SpeechToTextButton](https://demos.telerik.com/aspnet-ajax/speechtotextbutton/appearance/defaultcs.aspx).
16+
17+
## Options
18+
19+
The WebForms SpeechToTextButton supports the following styling options:
20+
21+
- [`Icon`](#icon) - Configures the icon displayed when the button is in inactive state.
22+
- [`StopIcon`](#stopicon) - Configures the icon displayed when the button is speech recognition state.
23+
- [`FillMode`](#fillmode) - Configures how the color is applied to the component.
24+
- [`Rounded`](#rounded) - Configures the border radius of the component.
25+
- [`Size`](#size) - Configures the overall size of the component.
26+
- [`ThemeColor`](#theme-color) - Configures what color will be applied to the component.
27+
28+
## Icon
29+
30+
The `Icon` option determines which icon is displayed when the button is not in the active state. The default is the `microphone-outline` icon.
31+
32+
!["SpeechToTextButton Icon"](images/sttb-getting-started.png "SpeechToTextButton Icon")
33+
34+
Example
35+
36+
````ASP.NET
37+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton1" Icon="headset" />
38+
````
39+
40+
## StopIcon
41+
42+
The `StopIcon` option determines which icon is displayed when the button is in the active state (speech recognition in progress). The default is the `stop-sm` icon.
43+
44+
!["SpeechToTextButton Stop Icon"](images/sttb-stop-icon.png "SpeechToTextButton Stop Icon")
45+
46+
Example
47+
48+
````ASP.NET
49+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton1" StopIcon="pause-sm" />
50+
````
51+
52+
## FillMode
53+
54+
The `FillMode` option controls how the color is applied to the button.
55+
56+
!["SpeechToTextButton Fill Mode"](images/sttb-fill-mode.png "SpeechToTextButton Fill Mode")
57+
58+
Available values:
59+
60+
- `Solid` - Solid background color (default)
61+
- `Outline` - Outlined border with transparent background
62+
- `Flat` - No border or background color
63+
- `None`
64+
65+
````ASP.NET
66+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton1" FillMode="Solid" />
67+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton2" FillMode="Outline" />
68+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton3" FillMode="Flat" />
69+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton4" FillMode="None" />
70+
````
71+
72+
## Rounded
73+
74+
The `Rounded` option controls the border radius of the button.
75+
76+
!["SpeechToTextButton Rounded"](images/sttb-rounded.png "SpeechToTextButton Rounded")
77+
78+
Available values:
79+
80+
- `Small` - Small border radius
81+
- `Medium` - Medium border radius (default)
82+
- `Large` - Large border radius
83+
- `Full` - Fully rounded corners (pill shape)
84+
- `None`
85+
86+
````ASP.NET
87+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton1" Rounded="Small" />
88+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton2" Rounded="Medium" />
89+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton3" Rounded="Large" />
90+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton4" Rounded="Full" />
91+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton5" Rounded="None" />
92+
````
93+
94+
## Size
95+
96+
The `Size` option controls how big or small the rendered button looks.
97+
98+
99+
!["SpeechToTextButton Size"](images/sttb-size.png "SpeechToTextButton Size")
100+
101+
Available values:
102+
103+
- `Small` - Small size
104+
- `Medium` - Medium size (default)
105+
- `Large` - Large size
106+
- `None`
107+
108+
````ASP.NET
109+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton1" Size="Small" />
110+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton2" Size="Medium" />
111+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton3" Size="Large" />
112+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton5" Size="None" />
113+
````
114+
115+
## Theme Color
116+
117+
The `ThemeColor` option controls the color applied to the button.
118+
119+
!["SpeechToTextButton Theme Color"](images/sttb-theme-color.png "SpeechToTextButton Theme Color")
120+
121+
Available values:
122+
123+
- `Primary` - Primary accent color
124+
- `Secondary` - Secondary accent color
125+
- `Tertiary` - Tertiary accent color
126+
- `Info` - Informational color
127+
- `Success` - Positive action color
128+
- `Warning` - Attention‑drawing color
129+
- `Error` - Negative action color
130+
- `Base` - Default color based on the current theme
131+
132+
````ASP.NET
133+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton1" ThemeColor="Primary" />
134+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton2" ThemeColor="Secondary" />
135+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton3" ThemeColor="Tertiary" />
136+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton4" ThemeColor="Info" />
137+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton5" ThemeColor="Success" />
138+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton6" ThemeColor="Warning" />
139+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton7" ThemeColor="Error" />
140+
<telerik:RadSpeechToTextButton runat="server" ID="RadSpeechToTextButton8" ThemeColor="Base" />
141+
````
142+
143+
## Button States
144+
145+
* **Inactive State** - Default state before speech recognition begins
146+
* **Active State** - Indicates that speech recognition is currently in progress
147+
* **Error State** - Displays when speech recognition encounters an error or is not supported by the browser
148+
149+
## Next Steps
150+
151+
- [Accessibility]({%slug speechtotextbutton/accessibility/overview%})
152+
- [Client-side Programming]({%slug speechtotextbutton/client-side-programming/overview%})
153+
- [Server-side Programming]({%slug speechtotextbutton/server-side-programming/overview%})

‎controls/speechtotextbutton/client-side-programming/enums.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: Enums
3+
page_title: SpeechToTextButton Client-side Enums
4+
description: Client-side Enums of the Telerik WebForms SpeechToTextButton component
5+
slug: speechtotextbutton/client-side-programming/enums
6+
tags: speechtotextbutton,javascript,enums
7+
published: True
8+
position: 3
9+
---
10+
11+
# Enums
12+
13+
Telerik WebForms SpeechToTextButton specific Client-side Enums.
14+
15+
## FillMode
16+
17+
The enum type: `Telerik.Web.UI.RadSpeechToTextButtonFillMode`
18+
19+
| Enum member | Value |
20+
| ------------------------------------------------------ | ----- |
21+
| `Telerik.Web.UI.RadSpeechToTextButtonFillMode.None` | `0` |
22+
| `Telerik.Web.UI.RadSpeechToTextButtonFillMode.Solid` | `1` |
23+
| `Telerik.Web.UI.RadSpeechToTextButtonFillMode.Outline` | `2` |
24+
| `Telerik.Web.UI.RadSpeechToTextButtonFillMode.Flat` | `3` |
25+
26+
## IntegrationMode
27+
28+
The enum type: `Telerik.Web.UI.RadSpeechToTextButtonIntegrationMode`
29+
30+
| Enum member | Value |
31+
| --------------------------------------------------------------- | ----- |
32+
| `Telerik.Web.UI.RadSpeechToTextButtonIntegrationMode.WebSpeech` | `0` |
33+
| `Telerik.Web.UI.RadSpeechToTextButtonIntegrationMode.None` | `1` |
34+
35+
## Rounded
36+
37+
The enum type: `Telerik.Web.UI.RadSpeechToTextButtonRounded`
38+
39+
| Enum member | Value |
40+
| ---------------------------------------------------- | ----- |
41+
| `Telerik.Web.UI.RadSpeechToTextButtonRounded.None` | `0` |
42+
| `Telerik.Web.UI.RadSpeechToTextButtonRounded.Small` | `1` |
43+
| `Telerik.Web.UI.RadSpeechToTextButtonRounded.Medium` | `2` |
44+
| `Telerik.Web.UI.RadSpeechToTextButtonRounded.Large` | `3` |
45+
| `Telerik.Web.UI.RadSpeechToTextButtonRounded.Full` | `4` |
46+
47+
## Size
48+
49+
The enum type: `Telerik.Web.UI.RadSpeechToTextButtonSize`
50+
51+
| Enum member | Value |
52+
| ------------------------------------------------- | ----- |
53+
| `Telerik.Web.UI.RadSpeechToTextButtonSize.None` | `0` |
54+
| `Telerik.Web.UI.RadSpeechToTextButtonSize.Small` | `1` |
55+
| `Telerik.Web.UI.RadSpeechToTextButtonSize.Medium` | `2` |
56+
| `Telerik.Web.UI.RadSpeechToTextButtonSize.Large` | `3` |
57+
58+
## ThemeColor
59+
60+
The enum type: `Telerik.Web.UI.RadSpeechToTextButtonThemeColor`
61+
62+
| Enum member | Value |
63+
| ---------------------------------------------------------- | ----- |
64+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Primary` | `0` |
65+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Secondary` | `1` |
66+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Tertiary` | `2` |
67+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Info` | `3` |
68+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Success` | `4` |
69+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Warning` | `5` |
70+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Error` | `6` |
71+
| `Telerik.Web.UI.RadSpeechToTextButtonThemeColor.Base` | `7` |

0 commit comments

Comments
 (0)