[Dialog] Use FluentTooltip for close button (a11y)

microsoft · May 21, 2024 · d16b7d9 · d16b7d9
1 parent 1d79491
commit d16b7d9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/Core/Components/Dialog/FluentDialog.razor b/src/Core/Components/Dialog/FluentDialog.razor
@@ -13,7 +13,8 @@
                    aria-describedby=@(_parameters.AriaDescribedby ?? AriaDescribedby)
                    aria-labelledby=@(_parameters.AriaLabelledby ?? AriaLabelledby)
                    aria-label=@(_parameters.AriaLabel ?? AriaLabel)
-                   @attributes=@AdditionalAttributes>
+                   @attributes=@AdditionalAttributes
+                   tabindex="-1">
 
         @* Default Header *@
         @if (HasDefaultDialogHeader)

diff --git a/src/Core/Components/Dialog/FluentDialogHeader.razor b/src/Core/Components/Dialog/FluentDialogHeader.razor
@@ -24,6 +24,7 @@
             <FluentButton Id="dialog_close" Appearance="Appearance.Stealth" OnClick="@(() => Dialog.CancelAsync())" aria-label="@Dialog.Instance?.Parameters?.DismissTitle">
                 <FluentIcon Value="@(new CoreIcons.Regular.Size24.Dismiss())" Width="16px" />
             </FluentButton>
+            <FluentTooltip Anchor="dialog_close" Placement="Placement.Bottom">@Dialog.Instance?.Parameters?.DismissTitle</FluentTooltip>
         }
     </FluentStack>
 }