[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
microsoft · Jan 10, 2025 · 3e22958 · 3e22958
1 parent 590de54
commit 3e22958
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/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.

diff --git a/src/Core/Components/Dialog/FluentDialogHeader.razor b/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>
 }
diff --git a/src/Core/Components/Dialog/FluentDialogHeader.razor.cs b/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>