@if (MudListExtended?.ItemDisabledTemplate != null && GetDisabledStatus() == true)
- {
+ {
@MudListExtended.ItemDisabledTemplate(this)
}
else if (MudListExtended?.ItemSelectedTemplate != null && IsSelected == true)
@@ -27,15 +31,18 @@
@if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.CheckBox : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.CheckBox)
{
-
+
}
else if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.Switch : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.Switch)
{
-
+
}
else if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.SwitchM3 : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.SwitchM3)
{
-
+
}
}
diff --git a/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor.cs b/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor.cs
index c973383d..e623db80 100644
--- a/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor.cs
+++ b/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor.cs
@@ -1,7 +1,5 @@
-using System.Windows.Input;
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
-using MudBlazor.Extensions;
using MudBlazor.Utilities;
using MudBlazor;
@@ -59,7 +57,29 @@ public partial class MudListItemExtended
: MudComponentBase, IDisposable
///
///
///
- protected internal string? ItemId { get; } = "listitem_" + Guid.NewGuid().ToString().Substring(0, 8);
+ protected internal string? ItemId { get; } = string.Concat("listitem_", Guid.NewGuid().ToString().AsSpan(0, 8));
+
+ ///
+ /// The accessible name used for the item. Prefer Text, then SecondaryText, then Value.ToString().
+ /// If the parent list has a ToStringFunc use that for Value formatting.
+ ///
+ protected string AccessibleName
+ {
+ get
+ {
+ if (!string.IsNullOrWhiteSpace(Text))
+ return Text!;
+ if (!string.IsNullOrWhiteSpace(SecondaryText))
+ return SecondaryText!;
+ if (Value != null)
+ {
+ if (MudListExtended?.ToStringFunc != null)
+ return MudListExtended.ToStringFunc(Value) ?? Value.ToString() ?? string.Empty;
+ return Value.ToString() ?? string.Empty;
+ }
+ return string.Empty;
+ }
+ }
///
/// Functional items does not hold values. If a value set on Functional item, it ignores by the MudList. They can not count on Items list (they count on AllItems), cannot be subject of keyboard navigation and selection.
diff --git a/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs b/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs
index 23ef428e..b8513fe7 100644
--- a/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs
+++ b/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs
@@ -29,6 +29,41 @@ public void SelectLabelFor()
label[0].Attributes.GetNamedItem("for")?.Value.Should().Be("selectLabelTest");
}
+ [Test]
+ public void Select_Items_Should_Expose_Accessible_Role_And_Label()
+ {
+ var comp = Context.Render();
+ comp.Find("div.mud-input-control").Click();
+ comp.WaitForAssertion(() => comp.FindAll("div.mud-list-item-extended").Count.Should().BeGreaterThan(0));
+
+ var items = comp.FindAll("div.mud-list-item-extended").ToArray();
+ var item = items[1];
+ item.GetAttribute("role").Should().Be("option");
+ item.GetAttribute("aria-selected").Should().Be("false");
+ var ariaLabel = item.GetAttribute("aria-label");
+ ariaLabel.Should().NotBeNullOrEmpty();
+ ariaLabel.Trim().Should().Be("2");
+ }
+
+ [Test]
+ public void MultiSelect_Items_Should_Expose_Checkbox_AriaLabel_And_TestId()
+ {
+ var comp = Context.Render();
+ comp.Find("div.mud-input-control").Click();
+ comp.WaitForAssertion(() => comp.FindAll("div.mud-list-item-extended").Count.Should().BeGreaterThan(0));
+
+ var items = comp.FindAll("div.mud-list-item-extended").ToArray();
+ var item = items[1];
+ item.GetAttribute("role").Should().Be("option");
+ var checkbox = item.QuerySelector("input[type=checkbox]");
+ checkbox.Should().NotBeNull();
+ var ariaLabel = checkbox.GetAttribute("aria-label");
+ ariaLabel.Should().NotBeNullOrEmpty();
+ var optionAria = item.GetAttribute("aria-label");
+ optionAria.Should().NotBeNullOrEmpty();
+ optionAria.Trim().Should().Be(ariaLabel.Trim());
+ }
+
// Note: MudSelect doesn't guaranteed the consequences of changing Value if MultiSelection is true for now.
// When this feature will add, just uncomment the testcase to test it. No need to write new test.
[Test]
From 09ab2ab0ef7344a38dca4cdfeec86b14e8742397 Mon Sep 17 00:00:00 2001
From: Matthew Batchelor <65035377+PlayerModu@users.noreply.github.com>
Date: Wed, 8 Apr 2026 08:11:23 +0100
Subject: [PATCH 2/3] Improved checkbox aria-label identification
---
.../Components/ListExtended/MudListItemExtended.razor | 9 ++++++---
.../Components/SelectExtendedTests.cs | 6 +++---
2 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor b/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor
index 5a7d52af..268ea112 100644
--- a/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor
+++ b/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor
@@ -82,15 +82,18 @@
@if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.CheckBox : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.CheckBox)
{
-
+
}
else if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.Switch : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.Switch)
{
-
+
}
else if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.SwitchM3 : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.SwitchM3)
{
-
+
}
}
diff --git a/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs b/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs
index b8513fe7..41f900f3 100644
--- a/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs
+++ b/tests/CodeBeam.MudBlazor.Extensions.UnitTests/Components/SelectExtendedTests.cs
@@ -57,11 +57,11 @@ public void MultiSelect_Items_Should_Expose_Checkbox_AriaLabel_And_TestId()
item.GetAttribute("role").Should().Be("option");
var checkbox = item.QuerySelector("input[type=checkbox]");
checkbox.Should().NotBeNull();
- var ariaLabel = checkbox.GetAttribute("aria-label");
- ariaLabel.Should().NotBeNullOrEmpty();
var optionAria = item.GetAttribute("aria-label");
optionAria.Should().NotBeNullOrEmpty();
- optionAria.Trim().Should().Be(ariaLabel.Trim());
+ var checkboxAria = checkbox.GetAttribute("aria-label");
+ checkboxAria.Should().NotBeNullOrEmpty();
+ checkboxAria.Trim().Should().Be($"Select {optionAria.Trim()}");
}
// Note: MudSelect doesn't guaranteed the consequences of changing Value if MultiSelection is true for now.
From d0f06c208c8368ccc2283a3ca787242b8b1fe9c8 Mon Sep 17 00:00:00 2001
From: Matthew Batchelor <65035377+PlayerModu@users.noreply.github.com>
Date: Wed, 8 Apr 2026 08:16:58 +0100
Subject: [PATCH 3/3] Update other checkboxes
---
.../Components/ListExtended/MudListItemExtended.razor | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor b/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor
index 268ea112..351123a1 100644
--- a/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor
+++ b/src/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListItemExtended.razor
@@ -32,17 +32,17 @@
@if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.CheckBox : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.CheckBox)
{
+ aria-label="@($"Select {AccessibleName}")" />
}
else if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.Switch : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.Switch)
{
+ aria-label="@($"Select {AccessibleName}")" />
}
else if (OverrideMultiSelectionComponent == null ? MudListExtended?.MultiSelectionComponent == MultiSelectionComponent.SwitchM3 : OverrideMultiSelectionComponent.Value == MultiSelectionComponent.SwitchM3)
{
+ aria-label="@($"Select {AccessibleName}")" />
}