Skip to content
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
21 changes: 20 additions & 1 deletion blazor/ai-assistview/speech/speech-to-text.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,18 @@ Before integrating `Speech-to-Text`, ensure the following:

## Configure Speech-to-Text

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.
To enable Speech-to-Text functionality in the Blazor AI AssistView component, update 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 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.

### Configuration Options

* **[`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:

* `en-US` for American English
* `fr-FR` for French

* **[`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.

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.

Expand Down Expand Up @@ -268,6 +279,14 @@ function updateContentEditableDiv(element, value) {

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

## Error Handling

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.

## Browser Compatibility

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.

## See Also

* [Text-to-Speech](./text-to-speech.md)
50 changes: 25 additions & 25 deletions blazor/autocomplete/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ documentation: ug

# Accessibility in Blazor AutoComplete Component

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

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

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

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

## WAI-ARIA attributes

The Blazor AutoComplete component uses the `combobox` role and each list item has an `option` role. The following `ARIA Attributes` denotes the AutoComplete state:
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:

| **Property** | **Functionalities** |
| --- | --- |
| `aria-haspopup`| Indicates whether the AutoComplete input element has a suggestion list or not. |
| `aria-expanded` | Indicates whether the suggestion list has expanded or not. |
| `aria-selected` | Indicates the selected option from the list. |
| `aria-readonly` | Indicates the readonly state of the AutoComplete element. |
| `aria-disabled` | Indicates whether the AutoComplete component is in disabled state or not.|
| `aria-activedescendent` | This attribute holds the ID of the active list item to focus its descendant child element. |
| `aria-owns` | This attribute contains the ID of the suggestion list to indicate popup as a child element. |
| `aria-autocomplete` | This attribute contains the ‘both’ to a list of options shows and the currently selected suggestion also shows inline. |
| `aria-haspopup` | Indicates that the input (combobox) has an associated popup list. |
| `aria-expanded` | Reflects whether the popup list is open (`true`) or closed (`false`). |
| `aria-selected` | Indicates the selected option within the listbox. |
| `aria-readonly` | Indicates the read-only state of the input. |
| `aria-disabled` | Indicates whether the component is disabled. |
| `aria-activedescendant` | Identifies the ID of the active (focused) option within the listbox. |
| `aria-owns` | References the ID of the popup listbox the combobox controls. |
| `aria-autocomplete` | Indicates the autocomplete behavior; typically `list` or `both` when inline completion is shown along with a list. |

## Keyboard interaction

You can use the following key shortcuts to access the AutoComplete without interruptions:
Use the following key shortcuts to operate the AutoComplete with the keyboard:

| Windows | Mac | Actions |
| --- | --- | --- |
|**Focus**| | |
|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses on the first component of the sample. |
|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses the first component in the sample. |
|**Input Navigation**| | |
| <kbd>Alt</kbd> +<kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
| <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
| <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup list. |
| <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. |
| <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. |
|**Selection**| | |
| <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. |
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item; when closed, toggles or confirms the value based on context. |
|**Popup Navigation**| | |
| <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. |
| <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. |
| <kbd>↑</kbd> | <kbd>↑</kbd> | Selects the item previous to the currently selected one. |
| <kbd>Page down</kbd> | <kbd>Page down</kbd> | Scrolls down to the next page and selects the first item when the popup list opens. |
| <kbd>Page up</kbd> | <kbd>Page up</kbd> | Scrolls up to the previous page and selects the first item when the popup list opens. |
| <kbd>Home</kbd> | <kbd>Home</kbd> | Selects the first item. |
| <kbd>End</kbd> | <kbd>End</kbd> | Selects the last item. |
| <kbd>Esc</kbd> | <kbd>Escape</kbd> | Closes the popup list; the current selection remains unchanged. |
| <kbd>↓</kbd> | <kbd>↓</kbd> | When no item is selected, moves to the first item; otherwise, moves to the next item. |
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves to the previous item. |
| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scrolls down a page and focuses the first visible item. |
| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scrolls up a page and focuses the first visible item. |
| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to the first item. |
| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to the last item. |

N> In the following sample, disable the AutoComplete component using <kbd>t</kbd> keys.
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.

{% highlight cshtml %}

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

## Ensuring accessibility

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

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

## See also

Expand Down
7 changes: 3 additions & 4 deletions blazor/autocomplete/custom-value.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
---
layout: post
title: Custom value in Blazor AutoComplete Component | Syncfusion
description: Checkout and learn here all about Custom value in Syncfusion Blazor AutoComplete component and more.
description: Learn how to enable or disable custom values in the Syncfusion Blazor AutoComplete component using the AllowCustom property.
platform: Blazor
control: AutoComplete
documentation: ug
---

# Custom value enable and disable

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

{% highlight Razor %}

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

{% endhighlight %}

{% endhighlight %}
Loading