You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/ai-assistview/speech/speech-to-text.md
+21-2Lines changed: 21 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,12 +18,23 @@ Before integrating `Speech-to-Text`, ensure the following:
18
18
1. The Syncfusion AI AssistView component is properly set up in your Blazor application.
19
19
-[Blazor Getting Started Guide](../getting-started)
20
20
21
-
2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai).
21
+
2. The AI AssistView component is integrated with Azure OpenAI
22
22
-[Integration of Azure OpenAI With Blazor AI AssistView component](../ai-integrations/openai-integration.md)
23
23
24
24
## Configure Speech-to-Text
25
25
26
-
To enable Speech-to-Text functionality, modify the `Home.razor` file to incorporate the Web Speech API. The [SpeechToText](https://blazor.syncfusion.com/documentation/speech-to-text/getting-started-web-app) component listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component.
26
+
To enable Speech-to-Text functionality in the Blazor AI AssistView component, update the `Home.razor` file to incorporate the Web Speech API.
27
+
28
+
The [SpeechToText](https://blazor.syncfusion.com/documentation/speech-to-text/getting-started-web-app) component listens to audio input from the device’s microphone, transcribes spoken words into text, and updates the AI AssistView’s editable footer using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_FooterTemplate) tag directive to display the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component.
29
+
30
+
### Configuration Options
31
+
32
+
***[`Language`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_Language)**: Specifies the language for speech recognition. For example:
33
+
34
+
*`en-US` for American English
35
+
*`fr-FR` for French
36
+
37
+
***[`AllowInterimResults`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_AllowInterimResults)**: Set to `true` to receive real-time (interim) recognition results, or `false` to receive only final results.
27
38
28
39
The `speechtotext.js` file handles operations related to the content of the editable footer, such as checking for meaningful input, clearing existing text, and updating the content with the transcribed value. Meanwhile, the `speechtotext.css` file styles the AI AssistView layout and ensures the component remains responsive across different screen sizes and devices.
29
40
@@ -268,6 +279,14 @@ function updateContentEditableDiv(element, value) {
268
279
269
280

270
281
282
+
## Error Handling
283
+
284
+
The `SpeechToText` component provides events to handle errors that may occur during speech recognition. For more information, refer to the [Error Handling](https://blazor.syncfusion.com/documentation/speech-to-text/speech-recognition#error-handling) section in the documentation.
285
+
286
+
## Browser Compatibility
287
+
288
+
The `SpeechToText` component relies on the [Speech Recognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition), which has limited browser support. Refer to the [Browser Compatibility](https://blazor.syncfusion.com/documentation/speech-to-text/speech-recognition#browser-support) section for detailed information.
Copy file name to clipboardExpand all lines: blazor/autocomplete/accessibility.md
+25-25Lines changed: 25 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor AutoComplete Component
11
11
12
-
The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/)specifications, and applies the `WAI-ARIA`roles, states, and properties along with`keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
12
+
The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component is designed with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/)guidance in mind and applies semantic roles, states, and properties along with comprehensive keyboard support. It provides strong screen reader and keyboard navigation support to assist users of assistive technologies (AT) and those who rely on the keyboard.
13
13
14
-
The Blazor AutoComplete 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.
14
+
The Blazor AutoComplete component follows 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/), and [WAI-ARIA](https://www.w3.org/TR/wai-aria/) specifications commonly used to evaluate accessibility.
15
15
16
16
The accessibility compliance for the Blazor AutoComplete component is outlined below.
17
17
@@ -41,44 +41,44 @@ The accessibility compliance for the Blazor AutoComplete component is outlined b
41
41
42
42
## WAI-ARIA attributes
43
43
44
-
The Blazor AutoComplete component uses the`combobox`role and each list item has an`option`role. The following `ARIA Attributes` denotes the AutoComplete state:
44
+
The AutoComplete uses the`combobox`role for its input and the `listbox` role for its popup list; each list item has an`option`role. The following ARIA attributes convey state and relationships:
45
45
46
46
|**Property**|**Functionalities**|
47
47
| --- | --- |
48
-
|`aria-haspopup`| Indicates whether the AutoComplete input element has a suggestion list or not. |
49
-
|`aria-expanded`|Indicates whether the suggestion list has expanded or not. |
50
-
|`aria-selected`| Indicates the selected option from the list. |
51
-
|`aria-readonly`| Indicates the readonly state of the AutoComplete element. |
52
-
|`aria-disabled`| Indicates whether the AutoComplete component is in disabled state or not.|
53
-
|`aria-activedescendent`|This attribute holds the ID of the active list item to focus its descendant child element. |
54
-
|`aria-owns`|This attribute contains the ID of the suggestion list to indicate popup as a child element. |
55
-
|`aria-autocomplete`|This attribute contains the ‘both’ to a list of options shows and the currently selected suggestion also shows inline. |
48
+
|`aria-haspopup`| Indicates that the input (combobox) has an associated popup list. |
49
+
|`aria-expanded`|Reflects whether the popup list is open (`true`) or closed (`false`). |
50
+
|`aria-selected`| Indicates the selected option within the listbox. |
51
+
|`aria-readonly`| Indicates the read-only state of the input. |
52
+
|`aria-disabled`| Indicates whether the component is disabled. |
53
+
|`aria-activedescendant`|Identifies the ID of the active (focused) option within the listbox. |
54
+
|`aria-owns`|References the ID of the popup listbox the combobox controls. |
55
+
|`aria-autocomplete`|Indicates the autocomplete behavior; typically `list` or `both` when inline completion is shown along with a list. |
56
56
57
57
## Keyboard interaction
58
58
59
-
You can use the following key shortcuts to access the AutoComplete without interruptions:
59
+
Use the following key shortcuts to operate the AutoComplete with the keyboard:
60
60
61
61
| Windows | Mac | Actions |
62
62
| --- | --- | --- |
63
63
|**Focus**|||
64
-
|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses on the first component of the sample. |
64
+
|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses the first component in the sample. |
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
69
69
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
70
70
|**Selection**|||
71
-
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. |
71
+
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item; when closed, toggles or confirms the value based on context. |
72
72
|**Popup Navigation**|||
73
-
| <kbd>Esc(Escape)</kbd> | <kbd>Escape</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
74
-
| <kbd>↓</kbd> | <kbd>↓</kbd> |Selects the first item in the AutoComplete when no item is selected. Otherwise, selects the item next to the currently selected item. |
75
-
| <kbd>↑</kbd> | <kbd>↑</kbd> |Selects the item previous to the currently selected one. |
76
-
| <kbd>Page down</kbd> | <kbd>Page down</kbd> | Scrolls down to the next page and selects the first item when the popup list opens. |
77
-
| <kbd>Page up</kbd> | <kbd>Page up</kbd> | Scrolls up to the previous page and selects the first item when the popup list opens. |
78
-
| <kbd>Home</kbd> | <kbd>Home</kbd> |Selects the first item. |
79
-
| <kbd>End</kbd> | <kbd>End</kbd> |Selects the last item. |
73
+
| <kbd>Esc</kbd> | <kbd>Escape</kbd> | Closes the popup list; the current selection remains unchanged. |
74
+
| <kbd>↓</kbd> | <kbd>↓</kbd> |When no item is selected, moves to the first item; otherwise, moves to the next item. |
75
+
| <kbd>↑</kbd> | <kbd>↑</kbd> |Moves to the previous item. |
76
+
| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scrolls down a page and focuses the first visible item. |
77
+
| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scrolls up a page and focuses the first visible item. |
78
+
| <kbd>Home</kbd> | <kbd>Home</kbd> |Moves focus to the first item. |
79
+
| <kbd>End</kbd> | <kbd>End</kbd> |Moves focus to the last item. |
80
80
81
-
N> In the following sample, disable the AutoComplete component using <kbd>t</kbd> keys.
81
+
N> In the following sample, pressing the <kbd>t</kbd> key toggles the disabled state of the AutoComplete. This is a sample-specific behavior, not a built-in shortcut.
82
82
83
83
{% highlight cshtml %}
84
84
@@ -90,9 +90,9 @@ N> In the following sample, disable the AutoComplete component using <kbd>t</kbd
90
90
91
91
## Ensuring accessibility
92
92
93
-
The Blazor AutoComplete component's accessibility levels are ensured through an[axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
93
+
The Blazor AutoComplete component’s accessibility levels are validated using the[axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
94
94
95
-
The accessibility compliance of the AutoComplete component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/autocomplete) in a new window to evaluate the accessibility of the AutoComplete component with accessibility tools.
95
+
The accessibility compliance of the AutoComplete component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/autocomplete) in a new window to evaluate the AutoComplete component with accessibility tools.
title: Custom value in Blazor AutoComplete Component | Syncfusion
4
-
description: Checkout and learn here all about Custom value in Syncfusion Blazor AutoComplete component and more.
4
+
description: Learn how to enable or disable custom values in the Syncfusion Blazor AutoComplete component using the AllowCustom property.
5
5
platform: Blazor
6
6
control: AutoComplete
7
7
documentation: ug
8
8
---
9
9
10
10
# Custom value enable and disable
11
11
12
-
The AutoComplete allows the users to give input as custom value, which is not required to present in predefined set of values. By default, this support is enabled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_AllowCustom)property. The custom value will be sent to post back handler when a form is about to be submitted.
12
+
The AutoComplete supports entering custom values that are not present in the predefined data set. This behavior is controlled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_AllowCustom)property, which is enabled by default. When enabled, a user-entered custom value is accepted and submitted with the form during postback. To restrict input to only the items in the data source, set `AllowCustom="false"`.
0 commit comments