[AccordionItem] Add HeadingTooltip parameter

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -55,6 +55,15 @@
             Gets or sets a callback when a accordion item is changed.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.LibraryConfiguration">
+            <summary />
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.JSRuntime">
+            <summary />
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.Module">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.Owner">
             <summary>
             Gets or sets the owning FluentTreeView.
@@ -74,6 +83,11 @@
             If both are set, this parameter will not be used.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.HeadingTooltip">
+            <summary>
+            Gets or sets the tooltip for the heading of the accordion item.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.Expanded">
             <summary>
             Gets or sets a value indicating whether the item is expanded or collapsed.

examples/Demo/Shared/Pages/Accordion/Examples/AccordionDefault.razor

@@ -10,10 +10,10 @@
         </div>
         Panel two content, using the 'end' slot for extra header content
     </FluentAccordionItem>
-    <FluentAccordionItem Expanded="true" Heading="Panel three">
+	<FluentAccordionItem Expanded="true" Heading="Panel three" HeadingTooltip="My heading 3 tooltip">
         Panel three content
     </FluentAccordionItem>
-    <FluentAccordionItem Expanded="true">
+    <FluentAccordionItem Expanded="true" HeadingTooltip="My heading 4 tooltip">
         <HeadingTemplate>
             Panel <span style="color:red">Four</span>
         </HeadingTemplate>

src/Core/Components/Accordion/FluentAccordionItem.razor.cs

@@ -3,11 +3,26 @@
 // ------------------------------------------------------------------------
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
+using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 public partial class FluentAccordionItem : FluentComponentBase, IDisposable
 {
+    private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Accordion/FluentAccordionItem.razor.js";
+
+    /// <summary />
+    [Inject]
+    private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+    /// <summary />
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = default!;
+
+    /// <summary />
+    private IJSObjectReference? Module { get; set; }
+
     /// <summary>
     /// Gets or sets the owning FluentTreeView.
     /// </summary>
@@ -30,6 +45,12 @@ public partial class FluentAccordionItem : FluentComponentBase, IDisposable
     [Parameter]
     public RenderFragment? HeadingTemplate { get; set; }
 
+    /// <summary>
+    /// Gets or sets the tooltip for the heading of the accordion item.
+    /// </summary>
+    [Parameter]
+    public string? HeadingTooltip { get; set; }
+
     /// <summary>
     /// Gets or sets a value indicating whether the item is expanded or collapsed.
     /// </summary>
@@ -65,6 +86,18 @@ protected override void OnInitialized()
         Owner?.Register(this);
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            if (HeadingTooltip != null && !string.IsNullOrEmpty(Id))
+            {
+                Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+                await Module.InvokeVoidAsync("setControlAttribute", Id, "title", HeadingTooltip);
+            }
+        }
+    }
+
     private async Task HandleOnAccordionItemChangedAsync(AccordionChangeEventArgs args)
     {
         if (args is not null)

src/Core/Components/Accordion/FluentAccordionItem.razor.js

@@ -0,0 +1,7 @@
+export function setControlAttribute(id, attrName, value) {
+    const fieldElement = document.querySelector("#" + id)?.shadowRoot?.querySelector("[part='button']");
+
+    if (!!fieldElement) {
+        fieldElement?.setAttribute(attrName, value);
+    }
+}

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithHeadingAndTooltip.verified.html

@@ -0,0 +1,4 @@
+
+<fluent-accordion-item id="xxx" blazor:onaccordionchange="1" b-d6xo7qntdj="" blazor:elementreference="xxx">
+  <span slot="heading" b-d6xo7qntdj="">custom heading value</span>
+</fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithHeadingTemplateAndTooltip.verified.html

@@ -0,0 +1,4 @@
+
+<fluent-accordion-item id="xxx" blazor:onaccordionchange="1" b-d6xo7qntdj="" blazor:elementreference="xxx">
+  <div slot="heading" b-d6xo7qntdj="">custom heading content</div>
+</fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.cs

@@ -3,17 +3,32 @@
 // ------------------------------------------------------------------------
 
 using Bunit;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.DependencyInjection;
 using Xunit;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Tests.Accordion;
 
-public class FluentAccordionItemTests : TestBase
+public class FluentAccordionItemTests : TestContext
 {
+    private const string FluentAccordionItemRazorJs = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Accordion/FluentAccordionItem.razor.js";
+
+    [Inject]
+    private LibraryConfiguration LibraryConfiguration { get; set; } = new LibraryConfiguration();
+
+    public FluentAccordionItemTests()
+    {
+        var script = JSInterop.SetupModule(FluentAccordionItemRazorJs);
+        script.SetupVoid("setControlAttribute", _ => true);
+
+        Services.AddSingleton(LibraryConfiguration.ForUnitTests);
+    }
+
     [Fact]
     public void FluentAccordionItem_WithChildContent_IsNull()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>();
+        var cut = RenderComponent<FluentAccordionItem>();
 
         // Assert
         cut.Verify();
@@ -23,7 +38,7 @@ public void FluentAccordionItem_WithChildContent_IsNull()
     public void FluentAccordionItem_WithProvided_Content()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.AddChildContent("child content");
         });
@@ -35,8 +50,9 @@ public void FluentAccordionItem_WithProvided_Content()
     [Fact]
     public void FluentAccordionItem_WithCustomHeaderValue()
     {
+
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.Heading, "custom heading value");
         });
@@ -49,7 +65,7 @@ public void FluentAccordionItem_WithCustomHeaderValue()
     public void FluentAccordionItem_WithHeadingTemplateAndHeading_IsProvidedBoth()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.HeadingTemplate, context =>
             {
@@ -63,13 +79,45 @@ public void FluentAccordionItem_WithHeadingTemplateAndHeading_IsProvidedBoth()
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentAccordionItem_WithHeadingAndTooltip()
+    {
+        // Arrange & Act
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
+        {
+            parameters.Add(p => p.Heading, "custom heading value");
+            parameters.Add(p => p.HeadingTooltip, "my tooltip");
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentAccordionItem_WithHeadingTemplateAndTooltip()
+    {
+        // Arrange & Act
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
+        {
+            parameters.Add(p => p.HeadingTemplate, context =>
+            {
+                context.AddContent(0, "custom heading content");
+            });
+
+            parameters.Add(p => p.HeadingTooltip, "my tooltip");
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
     [Theory]
     [InlineData(true)]
     [InlineData(false)]
     public void FluentAccordionItem_WithProvidedExpanded_Parameter(bool expanded)
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.Expanded, expanded);
         });
@@ -82,7 +130,7 @@ public void FluentAccordionItem_WithProvidedExpanded_Parameter(bool expanded)
     public void FluentAccordionItem_WithAnAdditionalAttribute()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.AddUnmatched("unknown", "unknowns-value");
         });
@@ -95,7 +143,7 @@ public void FluentAccordionItem_WithAnAdditionalAttribute()
     public void FluentAccordionItem_WithMultipleAdditionalAttributes()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.AddUnmatched("unknown1", "unknown1s-value");
             parameters.AddUnmatched("unknown2", "unknown2s-value");
@@ -109,7 +157,7 @@ public void FluentAccordionItem_WithMultipleAdditionalAttributes()
     public void FluentAccordionItem_WhenAllParamsAdded_AndAdditionalAttributes_AndContent()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.Expanded, true);
             parameters.Add(p => p.Heading, "custom heading value");
@@ -126,7 +174,7 @@ public void FluentAccordionItem_WhenAllParamsAdded_AndAdditionalAttributes_AndCo
     public void FluentAccordionItem_WhenAdditionalCSSClass_IsProvided()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.Class, "additional-class");
         });
@@ -139,7 +187,7 @@ public void FluentAccordionItem_WhenAdditionalCSSClass_IsProvided()
     public void FluentAccordionItem_WhenAdditionalStyle_IsProvided()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.Style, "background-color: grey");
         });
@@ -152,7 +200,7 @@ public void FluentAccordionItem_WhenAdditionalStyle_IsProvided()
     public void FluentAccordionItem_WithHeadingTemplate_IsNull()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.HeadingTemplate, context => { });
         });
@@ -165,7 +213,7 @@ public void FluentAccordionItem_WithHeadingTemplate_IsNull()
     public void FluentAccordionItem_WithHeadingTemplate_IsProvided()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        var cut = RenderComponent<FluentAccordionItem>(parameters =>
         {
             parameters.Add(p => p.HeadingTemplate, context =>
             {

tests/Core/Accordion/FluentAccordionTests.cs

@@ -3,17 +3,23 @@
 // ------------------------------------------------------------------------
 
 using Bunit;
+using Microsoft.Extensions.DependencyInjection;
 using Xunit;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Tests.Accordion;
 
-public class FluentAccordionTests : TestBase
+public class FluentAccordionTests : TestContext
 {
+    public FluentAccordionTests()
+    {
+        Services.AddSingleton(LibraryConfiguration.ForUnitTests);
+    }
+
     [Fact]
     public void FluentAccordion_When_ChildContent_IsNull()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>();
+        var cut = RenderComponent<FluentAccordion>();
 
         // Assert
         cut.Verify();
@@ -23,7 +29,7 @@ public void FluentAccordion_When_ChildContent_IsNull()
     public void FluentAccordion_TheDefaultExpandMode_WhenExpandMode_IsNotSpecified()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>();
+        var cut = RenderComponent<FluentAccordion>();
 
         // Assert
         cut.Verify();
@@ -35,7 +41,7 @@ public void FluentAccordion_TheDefaultExpandMode_WhenExpandMode_IsNotSpecified()
     public void FluentAccordion_WhenExpandMode_IsSpecified(AccordionExpandMode accordionExpandMode)
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>(parameters =>
+        var cut = RenderComponent<FluentAccordion>(parameters =>
         {
             parameters.Add(p => p.ExpandMode, accordionExpandMode);
         });
@@ -48,7 +54,7 @@ public void FluentAccordion_WhenExpandMode_IsSpecified(AccordionExpandMode accor
     public void FluentAccordion_WhenAdditionalCSSClass_IsProvided()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>(parameters =>
+        var cut = RenderComponent<FluentAccordion>(parameters =>
         {
             parameters.Add(p => p.Class, "additional-class");
         });
@@ -61,7 +67,7 @@ public void FluentAccordion_WhenAdditionalCSSClass_IsProvided()
     public void FluentAccordion_WhenAdditionalStyle_IsProvided()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>(parameters =>
+        var cut = RenderComponent<FluentAccordion>(parameters =>
         {
             parameters.Add(p => p.Style, "background-color: grey");
         });
@@ -74,7 +80,7 @@ public void FluentAccordion_WhenAdditionalStyle_IsProvided()
     public void FluentAccordion_WhenAdditionalParameters_AreAdded()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>(parameters =>
+        var cut = RenderComponent<FluentAccordion>(parameters =>
         {
             parameters.AddUnmatched("unmatched1", "unmatched1-value");
             parameters.AddUnmatched("unmatched2", "unmatched2-value");
@@ -88,7 +94,7 @@ public void FluentAccordion_WhenAdditionalParameters_AreAdded()
     public void FluentAccordion_WhenExpandedModeIsSingle_AndMultipleItemAreExpanded_ByDefault()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>(parameters =>
+        var cut = RenderComponent<FluentAccordion>(parameters =>
         {
             parameters.Add(p => p.ExpandMode, AccordionExpandMode.Single);
             parameters.AddChildContent<FluentAccordionItem>(itemParams => itemParams.Add(p => p.Expanded, true));
@@ -103,14 +109,14 @@ public void FluentAccordion_WhenExpandedModeIsSingle_AndMultipleItemAreExpanded_
     public void FluentAccordion_Dispose()
     {
         // Arrange & Act
-        var cut = TestContext.RenderComponent<FluentAccordion>(parameters =>
+        var cut = RenderComponent<FluentAccordion>(parameters =>
         {
             parameters.Add(p => p.ExpandMode, AccordionExpandMode.Single);
             parameters.AddChildContent<FluentAccordionItem>(itemParams => itemParams.Add(p => p.Expanded, true));
             parameters.AddChildContent<FluentAccordionItem>(itemParams => itemParams.Add(p => p.Expanded, true));
         });
 
-        TestContext.DisposeComponents();
+        DisposeComponents();
 
         // Assert
         Assert.True(cut.IsDisposed);