[Dialog] Remove tabindex=-1 on fluent-dialog tag (#2584)

* - Remove tabindex=-1 on fluent-dialog - Add null checks * Update Dialog verified files
microsoft · Aug 26, 2024 · 168a896 · 168a896
1 parent 8496705
commit 168a896
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 16 deletions.
diff --git 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>
+</CascadingValue>
diff --git a/src/Core/Components/Dialog/FluentDialog.razor.cs b/src/Core/Components/Dialog/FluentDialog.razor.cs
@@ -165,7 +165,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     public void Show()
     {
         Hidden = false;
-        Instance.Parameters.Visible = true;
+        if (Instance is not null)
+        {
+            Instance.Parameters.Visible = true;
+        }
         RefreshHeaderFooter();
     }
 
@@ -175,8 +178,10 @@ public void Show()
     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
@@ -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 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h
   <div class="fluent-dialog-body">
     My body
   </div>
-</fluent-dialog>
+</fluent-dialog>
diff --git a/.../Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html b/.../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 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h
   <div class="fluent-dialog-body">
     My body
   </div>
-</fluent-dialog>
+</fluent-dialog>
diff --git 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 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Render Fragment
     <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>
+</fluent-dialog>
diff --git 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>
+<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
@@ -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>
+</fluent-dialog>