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
title: Accessibility in Blazor AI AssistView Component | Syncfusion
4
+
description: Checkout and learn about Accessibility and Keyboard interaction with Blazor AI AssistView component and more details.
5
+
platform: Blazor
6
+
control: AI AssistView
7
+
documentation: ug
8
+
---
9
+
10
+
# Accessibility in Blazor AI AssistView component
11
+
12
+
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.
13
+
14
+
The accessibility compliance for the Blazor AI AssistView component is outlined below.
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
35
+
36
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
37
+
38
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
39
+
40
+
## WAI-ARIA attributes
41
+
42
+
The following ARIA attributes are used in the AI AssistView component:
43
+
44
+
| Attributes | Purpose |
45
+
| ------------ | ----------------------- |
46
+
|`role=button`| Indicates that the element is clickable and triggers an action when activated by the user. |
47
+
|`role=toolbar`| Specifies that the element is a toolbar. |
48
+
|`aria-label`| Defines a string value that labels an interactive element for accessibility. |
49
+
|`aria-orientation`| Specifies the orientation of the toolbar. |
50
+
|`aria-disabled`| Indicates whether the toolbar or element is currently disabled and not interactive. |
51
+
|`aria-multiline`| Indicates that a textbox accepts multiple lines of input or only a single line. |
52
+
53
+
## Keyboard interaction
54
+
55
+
The following keyboard shortcuts are supported by the AI AssistView component.
56
+
57
+
|**Press**|**To do this**|
58
+
| --- | --- |
59
+
| <kbd>Enter</kbd> | Select the focused item. |
60
+
| <kbd>Tab</kbd> | Moves focus forward through the interactive elements. |
61
+
| <kbd>Shift + Tab</kbd> | Moves focus backward through the interactive elements. |
62
+
<b>AI AssistView Toolbars</b>||
63
+
| <kbd>Left Arrow</kbd> | Focuses the previous toolbar element. |
64
+
| <kbd>Right Arrow</kbd> | Focuses the next toolbar element. |
65
+
| <kbd>Enter / Space</kbd> | Select the focused item or activate the selected option. |
66
+
| <kbd>Home</kbd> | Moves focus to the first toolbar element. |
67
+
| <kbd>End</kbd> | Moves focus to the last toolbar element. |
68
+
69
+
## Ensuring accessibility
70
+
71
+
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.
72
+
73
+
## See also
74
+
75
+
*[Accessibility in Syncfusion Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
Copy file name to clipboardExpand all lines: blazor/ai-assistview/appearance.md
+10-12Lines changed: 10 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,13 +11,13 @@ documentation: ug
11
11
12
12
## Setting width
13
13
14
-
You can use the `Width` property to set the width of the AI AssistView.
14
+
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%`.
@@ -36,15 +36,13 @@ You can use the `Width` property to set the width of the AI AssistView.
36
36
37
37
## Setting height
38
38
39
-
You can use the `Height` property to set the height of the AI AssistView.
40
-
41
-
> By default, the component `Width` & `Height` will be inherited based on the parent dimensions.
39
+
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%`.
@@ -63,14 +61,14 @@ You can use the `Height` property to set the height of the AI AssistView.
63
61
64
62
## CssClass
65
63
66
-
You can customize the appearance of the AI AssistView component by using the `CssClass` property.
64
+
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.
Copy file name to clipboardExpand all lines: blazor/ai-assistview/assist-view.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ documentation: ug
11
11
12
12
## Setting prompt text
13
13
14
-
You can use the `Prompt` property to define the prompt text for the AI AssistView component.
14
+
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.
15
15
16
16
```cshtml
17
17
@@ -36,7 +36,7 @@ You can use the `Prompt` property to define the prompt text for the AI AssistVie
36
36
37
37
## Setting prompt placeholder
38
38
39
-
You can use the `PromptPlaceholder` property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`.
39
+
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...`.
40
40
41
41
```cshtml
42
42
@@ -61,7 +61,7 @@ You can use the `PromptPlaceholder` property to set the placeholder text for the
61
61
62
62
## Prompt-response collection
63
63
64
-
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.
64
+
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.
65
65
66
66
The `Prompts` collection stores all the prompts and responses generated.
67
67
@@ -94,7 +94,7 @@ The `Prompts` collection stores all the prompts and responses generated.
94
94
95
95
## Adding prompt suggestions
96
96
97
-
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.
97
+
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.
98
98
99
99
```cshtml
100
100
@@ -122,7 +122,7 @@ By using the `PromptSuggestions` property, you can configure the list of suggest
122
122
123
123
### Adding suggestion headers
124
124
125
-
You can use the `PromptSuggestionsHeader` property to set the header text for the prompt suggestions in the AI AssistView.
125
+
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.
126
126
127
127
```cshtml
128
128
@@ -148,9 +148,9 @@ You can use the `PromptSuggestionsHeader` property to set the header text for th
148
148
149
149
150
150
151
-
## Adding prompt iconCSS
151
+
## Adding prompt iconCss
152
152
153
-
You can customize the appearance of the prompter avatar by using the `PromptIconCss` property.
153
+
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.
154
154
155
155
```cshtml
156
156
@@ -179,16 +179,16 @@ You can customize the appearance of the prompter avatar by using the `PromptIcon
179
179
180
180
181
181
182
-
## Adding response iconCSS
182
+
## Adding response iconCss
183
183
184
-
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.
184
+
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.
Copy file name to clipboardExpand all lines: blazor/ai-assistview/custom-view.md
+36-12Lines changed: 36 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ The Blazor AI AssistView allows you to add different views available for user in
15
15
16
16
#### Setting view type
17
17
18
-
You can change the type of view by using the `AssistView` and `CustomView` tag directive.
18
+
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.
19
19
20
20
```cshtml
21
21
@@ -25,7 +25,11 @@ You can change the type of view by using the `AssistView` and `CustomView` tag d
@@ -45,7 +49,7 @@ You can change the type of view by using the `AssistView` and `CustomView` tag d
45
49
46
50
### Setting name
47
51
48
-
You can use the `Header` property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView.
52
+
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.
49
53
50
54
```cshtml
51
55
@@ -55,7 +59,11 @@ You can use the `Header` property to specifies the header name of the `Assist` o
@@ -73,9 +81,9 @@ You can use the `Header` property to specifies the header name of the `Assist` o
73
81
74
82
75
83
76
-
### Setting iconCSS
84
+
### Setting iconCss
77
85
78
-
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.
86
+
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.
79
87
80
88
```cshtml
81
89
@@ -85,7 +93,11 @@ You can customize the view icons by using the `IconCss` property. By default the
@@ -105,7 +117,7 @@ You can customize the view icons by using the `IconCss` property. By default the
105
117
106
118
### Setting view template
107
119
108
-
You can use the `ViewTemplate` tag directive to add the view content of the multiple views added in the AI AssistView.
120
+
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.
109
121
110
122
```cshtml
111
123
@@ -142,7 +154,7 @@ You can use the `ViewTemplate` tag directive to add the view content of the mult
142
154
143
155
#### Show or hide clear button
144
156
145
-
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.
157
+
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.
146
158
147
159
```cshtml
148
160
@@ -171,7 +183,7 @@ You can use the `ShowClearButton` property using the `AssistView` tag directive
171
183
172
184
## Setting active view
173
185
174
-
You can use the `ActiveView` property set the active view in the AI AssistView. By default, the value is `0`.
186
+
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`.
175
187
176
188
```cshtml
177
189
@@ -180,8 +192,12 @@ You can use the `ActiveView` property set the active view in the AI AssistView.
0 commit comments