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
Copy file name to clipboardExpand all lines: blazor/ai-assistview/accessibility.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ control: AI AssistView
7
7
documentation: ug
8
8
---
9
9
10
-
# Accessibility in Blazor AI AssistView component
10
+
# Accessibility in the Blazor AI AssistView component
11
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.
12
+
The Blazor AI AssistView component follows established 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
13
14
-
The accessibility compliance for the Blazor AI AssistView component is outlined below.
14
+
The component’s accessibility compliance is summarized below.
15
15
16
16
| Accessibility Criteria | Compatibility |
17
17
| -- | -- |
@@ -45,7 +45,7 @@ The following ARIA attributes are used in the AI AssistView component:
45
45
| ------------ | ----------------------- |
46
46
|`role=button`| Indicates that the element is clickable and triggers an action when activated by the user. |
47
47
|`role=toolbar`| Specifies that the element is a toolbar. |
48
-
|`aria-label`|Defines a string value that labels an interactive element for accessibility. |
48
+
|`aria-label`|Provides an accessible name for interactive elements (for example, buttons, toolbar, or prompt input). |
49
49
|`aria-orientation`| Specifies the orientation of the toolbar. |
50
50
|`aria-disabled`| Indicates whether the toolbar or element is currently disabled and not interactive. |
51
51
|`aria-multiline`| Indicates that a textbox accepts multiple lines of input or only a single line. |
@@ -57,19 +57,19 @@ The following keyboard shortcuts are supported by the AI AssistView component.
57
57
| Windows | Mac | Actions |
58
58
| --- | --- | --- |
59
59
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Select the focused item. |
60
-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> |Moves focus forward through the interactive elements. |
61
-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Moves focus backward through the interactive elements. |
62
-
<b>AI AssistView Toolbars</b>|||
63
-
| <kbd>←</kbd> | <kbd>←</kbd> |Focuses the previous toolbar element. |
64
-
| <kbd>→</kbd> | <kbd>→</kbd> |Focuses the next toolbar element. |
| <kbd>←</kbd> | <kbd>←</kbd> |Move focus to the previous toolbar element. |
64
+
| <kbd>→</kbd> | <kbd>→</kbd> |Move focus to the next toolbar element. |
65
65
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Select the focused item or activate the selected option. |
66
-
| <kbd>Home</kbd> | <kbd>Home</kbd> |Moves focus to the first toolbar element. |
67
-
| <kbd>End</kbd> | <kbd>End</kbd> |Moves focus to the last toolbar element. |
66
+
| <kbd>Home</kbd> | <kbd>Home</kbd> |Move focus to the first toolbar element. |
67
+
| <kbd>End</kbd> | <kbd>End</kbd> |Move focus to the last toolbar element. |
68
68
69
69
## Ensuring accessibility
70
70
71
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
72
73
73
## See also
74
74
75
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
75
+
* Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components(https://blazor.syncfusion.com/documentation/common/accessibility)
Copy file name to clipboardExpand all lines: blazor/ai-assistview/ai-integrations/gemini-integration.md
+20-14Lines changed: 20 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,52 +9,53 @@ documentation: ug
9
9
10
10
# Integration of Gemini AI With Blazor AI AssistView component
11
11
12
-
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in your applications.
12
+
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in applications.
13
13
14
14
## Prerequisites
15
15
16
-
* Google account to generate API key on accessing `Gemini AI`
17
-
* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
16
+
* Google account to generate an API key for accessing [Gemini AI](https://ai.google.dev/gemini-api/docs/quickstart)
17
+
* Syncfusion AI AssistView for Blazor package [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project.
18
+
*[Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code).
18
19
19
20
## Getting Started with the AI AssistView Component
20
21
21
-
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
22
+
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView renders correctly in the application and that prerequisites are met:
22
23
23
-
[Blazor Getting Started Guide](../getting-started)
24
+
[Blazor Getting Started Guide](../getting-started)
24
25
25
26
## Install Dependencies
26
27
27
28
Install the Syncfusion Blazor package in the application.
1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account.
46
+
1. Go to [Google AI Studio](https://aistudio.google.com/app/api-keys) and sign in with a google account. Create a new account if needed.
46
47
47
-
2.Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
48
+
2.Select `Get API key` from the left menu or the top-right of the dashboard.
48
49
49
-
3.Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed.
50
+
3.Choose `Create API key`. Select an existing google cloud project or create a new one, then proceed.
50
51
51
-
4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once.
52
+
4. After creating or selecting a project, an API key is generated and displayed. Copy the key and store it securely, as it may be shown only once.
52
53
53
-
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
54
+
> Security note: Do not commit API keys to version control. Use environment variables, a secret manager, or a server-side proxy in production.
54
55
55
56
## Integration Gemini AI with AI AssistView
56
57
57
-
* Add your generated `API Key` at the line
58
+
* Add the generated API key in the following line.
58
59
59
60
```bash
60
61
@@ -65,6 +66,11 @@ const string GeminiApiKey = 'Place your API key here';
0 commit comments