diff --git a/Radzen.Blazor.Tests/UploadTests.cs b/Radzen.Blazor.Tests/UploadTests.cs index e4306a32e..2c1c7eab1 100644 --- a/Radzen.Blazor.Tests/UploadTests.cs +++ b/Radzen.Blazor.Tests/UploadTests.cs @@ -90,6 +90,44 @@ namespace Radzen.Blazor.Tests Assert.Contains("accept=\"image/*\"", component.Markup); } + + [Fact] + public void Upload_Renders_DefaultTabIndex_OnChooseButton() + { + using var ctx = new TestContext(); + ctx.JSInterop.Mode = JSRuntimeMode.Loose; + var component = ctx.RenderComponent(); + + Assert.Equal("0", component.Find(".rz-fileupload-choose").GetAttribute("tabindex")); + } + + [Fact] + public void Upload_Renders_TabIndex_OnChooseButton_NotWrapper() + { + using var ctx = new TestContext(); + ctx.JSInterop.Mode = JSRuntimeMode.Loose; + var component = ctx.RenderComponent(parameters => + { + parameters.Add(p => p.TabIndex, 22); + }); + + Assert.Equal("22", component.Find(".rz-fileupload-choose").GetAttribute("tabindex")); + Assert.False(component.Find(".rz-fileupload").HasAttribute("tabindex")); + } + + [Fact] + public void Upload_Renders_DisabledTabIndex_OnChooseButton() + { + using var ctx = new TestContext(); + ctx.JSInterop.Mode = JSRuntimeMode.Loose; + var component = ctx.RenderComponent(parameters => + { + parameters.Add(p => p.TabIndex, 22); + parameters.Add(p => p.Disabled, true); + }); + + Assert.Equal("-1", component.Find(".rz-fileupload-choose").GetAttribute("tabindex")); + } } } diff --git a/Radzen.Blazor/RadzenUpload.razor b/Radzen.Blazor/RadzenUpload.razor index dc1b227e9..7fef2f1ba 100644 --- a/Radzen.Blazor/RadzenUpload.razor +++ b/Radzen.Blazor/RadzenUpload.razor @@ -8,7 +8,7 @@ {
- @RenderInput() diff --git a/Radzen.Blazor/RadzenUpload.razor.cs b/Radzen.Blazor/RadzenUpload.razor.cs index 47ea9c079..f89672849 100644 --- a/Radzen.Blazor/RadzenUpload.razor.cs +++ b/Radzen.Blazor/RadzenUpload.razor.cs @@ -202,6 +202,15 @@ namespace Radzen.Blazor [Parameter] public bool Disabled { get; set; } + /// + /// Gets or sets the tab order index for keyboard navigation. + /// Controls the order in which the Choose button receives focus when the user presses the Tab key. + /// Lower values receive focus first. Use -1 to exclude from tab navigation. + /// + /// The tab index. Default is 0 (natural tab order). + [Parameter] + public int TabIndex { get; set; } = 0; + /// /// Gets the choose class list. ///