Repository: MudBlazor/MudBlazor (2026-04-04T21:12:26Z)

Issue:
Add ARIA labels for the start and end of a range input
Add localizable `StartInputAriaLabel` and `EndInputAriaLabel` properties for MudRangeInput and use them in MudDateRangePicker as well.

```cs
        /// <summary>
        /// The accessible name for the starting input field.
        /// </summary>
        /// <remarks>
        /// Defaults to a localized "Start" label when <c>null</c>.
        /// </remarks>
        [Parameter]
        [Category(CategoryTypes.FormComponent.Behavior)]
        public string? StartInputAriaLabel { get; set; }

        /// <summary>
        /// The accessible name for the ending input field.
        /// </summary>
        /// <remarks>
        /// Defaults to a localized "End" label when <c>null</c>.
        /// </remarks>
        [Parameter]
        [Category(CategoryTypes.FormComponent.Behavior)]
        public string? EndInputAriaLabel { get; set; }
```

```
  <data name="MudRangeInput_Start" xml:space="preserve">
    <value>Start</value>
  </data>
  <data name="MudRangeInput_End" xml:space="preserve">
    <value>End</value>
  </data>
  <data name="MudDateRangePicker_Start" xml:space="preserve">
    <value>Start date</value>
  </data>
  <data name="MudDateRangePicker_End" xml:space="preserve">
    <value>End date</value>
  </data>
```



Discussion:

Patch:
diff --git a/src/MudBlazor/Components/DatePicker/MudDateRangePicker.razor b/src/MudBlazor/Components/DatePicker/MudDateRangePicker.razor
index bf2e3529ff96..a80894d7c428 100644
--- a/src/MudBlazor/Components/DatePicker/MudDateRangePicker.razor
+++ b/src/MudBlazor/Components/DatePicker/MudDateRangePicker.razor
@@ -1,5 +1,7 @@
 ﻿@namespace MudBlazor
 @inherits MudBaseDatePicker
+@using MudBlazor.Resources
+@inject InternalMudLocalizer Localizer
 
 @Render
 
@@ -33,6 +35,8 @@
                                   AdornmentAriaLabel="@AdornmentAriaLabel"
                                   PlaceholderStart="@PlaceholderStart"
                                   PlaceholderEnd="@PlaceholderEnd"
+                                  StartInputAriaLabel="@(Localizer[LanguageResource.MudDateRangePicker_Start])"
+                                  EndInputAriaLabel="@(Localizer[LanguageResource.MudDateRangePicker_End])"
                                   SeparatorIcon="@SeparatorIcon"
                                   Clearable="@(Clearable && !GetReadOnlyState())"
                                   ClearIcon="@ClearIcon"
diff --git a/src/MudBlazor/Components/Input/MudRangeInput.razor b/src/MudBlazor/Components/Input/MudRangeInput.razor
index c9b6daadefab..5dda6bf9a9c6 100644
--- a/src/MudBlazor/Components/Input/MudRangeInput.razor
+++ b/src/MudBlazor/Components/Input/MudRangeInput.razor
@@ -41,7 +41,8 @@
            inputmode="@InputMode.ToStringFast(true)"
            pattern="@Pattern"
            required="@Required"
-           aria-required="@Required.ToString().ToLowerInvariant()" />
+           aria-required="@Required.ToString().ToLowerInvariant()"
+           aria-label="@(StartInputAriaLabel ?? Localizer[LanguageResource.MudRangeInput_Start])" />
     <MudIcon Class="mud-range-input-separator mud-flip-x-rtl" Icon="@SeparatorIcon" Color="@Color.Default" />
     <input @ref="_elementReferenceEnd"
            @attributes="UserAttributes"
@@ -59,7 +60,8 @@
            @onkeydown="@InvokeKeyDownAsync"
            @onkeyup="@InvokeKeyUpAsync"
            required="@Required"
-           aria-required="@Required.ToString().ToLowerInvariant()" />
+           aria-required="@Required.ToString().ToLowerInvariant()"
+           aria-label="@(EndInputAriaLabel ?? Localizer[LanguageResource.MudRangeInput_End])" />
 
     @if (IsClearable() && !GetDisabledState())
     {
diff --git a/src/MudBlazor/Components/Input/MudRangeInput.razor.cs b/src/MudBlazor/Components/Input/MudRangeInput.razor.cs
index a661c4b1cc17..226e6384cd1f 100644
--- a/src/MudBlazor/Components/Input/MudRangeInput.razor.cs
+++ b/src/MudBlazor/Components/Input/MudRangeInput.razor.cs
@@ -62,6 +62,26 @@ public MudRangeInput()
         [Parameter]
         public string? PlaceholderEnd { get; set; }
 
+        /// <summary>
+        /// The accessible name for the starting input field.
+        /// </summary>
+        /// <remarks>
+        /// Defaults to a localized <c>Start</c> label when <c>null</c>.
+        /// </remarks>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Behavior)]
+        public string? StartInputAriaLabel { get; set; }
+
+        /// <summary>
+        /// The accessible name for the ending input field.
+        /// </summary>
+        /// <remarks>
+        /// Defaults to a localized <c>End</c> label when <c>null</c>.
+        /// </remarks>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Behavior)]
+        public string? EndInputAriaLabel { get; set; }
+
         /// <summary>
         /// Occurs when the Clear button is clicked.
         /// </summary>
diff --git a/src/MudBlazor/Resources/LanguageResource.resx b/src/MudBlazor/Resources/LanguageResource.resx
index 05415d4cab93..9ade28c7157f 100644
--- a/src/MudBlazor/Resources/LanguageResource.resx
+++ b/src/MudBlazor/Resources/LanguageResource.resx
@@ -351,6 +351,18 @@
   <data name="MudInput_Increment" xml:space="preserve">
     <value>Increment</value>
   </data>
+  <data name="MudRangeInput_Start" xml:space="preserve">
+    <value>Start</value>
+  </data>
+  <data name="MudRangeInput_End" xml:space="preserve">
+    <value>End</value>
+  </data>
+  <data name="MudDateRangePicker_Start" xml:space="preserve">
+    <value>Start date</value>
+  </data>
+  <data name="MudDateRangePicker_End" xml:space="preserve">
+    <value>End date</value>
+  </data>
   <data name="MudPageContentNavigation_NavMenu" xml:space="preserve">
     <value>Contents</value>
   </data>


Test patch:
diff --git a/src/MudBlazor.UnitTests/Components/DateRangePickerTests.cs b/src/MudBlazor.UnitTests/Components/DateRangePickerTests.cs
index a40ee3a75db1..c512312e3bc8 100644
--- a/src/MudBlazor.UnitTests/Components/DateRangePickerTests.cs
+++ b/src/MudBlazor.UnitTests/Components/DateRangePickerTests.cs
@@ -57,6 +57,16 @@ await comp.SetParametersAndRenderAsync(parameters =>
             comp.FindAll("input").Skip(1).First().Attributes["placeholder"].Value.Should().Be("End");
         }
 
+        [Test]
+        public void DateRangePickerInputDefaultAriaLabels()
+        {
+            var comp = Context.Render<MudDateRangePicker>();
+            var inputs = comp.FindAll("input");
+
+            inputs[0].Attributes.GetNamedItem("aria-label")?.Value.Should().Be("Start date");
+            inputs[1].Attributes.GetNamedItem("aria-label")?.Value.Should().Be("End date");
+        }
+
         [Test]
         public async Task DateRangePickerSeparatorIcon()
         {
diff --git a/src/MudBlazor.UnitTests/Components/InputTests.cs b/src/MudBlazor.UnitTests/Components/InputTests.cs
index 9cd266376997..fcd295d964ab 100644
--- a/src/MudBlazor.UnitTests/Components/InputTests.cs
+++ b/src/MudBlazor.UnitTests/Components/InputTests.cs
@@ -31,4 +31,28 @@ public void InputSizingHasClass(InputSizing sizing, string expectedClass)
 
         comp.Find("div.mud-input").ClassList.Should().Contain(expectedClass);
     }
+
+    [Test]
+    public void RangeInputDefaultAriaLabels()
+    {
+        var comp = Context.Render<MudRangeInput<string>>();
+        var inputs = comp.FindAll("input");
+
+        inputs[0].Attributes.GetNamedItem("aria-label")?.Value.Should().Be("Start");
+        inputs[1].Attributes.GetNamedItem("aria-label")?.Value.Should().Be("End");
+    }
+
+    [Test]
+    public void RangeInputCustomAriaLabels()
+    {
+        const string startAriaLabel = "From";
+        const string endAriaLabel = "To";
+        var comp = Context.Render<MudRangeInput<string>>(parameters => parameters
+            .Add(x => x.StartInputAriaLabel, startAriaLabel)
+            .Add(x => x.EndInputAriaLabel, endAriaLabel));
+        var inputs = comp.FindAll("input");
+
+        inputs[0].Attributes.GetNamedItem("aria-label")?.Value.Should().Be(startAriaLabel);
+        inputs[1].Attributes.GetNamedItem("aria-label")?.Value.Should().Be(endAriaLabel);
+    }
 }