From 168a896239104428b67926fa23f85ae63eeda9d3 Mon Sep 17 00:00:00 2001
From: Vincent Baaij <vnbaaij@outlook.com>
Date: Mon, 26 Aug 2024 21:08:55 +0200
Subject: [PATCH] [Dialog] Remove tabindex=-1 on fluent-dialog tag (#2584)

* - Remove tabindex=-1 on fluent-dialog
- Add null checks

* Update Dialog verified files
---
 src/Core/Components/Dialog/FluentDialog.razor         |  7 +++----
 src/Core/Components/Dialog/FluentDialog.razor.cs      | 11 ++++++++---
 ...ts.FluentDialogService_Default.verified.razor.html |  4 ++--
 ...luentDialogService_HeightUnset.verified.razor.html |  4 ++--
 ...ts.FluentDialog_RenderFragment.verified.razor.html |  4 ++--
 ...alogTests.FluentDialog_Default.verified.razor.html |  2 +-
 ...ests.FluentDialog_HeaderFooter.verified.razor.html |  4 ++--
 7 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/Core/Components/Dialog/FluentDialog.razor b/src/Core/Components/Dialog/FluentDialog.razor
index 1ede29b15..4ce4915a5 100644
--- a/src/Core/Components/Dialog/FluentDialog.razor
+++ b/src/Core/Components/Dialog/FluentDialog.razor
@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @using Microsoft.AspNetCore.Components.Rendering
 @inherits FluentComponentBase
 
@@ -13,8 +13,7 @@
                    aria-describedby=@(_parameters.AriaDescribedby ?? AriaDescribedby)
                    aria-labelledby=@(_parameters.AriaLabelledby ?? AriaLabelledby)
                    aria-label=@(_parameters.AriaLabel ?? AriaLabel)
-                   @attributes=@AdditionalAttributes
-                   tabindex="-1">
+                   @attributes=@AdditionalAttributes>
 
         @* Default Header *@
         @if (HasDefaultDialogHeader)
@@ -39,4 +38,4 @@
         }
 
     </fluent-dialog>
-</CascadingValue>
\ No newline at end of file
+</CascadingValue>
diff --git a/src/Core/Components/Dialog/FluentDialog.razor.cs b/src/Core/Components/Dialog/FluentDialog.razor.cs
index 5141276fb..2efbed4b1 100644
--- a/src/Core/Components/Dialog/FluentDialog.razor.cs
+++ b/src/Core/Components/Dialog/FluentDialog.razor.cs
@@ -165,7 +165,10 @@ public partial class FluentDialog : FluentComponentBase
     public void Show()
     {
         Hidden = false;
-        Instance.Parameters.Visible = true;
+        if (Instance is not null)
+        {
+            Instance.Parameters.Visible = true;
+        }
         RefreshHeaderFooter();
     }
 
@@ -175,8 +178,10 @@ public partial class FluentDialog : FluentComponentBase
     public void Hide()
     {
         Hidden = true;
-        Instance.Parameters.Visible = false;
-        //RefreshHeaderFooter();
+        if (Instance is not null)
+        {
+            Instance.Parameters.Visible = false;
+        }
     }
 
     /// <summary>
diff --git a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_Default.verified.razor.html b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_Default.verified.razor.html
index cbe4ed109..765981ca9 100644
--- a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_Default.verified.razor.html
+++ b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_Default.verified.razor.html
@@ -1,5 +1,5 @@
 
-<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: 200px;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" tabindex="-1" b-dsxskpj5rr="" blazor:elementreference="">
+<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: 200px;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
   <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
     <div style="width: 100%;">
       <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h4>
@@ -16,4 +16,4 @@
   <div class="fluent-dialog-body">
     My body
   </div>
-</fluent-dialog>
\ No newline at end of file
+</fluent-dialog>
diff --git a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html
index 2cf0ee4d0..16df0a15e 100644
--- a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html
+++ b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html
@@ -1,5 +1,5 @@
 
-<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" tabindex="-1" b-dsxskpj5rr="" blazor:elementreference="">
+<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
   <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
     <div style="width: 100%;">
       <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h4>
@@ -16,4 +16,4 @@
   <div class="fluent-dialog-body">
     My body
   </div>
-</fluent-dialog>
\ No newline at end of file
+</fluent-dialog>
diff --git a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html
index 21a7bfc1d..b0a60adff 100644
--- a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html
+++ b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html
@@ -1,5 +1,5 @@
 
-<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" tabindex="-1" b-dsxskpj5rr="" blazor:elementreference="">
+<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
   <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
     <div style="width: 100%;">
       <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Render Fragment Example</h4>
@@ -17,4 +17,4 @@
     <fluent-button type="button" aria-label="OK" title="OK" appearance="accent" blazor:onclick="3" b-x1200685t0="" blazor:elementreference="xxx">OK</fluent-button>
     <fluent-button type="button" aria-label="Cancel" title="Cancel" appearance="neutral" blazor:onclick="4" b-x1200685t0="" blazor:elementreference="xxx">Cancel</fluent-button>
   </div>
-</fluent-dialog>
\ No newline at end of file
+</fluent-dialog>
diff --git a/tests/Core/Dialog/FluentDialogTests.FluentDialog_Default.verified.razor.html b/tests/Core/Dialog/FluentDialogTests.FluentDialog_Default.verified.razor.html
index 71e857797..10c16b2b8 100644
--- a/tests/Core/Dialog/FluentDialogTests.FluentDialog_Default.verified.razor.html
+++ b/tests/Core/Dialog/FluentDialogTests.FluentDialog_Default.verified.razor.html
@@ -1,2 +1,2 @@
 
-<fluent-dialog class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" tabindex="-1" b-dsxskpj5rr="" blazor:elementreference="xxx">My dialog content</fluent-dialog>
\ No newline at end of file
+<fluent-dialog class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" b-dsxskpj5rr="" blazor:elementreference="xxx">My dialog content</fluent-dialog>
diff --git a/tests/Core/Dialog/FluentDialogTests.FluentDialog_HeaderFooter.verified.razor.html b/tests/Core/Dialog/FluentDialogTests.FluentDialog_HeaderFooter.verified.razor.html
index 3a8d576aa..d0dc7d68e 100644
--- a/tests/Core/Dialog/FluentDialogTests.FluentDialog_HeaderFooter.verified.razor.html
+++ b/tests/Core/Dialog/FluentDialogTests.FluentDialog_HeaderFooter.verified.razor.html
@@ -1,5 +1,5 @@
 
-<fluent-dialog class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" tabindex="-1" b-dsxskpj5rr="" blazor:elementreference="">
+<fluent-dialog class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" b-dsxskpj5rr="" blazor:elementreference="">
   <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
     <div style="width: 100%;">
       Header content
@@ -17,4 +17,4 @@
   <div class="stack-horizontal fluent-dialog-footer" style="justify-content: start; align-items: end; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
     Footer content
   </div>
-</fluent-dialog>
\ No newline at end of file
+</fluent-dialog>