Skip to content

docs(903622): cherry picked changes to hotfix #4899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 19, 2024
Merged

docs(903622): cherry picked changes to hotfix #4899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,6 +613,7 @@
<li><a href="/blazor/ai-assistview/custom-view">Custom views</a></li>
<li><a href="/blazor/ai-assistview/templates">Templates</a></li>
<li><a href="/blazor/ai-assistview/appearance">Appearance</a></li>
<li><a href="/blazor/ai-assistview/accessibility">Accessibility</a></li>
<li><a href="/blazor/ai-assistview/methods">Methods</a></li>
<li><a href="/blazor/ai-assistview/events">Events</a></li>
<li>
Expand Down
75 changes: 75 additions & 0 deletions blazor/ai-assistview/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
---
layout: post
title: Accessibility in Blazor AI AssistView Component | Syncfusion
description: Checkout and learn about Accessibility and Keyboard interaction with Blazor AI AssistView component and more details.
platform: Blazor
control: AI AssistView
documentation: ug
---

# Accessibility in Blazor AI AssistView component

The Blazor AI AssistView 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 accessibility compliance for the Blazor AI AssistView component is outlined below.

| Accessibility Criteria | Compatibility |
| -- | -- |
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |

<style>
.post .post-content img {
display: inline-block;
margin: 0.5em 0;
}
</style>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>

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

## WAI-ARIA attributes

The following ARIA attributes are used in the AI AssistView component:

| Attributes | Purpose |
| ------------ | ----------------------- |
| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. |
| `role=toolbar` | Specifies that the element is a toolbar. |
| `aria-label` | Defines a string value that labels an interactive element for accessibility. |
| `aria-orientation` | Specifies the orientation of the toolbar. |
| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. |
| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. |

## Keyboard interaction

The following keyboard shortcuts are supported by the AI AssistView component.

| **Press** | **To do this** |
| --- | --- |
| <kbd>Enter</kbd> | Select the focused item. |
| <kbd>Tab</kbd> | Moves focus forward through the interactive elements. |
| <kbd>Shift + Tab</kbd> | Moves focus backward through the interactive elements. |
<b>AI AssistView Toolbars</b>||
| <kbd>Left Arrow</kbd> | Focuses the previous toolbar element. |
| <kbd>Right Arrow</kbd> | Focuses the next toolbar element. |
| <kbd>Enter / Space</kbd> | Select the focused item or activate the selected option. |
| <kbd>Home</kbd> | Moves focus to the first toolbar element. |
| <kbd>End</kbd> | Moves focus to the last toolbar element. |

## Ensuring accessibility

The Blazor AI AssistView component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.

## See also

* [Accessibility in Syncfusion Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
22 changes: 10 additions & 12 deletions blazor/ai-assistview/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ documentation: ug

## Setting width

You can use the `Width` property to set the width of the AI AssistView.
You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Width) property to set the width of the AI AssistView. The default value is `100%`.

```cshtml

@using Syncfusion.Blazor.InteractiveChat

<div class="aiassist-container" style="height: 350px; width: 750px;">
<div class="aiassist-container" style="height: 350px;">
<SfAIAssistView Width="650px" PromptRequested="@PromptRequest"></SfAIAssistView>
</div>

Expand All @@ -36,15 +36,13 @@ You can use the `Width` property to set the width of the AI AssistView.

## Setting height

You can use the `Height` property to set the height of the AI AssistView.

> By default, the component `Width` & `Height` will be inherited based on the parent dimensions.
You can use the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Height) property to set the height of the AI AssistView. The default value is `100%`.

```cshtml

@using Syncfusion.Blazor.InteractiveChat

<div class="aiassist-container" style="height: 450px; width: 650px;">
<div class="aiassist-container" style="width: 650px;">
<SfAIAssistView Height="350px" PromptRequested="@PromptRequest"></SfAIAssistView>
</div>

Expand All @@ -63,14 +61,14 @@ You can use the `Height` property to set the height of the AI AssistView.

## CssClass

You can customize the appearance of the AI AssistView component by using the `CssClass` property.
You can customize the appearance of the AI AssistView component by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_CssClass) property.

```cshtml

@using Syncfusion.Blazor.InteractiveChat

<div class="aiassist-container" style="height: 350px; width: 650px;">
<SfAIAssistView CssClass="e-custom" PromptRequested="@PromptRequest"></SfAIAssistView>
<SfAIAssistView CssClass="custom-container" PromptRequested="@PromptRequest"></SfAIAssistView>
</div>

@code {
Expand All @@ -82,18 +80,18 @@ You can customize the appearance of the AI AssistView component by using the `Cs
}
}
<style>
.e-aiassistview.e-custom {
.e-aiassistview.custom-container {
border-color: #e0e0e0;
background-color: #f4f4f4;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}

.e-aiassistview.e-custom .e-view-header .e-toolbar,
.e-aiassistview.e-custom .e-view-header .e-toolbar-items {
.e-aiassistview.custom-container .e-view-header .e-toolbar,
.e-aiassistview.custom-container .e-view-header .e-toolbar-items {
background: #d5d5d5;
}

.e-aiassistview.e-custom .e-view-content .e-input-group {
.e-aiassistview.custom-container .e-view-content .e-input-group {
border: 3px solid #e0e0e0;
}
</style>
Expand Down
20 changes: 10 additions & 10 deletions blazor/ai-assistview/assist-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

## Setting prompt text

You can use the `Prompt` property to define the prompt text for the AI AssistView component.
You can use the [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompt) property to define the prompt text for the AI AssistView component.

```cshtml

Expand All @@ -36,7 +36,7 @@ You can use the `Prompt` property to define the prompt text for the AI AssistVie

## Setting prompt placeholder

You can use the `PromptPlaceholder` property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`.
You can use the [PromptPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptPlaceholder) property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`.

```cshtml

Expand All @@ -61,7 +61,7 @@ You can use the `PromptPlaceholder` property to set the placeholder text for the

## Prompt-response collection

By using the `Prompts` property, you can specify the collection of prompts and responses, allowing you to load pre-defined pairs or individual entries ensuring the AI AssistView component is initialized with the configured data.
You can use the [Prompts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompts) property to initialize the component with the configured data as a collection of prompts and responses or individual entries.

The `Prompts` collection stores all the prompts and responses generated.

Expand Down Expand Up @@ -94,7 +94,7 @@ The `Prompts` collection stores all the prompts and responses generated.

## Adding prompt suggestions

By using the `PromptSuggestions` property, you can configure the list of suggested prompts in the AI AssistView. Users can choose from these suggestions to use as their prompts.
You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience.

```cshtml

Expand Down Expand Up @@ -122,7 +122,7 @@ By using the `PromptSuggestions` property, you can configure the list of suggest

### Adding suggestion headers

You can use the `PromptSuggestionsHeader` property to set the header text for the prompt suggestions in the AI AssistView.
You can use the [PromptSuggestionsHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestionsHeader) property to set the header text for the prompt suggestions in the AI AssistView.

```cshtml

Expand All @@ -148,9 +148,9 @@ You can use the `PromptSuggestionsHeader` property to set the header text for th

![Blazor AI AssistView PromptSuggestionsHeader](./images/assistview-suggestion-header.png)

## Adding prompt iconCSS
## Adding prompt iconCss

You can customize the appearance of the prompter avatar by using the `PromptIconCss` property.
You can customize the appearance of the prompter avatar by using the [PromptIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptIconCss) property.

```cshtml

Expand Down Expand Up @@ -179,16 +179,16 @@ You can customize the appearance of the prompter avatar by using the `PromptIcon

![Blazor AI AssistView PromptIcon](./images/assistview-prompt-icon.png)

## Adding response iconCSS
## Adding response iconCss

You can use the `ResponseIconCss` property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon.
You can use the [ResponseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ResponseIconCss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon.

```cshtml

@using Syncfusion.Blazor.InteractiveChat

<div class="aiassist-container" style="height: 350px; width: 650px;">
<SfAIAssistView Prompts="@prompts" PromptRequested="@PromptRequest" ResponseIconCss="e-icons e-star-filled"></SfAIAssistView>
<SfAIAssistView Prompts="@prompts" PromptRequested="@PromptRequest" ResponseIconCss="e-icons e-bullet-4"></SfAIAssistView>
</div>

@code {
Expand Down
48 changes: 36 additions & 12 deletions blazor/ai-assistview/custom-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The Blazor AI AssistView allows you to add different views available for user in

#### Setting view type

You can change the type of view by using the `AssistView` and `CustomView` tag directive.
You can set the type of view by using the [AssistView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html) and [CustomView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.CustomView.html) tag directive.

```cshtml

Expand All @@ -25,7 +25,11 @@ You can change the type of view by using the `AssistView` and `CustomView` tag d
<SfAIAssistView PromptRequested="@PromptRequest">
<AssistViews>
<AssistView></AssistView>
<CustomView Header="Response"></CustomView>
<CustomView Header="Response">
<ViewTemplate>
<div class="view-container"><h5>Response view content</h5></div>
</ViewTemplate>
</CustomView>
</AssistViews>
</SfAIAssistView>
</div>
Expand All @@ -45,7 +49,7 @@ You can change the type of view by using the `AssistView` and `CustomView` tag d

### Setting name

You can use the `Header` property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView.
You can use the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_Header) property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView.

```cshtml

Expand All @@ -55,7 +59,11 @@ You can use the `Header` property to specifies the header name of the `Assist` o
<SfAIAssistView PromptRequested="@PromptRequest">
<AssistViews>
<AssistView Header="Prompt"></AssistView>
<CustomView Header="Response"></CustomView>
<CustomView Header="Response">
<ViewTemplate>
<div class="view-container"><h5>Response view content</h5></div>
</ViewTemplate>
</CustomView>
</AssistViews>
</SfAIAssistView>
</div>
Expand All @@ -73,9 +81,9 @@ You can use the `Header` property to specifies the header name of the `Assist` o

![Blazor AI AssistView type Header](./images/ai-assistview-type-header.png)

### Setting iconCSS
### Setting iconCss

You can customize the view icons by using the `IconCss` property. By default the `e-assistview-icon` class is added as built-in header icon for the AI AssistView.
You can customize the view icons by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_IconCss) property. By default the `e-assistview-icon` class is added as built-in header icon for the AI AssistView.

```cshtml

Expand All @@ -85,7 +93,11 @@ You can customize the view icons by using the `IconCss` property. By default the
<SfAIAssistView PromptRequested="@PromptRequest">
<AssistViews>
<AssistView Header="Prompt" IconCss="e-assistview-icon"></AssistView>
<CustomView Header="Response" IconCss="e-comment-show"></CustomView>
<CustomView Header="Response" IconCss="e-comment-show">
<ViewTemplate>
<div class="view-container"><h5>Response view content</h5></div>
</ViewTemplate>
</CustomView>
</AssistViews>
</SfAIAssistView>
</div>
Expand All @@ -105,7 +117,7 @@ You can customize the view icons by using the `IconCss` property. By default the

### Setting view template

You can use the `ViewTemplate` tag directive to add the view content of the multiple views added in the AI AssistView.
You can use the [ViewTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ViewTemplate) tag directive to add the view content of the multiple views added in the AI AssistView.

```cshtml

Expand Down Expand Up @@ -142,7 +154,7 @@ You can use the `ViewTemplate` tag directive to add the view content of the mult

#### Show or hide clear button

You can use the `ShowClearButton` property using the `AssistView` tag directive to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared.
You can use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ShowClearButton) property using the `AssistView` tag directive to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared.

```cshtml

Expand Down Expand Up @@ -171,7 +183,7 @@ You can use the `ShowClearButton` property using the `AssistView` tag directive

## Setting active view

You can use the `ActiveView` property set the active view in the AI AssistView. By default, the value is `0`.
You can use the [ActiveView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ActiveView) property set the active view in the AI AssistView. By default, the value is `0`.

```cshtml

Expand All @@ -180,8 +192,12 @@ You can use the `ActiveView` property set the active view in the AI AssistView.
<div class="aiassist-container" style="height: 350px; width: 650px;">
<SfAIAssistView PromptRequested="@PromptRequest" ActiveView="1">
<AssistViews>
<AssistView Header="Prompt"></AssistView>
<CustomView Header="Response" IconCss="e-icons e-comment-show"></CustomView>
<AssistView></AssistView>
<CustomView Header="Response" IconCss="e-icons e-comment-show">
<ViewTemplate>
<div class="view-container"><h5>Response view content</h5></div>
</ViewTemplate>
</CustomView>
</AssistViews>
</SfAIAssistView>
</div>
Expand All @@ -194,6 +210,14 @@ You can use the `ActiveView` property set the active view in the AI AssistView.
args.Response = defaultResponse;
}
}
<style>
.view-container {
height: inherit;
display: flex;
align-items: center;
justify-content: center;
}
</style>

```

Expand Down
Loading