Skip to content

Commit a51497c

Browse files
Merge pull request #7063 from syncfusion-content/985195-Merge-cp3
Update the common UG documentation changes
2 parents b4f4b09 + 66312e8 commit a51497c

File tree

516 files changed

+8386
-7591
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

516 files changed

+8386
-7591
lines changed

blazor/ai-assistview/speech/speech-to-text.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,23 @@ Before integrating `Speech-to-Text`, ensure the following:
1818
1. The Syncfusion AI AssistView component is properly set up in your Blazor application.
1919
- [Blazor Getting Started Guide](../getting-started)
2020

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
2222
- [Integration of Azure OpenAI With Blazor AI AssistView component](../ai-integrations/openai-integration.md)
2323

2424
## Configure Speech-to-Text
2525

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.
2738

2839
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.
2940

@@ -268,6 +279,14 @@ function updateContentEditableDiv(element, value) {
268279

269280
![Integrating Speech-to-Text with AI AssistView](../images/assist-stt.png)
270281

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.
289+
271290
## See Also
272291

273292
* [Text-to-Speech](./text-to-speech.md)

blazor/autocomplete/accessibility.md

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ documentation: ug
99

1010
# Accessibility in Blazor AutoComplete Component
1111

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.
1313

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.
1515

1616
The accessibility compliance for the Blazor AutoComplete component is outlined below.
1717

@@ -41,44 +41,44 @@ The accessibility compliance for the Blazor AutoComplete component is outlined b
4141

4242
## WAI-ARIA attributes
4343

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:
4545

4646
| **Property** | **Functionalities** |
4747
| --- | --- |
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. |
5656

5757
## Keyboard interaction
5858

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:
6060

6161
| Windows | Mac | Actions |
6262
| --- | --- | --- |
6363
|**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. |
6565
|**Input Navigation**| | |
66-
| <kbd>Alt</kbd> +<kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
66+
| <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
6767
| <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup list. |
6868
| <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. |
6969
| <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. |
7070
|**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. |
7272
|**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. |
8080

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.
8282

8383
{% highlight cshtml %}
8484

@@ -90,9 +90,9 @@ N> In the following sample, disable the AutoComplete component using <kbd>t</kbd
9090

9191
## Ensuring accessibility
9292

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 components accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
9494

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.
9696

9797
## See also
9898

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
---
22
layout: post
33
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.
55
platform: Blazor
66
control: AutoComplete
77
documentation: ug
88
---
99

1010
# Custom value enable and disable
1111

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"`.
1313

1414
{% highlight Razor %}
1515

1616
{% include_relative code-snippet/custom-value/custom-value-enable.razor %}
1717

18-
{% endhighlight %}
19-
18+
{% endhighlight %}

0 commit comments

Comments
 (0)