[DialogHeader] Allow dialog title exclusion from tab index (#3137)

* Allow dialog title exclusion from tab index

* Rework and include flexibility to the dismiss tooltip

* Update comment based on official doc and fix allignment spaces

* Fix build errors

Author: NataschaZorgWijnhoven

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

@@ -3554,6 +3554,16 @@
             If defined, this value will replace the one defined in the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.DialogParameters"/>.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDialogHeader.ShowDismissTooltip">
+            <summary>
+            When true, shows the "Close" button tooltip in the header.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDialogHeader.TabIndex">
+            <summary>
+            Allows developers to make elements sequentially focusable and determine their relative ordering for navigation (usually with the Tab key).
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDialogHeader.ChildContent">
             <summary>
             Gets or sets the content to be rendered inside the component.

src/Core/Components/Dialog/FluentDialogHeader.razor

@@ -8,7 +8,7 @@
                  Style="@StyleValue"
                  Class="@ClassValue"
                  Id="@Id">
-        <div style="width: 100%;" tabindex="0">
+        <div style="width: 100%;" tabindex="@TabIndex">
             @if (@ChildContent == null && Dialog.Instance?.Parameters?.ShowTitle == true)
             {
                 <FluentLabel Typo="Typography.PaneHeader">@Dialog.Instance?.Parameters?.Title</FluentLabel>
@@ -24,7 +24,11 @@
             <FluentButton Id="dialog_close" Appearance="Appearance.Stealth" OnClick="@(() => Dialog.CancelAsync())" aria-label="@Dialog.Instance?.Parameters?.DismissTitle">
                 <FluentIcon Value="@(new CoreIcons.Regular.Size20.Dismiss())" Width="20px" Color="Color.Neutral"  />
             </FluentButton>
-            <FluentTooltip Anchor="dialog_close" Position="@TooltipPosition.Bottom">@Dialog.Instance?.Parameters?.DismissTitle</FluentTooltip>
+
+            if (ShowDismissTooltip == true)
+            {
+                <FluentTooltip Anchor="dialog_close" Position="@TooltipPosition.Bottom">@Dialog.Instance?.Parameters?.DismissTitle</FluentTooltip>
+            }
         }
     </FluentStack>
 }

src/Core/Components/Dialog/FluentDialogHeader.razor.cs

@@ -34,6 +34,18 @@ public partial class FluentDialogHeader : FluentComponentBase
     [Parameter]
     public bool? ShowDismiss { get; set; }
 
+    /// <summary>
+    /// When true, shows the "Close" button tooltip in the header.
+    /// </summary>
+    [Parameter]
+    public bool? ShowDismissTooltip { get; set; } = true;
+
+    /// <summary>
+    /// Allows developers to make elements sequentially focusable and determine their relative ordering for navigation (usually with the Tab key).
+    /// </summary>
+    [Parameter]
+    public int? TabIndex { get; set; } = 0;
+
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.
     /// </summary>