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/chat-ui/accessibility.md
+36-30Lines changed: 36 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ control: Chat UI
7
7
documentation: ug
8
8
---
9
9
10
-
# Accessibility in Blazor Chat UI component
10
+
# Accessibility in Blazor Chat UI Component
11
11
12
-
The Blazor Chat UI 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 Syncfusion Blazor Chat component follows key 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 [WCAG roles](https://www.w3.org/TR/wai-aria/#roles)roles. This commitment ensures that the component is accessible to all users.
13
13
14
-
The accessibility compliance for the Chat UI component is outlined below.
14
+
The accessibility compliance for the Chat UI component is outlined below:
15
15
16
16
| Accessibility Criteria | Compatibility |
17
17
| -- | -- |
@@ -37,43 +37,49 @@ The accessibility compliance for the Chat UI component is outlined below.
37
37
38
38
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
39
39
40
-
## WAI-ARIA attributes
40
+
## WAI-ARIA Attributes
41
41
42
-
The following ARIA attributes are used in the Chat UI component:
42
+
The following ARIA attributes are used in the Blazor Chat UI component to enhance its accessibility:
43
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. |
44
+
|Attribute| Purpose |
45
+
|---|---|
46
+
|`role="button"`|Applied to toolbar items to indicate they are clickable and will trigger an action. |
47
+
|`role="toolbar"`|Applied to the container of toolbar action buttons. |
48
+
|`aria-label`|Provides a string value that gives an accessible name to interactive elements, such as toolbar buttons. |
49
+
|`aria-orientation`| Specifies the orientation of the toolbar (e.g., horizontal). |
50
+
|`aria-disabled`| Indicates whether a toolbar item is disabled and not interactive. |
51
+
|`aria-multiline`|Applied to the message input box to indicate whether it accepts single or multiple lines of input. |
52
52
53
53
## Keyboard interaction
54
54
55
-
The following keyboard shortcuts are supported by the Chat UI component.
55
+
The Chat UI component supports the following keyboard shortcuts for improved navigation and interaction.
56
56
57
-
| Windows | Mac | Actions |
57
+
### General Navigation
58
+
59
+
| Windows | Mac | Action |
58
60
| --- | --- | --- |
59
-
| <kbd>Enter</kbd> | <kbd>Enter</kbd> |Select the focused item or send a message when the input is focused. |
61
+
| <kbd>Enter</kbd> | <kbd>Enter</kbd> |Selects the focused item or sends a message when the input is focused. |
60
62
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus forward through the interactive elements. |
61
63
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus backward through the interactive elements. |
62
-
| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scroll up through chat history. |
63
-
| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scroll down through chat history. |
64
-
| <kbd>Ctrl</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> + <kbd>Home</kbd> | Scroll to the first message. |
65
-
| <kbd>Ctrl</kbd> + <kbd>End</kbd> | <kbd>⌘</kbd> + <kbd>End</kbd> | Scroll to the most recent message. |
| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to the first toolbar item. |
77
+
| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to the last toolbar item. |
72
78
73
-
## Ensuring accessibility
79
+
## Ensuring Accessibility
74
80
75
-
The Chat UI component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
81
+
The accessibility of the Blazor Chat UI component is ensured through automated testing using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools.
76
82
77
-
## See also
83
+
## See Also
78
84
79
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
85
+
*[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/chat-ui/appearance.md
+22-8Lines changed: 22 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,21 @@ documentation: ug
9
9
10
10
# Appearance in Blazor Chat UI component
11
11
12
-
## Setting placeholder
12
+
This article explains how to customize the appearance of the Blazor Chat UI component using its built-in properties. The following customization options are available:
13
13
14
-
You can use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Placeholder) property to set the placeholder text for the textarea. The default value is `Type your message…`.
14
+
- Placeholder Text: Update the default input field text to provide clearer guidance or match the application's context.
15
+
16
+
- Dimensions: Configure the component's height and width to align with the layout and design requirements.
17
+
18
+
- Custom Styles: Apply custom CSS classes or inline styles to personalize the visual presentation and ensure consistency with the overall UI theme.
19
+
20
+
These customization features enable developers to deliver a user-friendly chat experience within Blazor applications.
21
+
22
+
## Setting the placeholder
23
+
24
+
To define the placeholder text for the message input, use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Placeholder) property. The default value is `Type your message…`.
25
+
26
+
The following example demonstrates how to set a custom placeholder.
15
27
16
28
```cshtml
17
29
@@ -37,9 +49,9 @@ You can use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.B
You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Width) property to set the width of the Chat UI. The default value is `100%`.
54
+
To specify the width of the Chat UI component, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Width) property. The default value is `100%`.
43
55
44
56
```cshtml
45
57
@@ -65,9 +77,9 @@ You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
65
77
66
78
67
79
68
-
## Setting height
80
+
## Setting the height
69
81
70
-
You can use the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Height) property to set the height of the Chat UI. The default value is `100%`.
82
+
To specify the height of the Chat UI component, use the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Height) property. The default value is `100%`.
71
83
72
84
```cshtml
73
85
@@ -93,9 +105,11 @@ You can use the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
93
105
94
106
95
107
96
-
## Setting CSS class
108
+
## Applying a custom CSS class
109
+
110
+
To apply custom styling to the Chat UI component, use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_CssClass) property. This allows you to override default styles and create a unique appearance.
97
111
98
-
You can customize the appearance of the Chat UI component by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_CssClass) property.
112
+
The following example demonstrates how to apply a custom CSS class named `custom-container` to modify the component's background, border, and header.
Copy file name to clipboardExpand all lines: blazor/chat-ui/events.md
+11-5Lines changed: 11 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,13 +7,19 @@ control: Chat UI
7
7
documentation: ug
8
8
---
9
9
10
-
# Events in Blazor Chat UI component
10
+
# Events in Blazor Chat UI Component
11
11
12
-
This section describes the Chat UI events that will be triggered when appropriate actions are performed. The following events are available in the Chat UI component.
12
+
The Blazor Chat UI component provides a flexible event system that enables developers to respond to key user interactions.
13
+
14
+
This section covers the following available events:
15
+
16
+
*[Created](#created)
17
+
*[MessageSend](#sending-message)
18
+
*[UserTyping](#user-typing)
13
19
14
20
## Created
15
21
16
-
The Chat UI component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Created) event when the component rendering is completed.
22
+
The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Created) event is triggered after the Chat UI component has been rendered.
17
23
18
24
```cshtml
19
25
@@ -34,7 +40,7 @@ The Chat UI component triggers the [Created](https://help.syncfusion.com/cr/blaz
34
40
35
41
## Sending message
36
42
37
-
The [MessageSend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_MessageSend) event is triggered when the message is being sent in the Chat UI component.
43
+
The [MessageSend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_MessageSend) event is triggered when a user sends a message.
38
44
39
45
```cshtml
40
46
@@ -55,7 +61,7 @@ The [MessageSend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Intera
55
61
56
62
## User typing
57
63
58
-
The [UserTyping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_UserTyping) event is triggered when the user is typing a message in the Chat UI component.
64
+
The [UserTyping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_UserTyping) event is triggered as the user types a message in the input field.
0 commit comments