Skip to content

Commit 72a3beb

Browse files
Vignesh-SivalingamVignesh-Sivalingam
authored
Merge branch 'hotfix/hotfix-v27.1.48' into 908232-pdf-export
2 parents f1d2e27 + 86f4461 commit 72a3beb

File tree

241 files changed

+6404
-240
lines changed

Some content is hidden

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

241 files changed

+6404
-240
lines changed

‎blazor-toc.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -613,6 +613,7 @@
613613
<li><a href="/blazor/ai-assistview/custom-view">Custom views</a></li>
614614
<li><a href="/blazor/ai-assistview/templates">Templates</a></li>
615615
<li><a href="/blazor/ai-assistview/appearance">Appearance</a></li>
616+
<li><a href="/blazor/ai-assistview/accessibility">Accessibility</a></li>
616617
<li><a href="/blazor/ai-assistview/methods">Methods</a></li>
617618
<li><a href="/blazor/ai-assistview/events">Events</a></li>
618619
<li>
@@ -1519,6 +1520,9 @@
15191520
<li>
15201521
<a href="/blazor/color-picker/how-to/render-palette-alone">Render palette alone</a>
15211522
</li>
1523+
<li>
1524+
<a href="/blazor/color-picker/how-to/show-recent-color">Show Recent Color</a>
1525+
</li>
15221526
</ul>
15231527
</li>
15241528
<li>
@@ -2451,6 +2455,9 @@
24512455
<li>
24522456
<a href="/blazor/diagram/layout/organizational-chart">Organizational Chart</a>
24532457
</li>
2458+
<li>
2459+
<a href="/blazor/diagram/layout/flowchart-layout">Flowchart Layout</a>
2460+
</li>
24542461
<li>
24552462
<a href="/blazor/diagram/layout/mind-map">Mind Map Layout</a>
24562463
</li>
@@ -3401,6 +3408,29 @@
34013408
<li> <a href="/blazor/multicolumn-combobox/getting-started">Blazor Server and WASM App</a></li>
34023409
</ul>
34033410
</li>
3411+
<li>
3412+
<a href="/blazor/multicolumn-combobox/value-binding">Value Binding</a>
3413+
</li>
3414+
<li>
3415+
<a href="/blazor/multicolumn-combobox/selection">Selection</a>
3416+
</li>
3417+
<li>
3418+
<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
3419+
</li>
3420+
<li> <a href="/blazor/multicolumn-combobox/grouping">Grouping</a></li>
3421+
<li>
3422+
<a href="/blazor/multicolumn-combobox/placeholder-and-floatlabel">Placeholder and Floatlabel</a>
3423+
</li>
3424+
<li>
3425+
<a href="/blazor/multicolumn-combobox/filtering">Filtering</a>
3426+
</li>
3427+
<li>
3428+
<a href="/blazor/multicolumn-combobox/custom-value">Custom Value</a>
3429+
</li>
3430+
<li> <a href="/blazor/multicolumn-combobox/paging">Paging</a></li>
3431+
<li> <a href="/blazor/multicolumn-combobox/popup-setting">Popup Setting</a></li>
3432+
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
3433+
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
34043434
</ul>
34053435
</li>
34063436
<li>MultiSelect Dropdown

‎blazor/ai-assistview/accessibility.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
layout: post
3+
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.
15+
16+
| Accessibility Criteria | Compatibility |
17+
| -- | -- |
18+
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
19+
| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
20+
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
21+
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
22+
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
23+
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
24+
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
25+
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
26+
27+
<style>
28+
.post .post-content img {
29+
display: inline-block;
30+
margin: 0.5em 0;
31+
}
32+
</style>
33+
34+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
35+
36+
<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>
37+
38+
<div><img src="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)

‎blazor/ai-assistview/appearance.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ documentation: ug
1111

1212
## Setting width
1313

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

1616
```cshtml
1717
1818
@using Syncfusion.Blazor.InteractiveChat
1919
20-
<div class="aiassist-container" style="height: 350px; width: 750px;">
20+
<div class="aiassist-container" style="height: 350px;">
2121
<SfAIAssistView Width="650px" PromptRequested="@PromptRequest"></SfAIAssistView>
2222
</div>
2323
@@ -36,15 +36,13 @@ You can use the `Width` property to set the width of the AI AssistView.
3636

3737
## Setting height
3838

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%`.
4240

4341
```cshtml
4442
4543
@using Syncfusion.Blazor.InteractiveChat
4644
47-
<div class="aiassist-container" style="height: 450px; width: 650px;">
45+
<div class="aiassist-container" style="width: 650px;">
4846
<SfAIAssistView Height="350px" PromptRequested="@PromptRequest"></SfAIAssistView>
4947
</div>
5048
@@ -63,14 +61,14 @@ You can use the `Height` property to set the height of the AI AssistView.
6361

6462
## CssClass
6563

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

6866
```cshtml
6967
7068
@using Syncfusion.Blazor.InteractiveChat
7169
7270
<div class="aiassist-container" style="height: 350px; width: 650px;">
73-
<SfAIAssistView CssClass="e-custom" PromptRequested="@PromptRequest"></SfAIAssistView>
71+
<SfAIAssistView CssClass="custom-container" PromptRequested="@PromptRequest"></SfAIAssistView>
7472
</div>
7573
7674
@code {
@@ -82,18 +80,18 @@ You can customize the appearance of the AI AssistView component by using the `Cs
8280
}
8381
}
8482
<style>
85-
.e-aiassistview.e-custom {
83+
.e-aiassistview.custom-container {
8684
border-color: #e0e0e0;
8785
background-color: #f4f4f4;
8886
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
8987
}
9088
91-
.e-aiassistview.e-custom .e-view-header .e-toolbar,
92-
.e-aiassistview.e-custom .e-view-header .e-toolbar-items {
89+
.e-aiassistview.custom-container .e-view-header .e-toolbar,
90+
.e-aiassistview.custom-container .e-view-header .e-toolbar-items {
9391
background: #d5d5d5;
9492
}
9593
96-
.e-aiassistview.e-custom .e-view-content .e-input-group {
94+
.e-aiassistview.custom-container .e-view-content .e-input-group {
9795
border: 3px solid #e0e0e0;
9896
}
9997
</style>

‎blazor/ai-assistview/assist-view.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ documentation: ug
1111

1212
## Setting prompt text
1313

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

1616
```cshtml
1717
@@ -36,7 +36,7 @@ You can use the `Prompt` property to define the prompt text for the AI AssistVie
3636

3737
## Setting prompt placeholder
3838

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

4141
```cshtml
4242
@@ -61,7 +61,7 @@ You can use the `PromptPlaceholder` property to set the placeholder text for the
6161

6262
## Prompt-response collection
6363

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

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

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

9595
## Adding prompt suggestions
9696

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

9999
```cshtml
100100
@@ -122,7 +122,7 @@ By using the `PromptSuggestions` property, you can configure the list of suggest
122122

123123
### Adding suggestion headers
124124

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

127127
```cshtml
128128
@@ -148,9 +148,9 @@ You can use the `PromptSuggestionsHeader` property to set the header text for th
148148

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

151-
## Adding prompt iconCSS
151+
## Adding prompt iconCss
152152

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

155155
```cshtml
156156
@@ -179,16 +179,16 @@ You can customize the appearance of the prompter avatar by using the `PromptIcon
179179

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

182-
## Adding response iconCSS
182+
## Adding response iconCss
183183

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

186186
```cshtml
187187
188188
@using Syncfusion.Blazor.InteractiveChat
189189
190190
<div class="aiassist-container" style="height: 350px; width: 650px;">
191-
<SfAIAssistView Prompts="@prompts" PromptRequested="@PromptRequest" ResponseIconCss="e-icons e-star-filled"></SfAIAssistView>
191+
<SfAIAssistView Prompts="@prompts" PromptRequested="@PromptRequest" ResponseIconCss="e-icons e-bullet-4"></SfAIAssistView>
192192
</div>
193193
194194
@code {

0 commit comments

Comments
 (0)