RadzenTocItem: take in attributes to pass on to the list item element (#2360)

Co-authored-by: AI\jvermeyl <[email protected]>

Author: joriverm

Radzen.Blazor.Tests/TocTests.cs

@@ -0,0 +1,27 @@
+using Bunit;
+using System.Collections.Generic;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class TocTests
+    {
+        [Fact]
+        public void TocItem_Renders_With_Attributes()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenTocItem>(parameters =>
+            {
+                parameters.Add(p => p.Attributes, new Dictionary<string, object>
+                {
+                    { "data-enhance-nav", "false" },
+                    { "aria-label", "Table of Contents Item" }
+                });
+            });
+
+            Assert.Contains("data-enhance-nav=\"false\"", component.Markup);
+            Assert.Contains("aria-label=\"Table of Contents Item\"", component.Markup);
+        }
+    }
+}
+

Radzen.Blazor/RadzenTocItem.razor

@@ -1,4 +1,4 @@
-<li class=@Class role="presentation">
+<li class=@GetCssClass() @attributes=@Attributes role="presentation">
     <div class=@WrapperClass>
         <a href=@Selector class=@LinkClass @onclick:preventDefault @onclick=@OnClickAsync>@if (Template is null) {@Text} else {@Template}</a>
     </div>

Radzen.Blazor/RadzenTocItem.razor.cs

@@ -1,7 +1,9 @@
-using System;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Radzen.Blazor.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Threading.Tasks;
 namespace Radzen.Blazor;
 
 #nullable enable
@@ -11,6 +13,15 @@ namespace Radzen.Blazor;
 /// </summary>
 public partial class RadzenTocItem : ComponentBase, IAsyncDisposable
 {
+    /// <summary>
+    /// Gets or sets a dictionary of additional HTML attributes that will be applied to the component's root element.
+    /// Any attributes not explicitly defined as parameters will be captured here and rendered on the element.
+    /// Use this to add data-* attributes, ARIA attributes, or any custom HTML attributes.
+    /// </summary>
+    /// <value>The unmatched attributes dictionary.</value>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IReadOnlyDictionary<string, object> Attributes { get; set; } = new ReadOnlyDictionary<string, object>(new Dictionary<string, object>());
+
     /// <summary>
     /// Gets or sets the child content.
     /// </summary>
@@ -43,10 +54,26 @@ public partial class RadzenTocItem : ComponentBase, IAsyncDisposable
 
     private bool selected;
 
-    private string Class => ClassList.Create("rz-toc-item")
+    /// <summary>
+    /// Gets the final CSS class rendered by the component. Combines it with a <c>class</c> custom attribute.
+    /// </summary>
+    protected string GetCssClass()
+    {
+        if (Attributes != null && Attributes.TryGetValue("class", out var @class) && !string.IsNullOrEmpty(Convert.ToString(@class)))
+        {
+            return $"{GetComponentCssClass()} {@class}";
+        }
+
+        return GetComponentCssClass();
+    }
+
+    /// <summary>
+    /// Gets the component CSS class.
+    /// </summary>
+    protected string GetComponentCssClass() => ClassList.Create("rz-toc-item")
         .Add("rz-toc-item-selected", selected)
         .ToString();
-        
+
     private string WrapperClass => ClassList.Create("rz-toc-item-wrapper")
         .Add(Level switch
         {
@@ -59,7 +86,7 @@ public partial class RadzenTocItem : ComponentBase, IAsyncDisposable
 
     private string LinkClass => ClassList.Create("rz-toc-link")
         .ToString();
-    
+
     internal void Activate()
     {
         selected = true;