Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 4 commits into from
Aug 26, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fa2135d
- Remove tabindex=-1 on fluent-dialog
vnbaaij Aug 26, 2024
f2ec2ea
Update Dialog verified files
vnbaaij Aug 26, 2024
7a1bf25
Merge branch 'dev' into users/vnbaaij/fix-issue-#2582
vnbaaij Aug 26, 2024
6f47eb7
Merge branch 'dev' into users/vnbaaij/fix-issue-#2582
dvoituron Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/Core/Components/Dialog/FluentDialog.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@namespace Microsoft.FluentUI.AspNetCore.Components
@namespace Microsoft.FluentUI.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering
@inherits FluentComponentBase

Expand All @@ -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)
Expand All @@ -39,4 +38,4 @@
}

</fluent-dialog>
</CascadingValue>
</CascadingValue>
11 changes: 8 additions & 3 deletions src/Core/Components/Dialog/FluentDialog.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_Default.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
4 changes: 2 additions & 2 deletions .../Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
4 changes: 2 additions & 2 deletions tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion tests/Core/Dialog/FluentDialogTests.FluentDialog_Default.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions tests/Core/Dialog/FluentDialogTests.FluentDialog_HeaderFooter.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>