Skip to content

Commit 8382e9c

Browse files
IndrajithSrinivasanIndrajithSrinivasan
authored
Merge pull request #6693 from syncfusion-content/983717-UG-docs-STT-1
983717: Enhanced the blazor documentation for Speech-to-text
2 parents 486e7f9 + e9488c7 commit 8382e9c

File tree

3 files changed

+54
-60
lines changed

3 files changed

+54
-60
lines changed

‎blazor/speech-to-text/accessibility.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ control: SpeechToText
77
documentation: ug
88
---
99

10-
# Accessibility in Blazor SpeechToText component
10+
# Accessibility in Blazor SpeechToText Component
1111

1212
The SpeechToText component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
1313

@@ -37,26 +37,26 @@ The accessibility compliance for the SpeechToText component is outlined below.
3737

3838
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
3939

40-
## WAI-ARIA attributes
40+
## WAI-ARIA Attributes
4141

4242
The following ARIA attributes are used in the SpeechToText component:
4343

44-
| Attributes | Purpose |
45-
| ------------ | ----------------------- |
46-
| `aria-label` | Provides an accessible name for the SpeechToText button. |
44+
| Attribute | Purpose |
45+
| :--- | :--- |
46+
| `aria-label` | Provides an accessible name for the SpeechToText button, clearly identifying its function to screen readers. |
4747

48-
## Keyboard interaction
48+
## Keyboard Interaction
4949

50-
The following keyboard shortcuts are supported by the SpeechToText component.
50+
Users can interact with the SpeechToText component using the following keyboard shortcuts.
5151

52-
| Windows | Mac | Actions |
53-
| --- | --- | --- |
54-
| <kbd>Enter</kbd>/<kbd>Space</kbd> | <kbd>Enter</kbd>/<kbd>Space</kbd> | When the SpeechToText button has focus, pressing the enter/space key changes the state of the button. |
52+
| Windows & Linux | Mac | Action |
53+
| :--- | :--- | :--- |
54+
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | When the SpeechToText button is focused, this key combination starts or stops the speech recognition process. |
5555

56-
## Ensuring accessibility
56+
## Ensuring Accessibility
5757

5858
The Blazor SpeechToText component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
5959

60-
## See also
60+
## See Also
6161

6262
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)

‎blazor/speech-to-text/appearance.md‎

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,31 @@ control: SpeechToText
77
documentation: ug
88
---
99

10-
# Appearance in Blazor SpeechToText component
10+
# Appearance in Blazor SpeechToText Component
1111

12-
## Customizing the button
13-
14-
You can use the [ButtonSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_ButtonSettings) property to customize the appearance of the start and stop buttons in the speech to text conversion.
15-
16-
### Setting start content
17-
18-
You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_Text) property to define text content for the listening start state in the SpeechToText button.
12+
This guide explains how to customize the visual appearance of the Blazor SpeechToText component.
1913

20-
### Setting stop content
14+
## Customizing the button
2115

22-
You can use the [StopStateText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_StopStateText) property to define text content for the listening stop state in the SpeechToText button.
16+
The [ButtonSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_ButtonSettings) property allows for detailed customization of the start and stop buttons.
2317

24-
### Setting iconcss
18+
### Text content
2519

26-
You can use the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_IconCss) property to apply a CSS class to customize the icon appearance for the listening start state.
20+
Define the text for the button's start and stop states using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_Text) and [StopStateText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_StopStateText) properties.
2721

28-
### Setting stop iconcss
22+
### Icon
2923

30-
You can use the [StopIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_StopIconCss) property to apply a CSS class to customize the icon appearance for the listening stop state.
24+
Set a custom icon for the button's start and stop states by applying CSS classes to the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_IconCss) and [StopIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_StopIconCss) properties.
3125

32-
### Setting icon position
26+
### Icon position
3327

34-
You can display the icon on the top, bottom, left, or right side of the button text content using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_IconPosition) property.
28+
Use the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_IconPosition) property to display the icon at the top, bottom, left, or right of the button's text.
3529

36-
### Setting primary
30+
### Primary button
3731

38-
You can use the [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_isPrimary) property to configure the button as a primary action button.
32+
Configure the button as a primary action button by setting the [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_IsPrimary) property to `true`.
3933

40-
Below code sample demonstrates how to configure the button with above mentioned properties.
34+
The following example demonstrates how to configure these button settings.
4135

4236
{% tabs %}
4337
{% highlight razor %}
@@ -81,21 +75,17 @@ Below code sample demonstrates how to configure the button with above mentioned
8175

8276
## Customizing the tooltips
8377

84-
You can use the [TooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_TooltipSettings) property to customize the content and positions of the tooltip.
78+
The [TooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_TooltipSettings) property allows customization of the tooltip's content and position.
8579

8680
### Setting start content
8781

88-
You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextTooltipSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextTooltipSettings_Text) property to customize the content to be displayed in the tooltip when the speech recognition begins.
89-
90-
### Setting stop content
91-
92-
You can use the [StopStateText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextTooltipSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextTooltipSettings_StopStateText) property to customize the stop button tooltip text which is displayed on-hover.
82+
Use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextTooltipSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextTooltipSettings_Text) and [StopStateText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextTooltipSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextTooltipSettings_StopStateText) properties to set the content for the start and stop state tooltips.
9383

94-
### Setting tooltip position
84+
### Tooltip position
9585

96-
You can use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextTooltipSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextTooltipSettings_Position) property to determine the placement of tooltips relative to the button.
86+
Determine where the tooltip appears relative to the button using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextTooltipSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextTooltipSettings_Position) property.
9787

98-
Below code sample demonstrates how to configure the tooltip settings with above mentioned properties.
88+
This example shows how to configure the tooltip settings.
9989

10090
{% tabs %}
10191
{% highlight razor %}
@@ -133,24 +123,28 @@ Below code sample demonstrates how to configure the tooltip settings with above
133123

134124
![Blazor SpeechToText Tooltip](images/speechtotext-tooltip.png)
135125

136-
## Setting button styles
126+
## Styling
127+
128+
Customize the appearance of the SpeechToText component by applying predefined styles or creating custom styles using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_CssClass) property.
129+
130+
### Predefined styles
137131

138-
The SpeechToText component supports the following predefined styles that can be defined using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_CssClass) property. You can customize by adding the cssClass property with the below defined class.
132+
The component supports several built-in styles for common use cases.
139133

140-
| CssClass | Description |
141-
| -------- | -------- |
142-
| `e-primary` | Used to represent a primary action. |
143-
| `e-outline` | Used to represent an appearance of button with outline. |
144-
| `e-info` | Used to represent an informative action. |
145-
| `e-success` | Used to represent a positive action. |
146-
| `e-warning` | Used to represent an action with caution. |
147-
| `e-danger` | Used to represent a negative action. |
134+
| CssClass | Description |
135+
|-------------|-----------------------------------------------|
136+
| `e-primary` | Represents a primary action. |
137+
| `e-outline` | Renders the button with an outline style. |
138+
| `e-info` | Represents an informative action. |
139+
| `e-success` | Represents a positive action. |
140+
| `e-warning` | Represents an action that requires caution. |
141+
| `e-danger` | Represents a negative or destructive action. |
148142

149-
## Setting cssclass
143+
### Custom styles
150144

151-
You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_CssClass) property to customize the appearance of the SpeechToText component.
145+
Custom CSS rules can be applied by assigning a class name to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_CssClass) property, enabling tailored styling for the component.
152146

153-
Below code sample demonstrates how to configure cssclass and customize the button.
147+
The following example demonstrates how to apply a custom CSS class to change the button's background color, text color, and border radius.
154148

155149
{% tabs %}
156150
{% highlight razor %}

‎blazor/speech-to-text/events.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ control: SpeechToText
77
documentation: ug
88
---
99

10-
# Events in Blazor SpeechToText component
10+
# Events in Blazor SpeechToText Component
1111

12-
This section describes the SpeechToText events that will be triggered when appropriate actions are performed. The following events are available in the SpeechToText component.
12+
The Blazor SpeechToText component provides a set of events that are triggered when specific actions occur during its lifecycle and operation. The following events are available:
1313

1414
|Name|Args|Description|
1515
|---|---|---|
16-
|Created|EventCallback|Triggers when the SpeechToText component's rendering is fully completed|
17-
|SpeechRecognitionStarted|SpeechRecognitionStartedEventArgs|Triggers when speech recognition begins|
18-
|SpeechRecognitionStopped|SpeechRecognitionStoppedEventArgs|Triggers when speech recognition stops|
19-
|SpeechRecognitionError|SpeechRecognitionErrorEventArgs|Triggers when an error occurs during speech recognition or while listening. For list of possible errors, refer to the [Error handling](./speech-recognition#error-handling) section.|
20-
|TranscriptChanging|TranscriptChangeEventArgs|Triggers when a transcription change occurs during the speech recognition.|
16+
|Created|EventCallback|Triggers when the SpeechToText component's rendering is fully completed.|
17+
|SpeechRecognitionStarted|SpeechRecognitionStartedEventArgs|Triggers when speech recognition begins.|
18+
|SpeechRecognitionStopped|SpeechRecognitionStoppedEventArgs|Triggers when speech recognition stops.|
19+
|SpeechRecognitionError|SpeechRecognitionErrorEventArgs|Triggers when an error occurs during speech recognition or while listening. For a list of possible errors, refer to the [Error handling](./speech-recognition#error-handling) section.|
20+
|TranscriptChanging|TranscriptChangeEventArgs|Triggers when a transcription change occurs during speech recognition.|
2121

2222
The following example demonstrates how to configure the Blazor SpeechToText events.
2323

0 commit comments

Comments
 (0)