telerik · dimodi · Aug 26, 2025 · Aug 21, 2025 · Aug 25, 2025 · Aug 26, 2025
@@ -47,6 +47,7 @@ Also check the [notes below the table](#accessibility-compliance-notes).
 | Card | AA | N/A | [Documentation](slug:card-wai-aria-support) |
 | Carousel | AA | [Enhanced](https://demos.telerik.com/blazor-ui/carousel/keyboard-navigation) | [Documentation](slug:carousel-wai-aria-support) |
 | Chart | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chart/keyboard-navigation) | [Documentation](slug:chart-wai-aria-support ) |
+| Chat | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chat/overview) | [Documentation](slug:chat-wai-aria-support ) |
 | CheckBox | AA | [Standard](https://demos.telerik.com/blazor-ui/checkbox/overview) | [Documentation](slug:checkbox-wai-aria-support) |
 | Chip | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chip/keyboard-navigation) | [Documentation](slug:chip-wai-aria-support) |
 | ChipList | AA | [Enhanced](https://demos.telerik.com/blazor-ui/chiplist/keyboard-navigation) | [Documentation](slug:chiplist-wai-aria-support) |

@@ -0,0 +1,57 @@
+---
+title: WAI-ARIA Support
+page_title: Chat WAI-ARIA Support
+slug: chat-wai-aria-support
+position: 10
+description: Learn about WAI-ARIA accessibility support in the Telerik UI for Blazor Chat component, including ARIA roles, attributes, and screen reader compatibility.
+tags: telerik,blazor,chat,accessibility,wai-aria
+published: True
+---
+
+# WAI-ARIA Support in Telerik UI for Blazor Chat
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+Out of the box, the Telerik UI for Blazor Chat provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
+
+
+The Chat is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
+
+## ARIA Roles
+- `role="log"` for the message list
+- `role="textbox"` for the input area
+- `role="button"` for actionable elements (send, upload, speech-to-text)
+
+## ARIA Attributes
+- `aria-live` for dynamic message updates
+- `aria-label` and `aria-labelledby` for descriptive labeling
+- `aria-disabled` for disabled actions
+
+## Section 508
+
+The Chat is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
+
+## Testing
+
+The Chat has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
+
+> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
+
+### Screen Readers
+
+The Chat has been tested with the following screen readers and browsers combinations:
+
+| Environment | Tool |
+| ----------- | ---- |
+| Firefox | NVDA |
+| Chrome | JAWS |
+| Microsoft Edge | JAWS |
+
+## Keyboard Navigation
+
+For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug:accessibility-overview#keyboard-navigation) article.
+
+## See Also
+
+* [Blazor Chat Demos](https://demos.telerik.com/blazor-ui/chat/overview)
+* [Accessibility in Telerik UI for Blazor](slug:accessibility-overview)
@@ -0,0 +1,170 @@
+---
+title: Data Binding
+page_title: Chat Data Binding
+description: Learn how to bind data to the Telerik UI for Blazor Chat component, including message models and dynamic updates.
+slug: chat-data-binding
+tags: telerik,blazor,chat,data-binding,messages
+published: True
+position: 2
+---
+
+# Data Binding
+
+The Telerik UI for Blazor Chat component supports data binding to collections of messages and provides flexible field mapping to accommodate different data models.
+
+## Bind to Data
+
+To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where `T` represents your message model.
+
+>caption Basic data binding
+
+````Razor
+<TelerikChat Data="@Messages"
+             AuthorId="@CurrentUserId"
+             OnSendMessage="@HandleSendMessage">
+</TelerikChat>
+
+@code {
+    private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>
+    {
+        new ChatMessage { Id = "1", Text = "Hello!", AuthorId = "user1", Timestamp = DateTime.Now.AddMinutes(-5) },
+        new ChatMessage { Id = "2", Text = "Hi there!", AuthorId = "user2", Timestamp = DateTime.Now.AddMinutes(-3) }
+    };
+
+    private string CurrentUserId { get; set;  } = "user1";
+
+    private void HandleSendMessage(ChatSendMessageEventArgs args)
+    {
+        var newMessage = new ChatMessage
+        {
+            Id = Guid.NewGuid().ToString(),
+            Text = args.Message,
+            AuthorId = CurrentUserId,
+            Timestamp = DateTime.Now
+        };
+
+        Messages.Add(newMessage);
+    }
+
+    public class ChatMessage
+    {
+        public string Id { get; set; }
+
+        public string AuthorId { get; set; }
+
+        public string AuthorName { get; set; }
+
+        public string AuthorImageUrl { get; set; }
+
+        public string Text { get; set; }
+
+        public string MessageToReplyId { get; set; }
+
+        public string Status { get; set; }
+
+        public bool IsDeleted { get; set; }
+
+        public bool IsPinned { get; set; }
+
+        public DateTime Timestamp { get; set; }
+
+        public List<string> SuggestedActions { get; set; }
+
+        public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
+    }
+}
+````
+
+## Field Mapping
+
+The Chat component provides field mapping parameters to work with different data models. Use these parameters to specify which properties in your data model correspond to Chat features:
+
+| Parameter | Description | Default Value |
+|-----------|-------------|---------------|
+| `TextField` | Field containing message text content | `"Text"` |
+| `AuthorIdField` | Field containing the author/user ID | `"AuthorId"` |
+| `AuthorNameField` | Field containing the author display name | `"AuthorName"` |
+| `TimestampField` | Field containing the message timestamp | `"Timestamp"` |
+| `IdField` | Field containing the unique message ID | `"Id"` |
+| `FilesField` | Field containing file attachments | `"Files"` |
+| `StatusField` | Field containing message status | `"Status"` |
+| `IsDeletedField` | Field indicating if message is deleted | `"IsDeleted"` |
+| `IsPinnedField` | Field indicating if message is pinned | `"IsPinned"` |
+| `ReplyТоIdField` | Field containing the ID of replied message | `"ReplyТоId"` |
+| `SuggestedActionsField` | Field containing suggested actions | `"SuggestedActions"` |
+
+## Dynamic Updates
+
+The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically:
+
+````Razor
+<TelerikChat @ref="@Chat1"
+             Data="@Messages"
+             TextField="Content"
+             AuthorId="@CurrentUserId"
+             OnSendMessage="@HandleSendMessage">
+</TelerikChat>
+
+<div style="margin-top: 20px;">
+    <TelerikButton OnClick="@AddSystemMessage">Add System Message</TelerikButton>
+    <TelerikButton OnClick="@ClearMessages">Clear All Messages</TelerikButton>
+</div>
+
+@code {
+    private TelerikChat<ChatMessage> Chat1 { get; set; }
+    private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>();
+    private string CurrentUserId = "user1";
+
+    private void HandleSendMessage(ChatSendMessageEventArgs args)
+    {
+        var newMessage = new ChatMessage
+        {
+            Id = Guid.NewGuid().ToString(),
+            Content = args.Message,
+            AuthorId = CurrentUserId,
+            AuthorName = "User",
+            Timestamp = DateTime.Now
+        };
+
+        Messages.Add(newMessage);
+
+        Chat1?.Refresh();
+    }
+
+    private void AddSystemMessage()
+    {
+        Messages.Add(new ChatMessage
+        {
+            Id = Guid.NewGuid().ToString(),
+            Content = "System notification: New user joined the chat",
+            AuthorId = "system",
+            AuthorName = "System",
+            Timestamp = DateTime.Now
+        });
+
+        Chat1?.Refresh();
+    }
+
+    private void ClearMessages()
+    {
+        Messages.Clear();
+        Chat1?.Refresh();
+    }
+
+    public class ChatMessage
+    {
+        public string Id { get; set; }
+        public string AuthorId { get; set; }
+        public string AuthorName { get; set; }
+        public string Content { get; set; }
+        public DateTime Timestamp { get; set; }
+        public string Status { get; set; }
+        public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
+    }
+}
+````
+
+## See Also
+
+* [Chat Overview](slug:chat-overview)
+* [Chat Integrations](slug:chat-integrations)