feat(centralui): TreeView chevron accessible name + keyboard activation + a11y regression test (T36a)
This commit is contained in:
@@ -51,7 +51,15 @@ else
|
|||||||
@oncontextmenu="(e) => OnContextMenu(e, item)" @oncontextmenu:preventDefault="@(ContextMenu != null)" @oncontextmenu:stopPropagation="@(ContextMenu != null)">
|
@oncontextmenu="(e) => OnContextMenu(e, item)" @oncontextmenu:preventDefault="@(ContextMenu != null)" @oncontextmenu:stopPropagation="@(ContextMenu != null)">
|
||||||
@if (isBranch)
|
@if (isBranch)
|
||||||
{
|
{
|
||||||
<span class="tv-toggle" @onclick="() => ToggleExpand(key)" @onclick:stopPropagation><i class="bi bi-chevron-right"></i></span>
|
<span class="tv-toggle"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
aria-label="@((isExpanded ? "Collapse " : "Expand ") + KeyStr(key))"
|
||||||
|
aria-expanded="@(isExpanded ? "true" : "false")"
|
||||||
|
@onclick="() => ToggleExpand(key)"
|
||||||
|
@onclick:stopPropagation
|
||||||
|
@onkeydown="(e) => OnToggleKey(e, key)"
|
||||||
|
@onkeydown:preventDefault><i class="bi bi-chevron-right"></i></span>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
@@ -276,6 +284,14 @@ else
|
|||||||
PersistExpandedState();
|
PersistExpandedState();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private void OnToggleKey(KeyboardEventArgs e, object key)
|
||||||
|
{
|
||||||
|
if (e.Key == "Enter" || e.Key == " ")
|
||||||
|
{
|
||||||
|
ToggleExpand(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private void PersistExpandedState()
|
private void PersistExpandedState()
|
||||||
{
|
{
|
||||||
if (StorageKey != null)
|
if (StorageKey != null)
|
||||||
|
|||||||
@@ -0,0 +1,106 @@
|
|||||||
|
using Bunit;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using ZB.MOM.WW.ScadaBridge.CentralUI.Components.Shared;
|
||||||
|
|
||||||
|
namespace ZB.MOM.WW.ScadaBridge.CentralUI.Tests.Shared;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Accessibility regression tests.
|
||||||
|
/// Locks the a11y attributes on TreeView chevron toggles and the
|
||||||
|
/// ToastNotification live-region container against future regressions.
|
||||||
|
/// </summary>
|
||||||
|
public class AccessibilityTests : BunitContext
|
||||||
|
{
|
||||||
|
// ── TreeView harness (mirrors TreeViewTests setup) ─────────────────────────
|
||||||
|
|
||||||
|
private record TestNode(string Key, string Label, List<TestNode> Children);
|
||||||
|
|
||||||
|
private static List<TestNode> BranchRoots() => new()
|
||||||
|
{
|
||||||
|
new("root-1", "Root One", new()
|
||||||
|
{
|
||||||
|
new("child-1", "Child One", new()),
|
||||||
|
}),
|
||||||
|
new("leaf-1", "Leaf One", new()),
|
||||||
|
};
|
||||||
|
|
||||||
|
private IRenderedComponent<TreeView<TestNode>> RenderTreeView(List<TestNode>? items = null)
|
||||||
|
{
|
||||||
|
return Render<TreeView<TestNode>>(parameters =>
|
||||||
|
{
|
||||||
|
parameters
|
||||||
|
.Add(p => p.Items, items ?? BranchRoots())
|
||||||
|
.Add(p => p.ChildrenSelector, n => n.Children)
|
||||||
|
.Add(p => p.HasChildrenSelector, n => n.Children.Count > 0)
|
||||||
|
.Add(p => p.KeySelector, n => n.Key)
|
||||||
|
.Add(p => p.NodeContent, node => builder =>
|
||||||
|
{
|
||||||
|
builder.AddMarkupContent(0, $"<span class=\"node-label\">{node.Label}</span>");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Test 1: TreeView chevron toggle a11y attributes ────────────────────────
|
||||||
|
|
||||||
|
[Fact]
|
||||||
|
public void TreeViewToggle_HasAccessibleNameAndRole()
|
||||||
|
{
|
||||||
|
// BranchRoots has one branch node ("root-1") and one leaf node ("leaf-1").
|
||||||
|
// The branch node's toggle span is the only .tv-toggle rendered.
|
||||||
|
var cut = RenderTreeView();
|
||||||
|
|
||||||
|
var toggle = cut.Find(".tv-toggle");
|
||||||
|
|
||||||
|
// role="button" makes it announced as a button by screen readers.
|
||||||
|
Assert.Equal("button", toggle.GetAttribute("role"));
|
||||||
|
|
||||||
|
// tabindex="0" puts it in the natural tab order.
|
||||||
|
Assert.Equal("0", toggle.GetAttribute("tabindex"));
|
||||||
|
|
||||||
|
// aria-label must be non-empty (e.g. "Expand root-1").
|
||||||
|
var label = toggle.GetAttribute("aria-label");
|
||||||
|
Assert.NotNull(label);
|
||||||
|
Assert.NotEmpty(label!);
|
||||||
|
|
||||||
|
// aria-expanded reflects the collapsed state ("false" when collapsed).
|
||||||
|
Assert.Equal("false", toggle.GetAttribute("aria-expanded"));
|
||||||
|
}
|
||||||
|
|
||||||
|
[Fact]
|
||||||
|
public void TreeViewToggle_AriaExpanded_ReflectsExpandedState()
|
||||||
|
{
|
||||||
|
var cut = RenderTreeView();
|
||||||
|
|
||||||
|
// Collapsed initially.
|
||||||
|
var toggle = cut.Find(".tv-toggle");
|
||||||
|
Assert.Equal("false", toggle.GetAttribute("aria-expanded"));
|
||||||
|
|
||||||
|
// Click to expand.
|
||||||
|
toggle.Click();
|
||||||
|
|
||||||
|
// aria-expanded must now be "true".
|
||||||
|
var expandedToggle = cut.Find(".tv-toggle");
|
||||||
|
Assert.Equal("true", expandedToggle.GetAttribute("aria-expanded"));
|
||||||
|
|
||||||
|
// aria-label should also flip to "Collapse …".
|
||||||
|
var labelAfterExpand = expandedToggle.GetAttribute("aria-label");
|
||||||
|
Assert.NotNull(labelAfterExpand);
|
||||||
|
Assert.StartsWith("Collapse", labelAfterExpand!);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Test 2: ToastNotification live-region regression lock ─────────────────
|
||||||
|
|
||||||
|
[Fact]
|
||||||
|
public void ToastNotification_Container_IsAriaLivePolite()
|
||||||
|
{
|
||||||
|
// Render ToastNotification — it has no required services/cascading params.
|
||||||
|
var cut = Render<ToastNotification>();
|
||||||
|
|
||||||
|
// The outermost div is the live-region container.
|
||||||
|
// Find the element that carries aria-live (may be the root or a child div).
|
||||||
|
var liveRegion = cut.Find("[aria-live]");
|
||||||
|
|
||||||
|
Assert.Equal("polite", liveRegion.GetAttribute("aria-live"));
|
||||||
|
Assert.Equal("true", liveRegion.GetAttribute("aria-atomic"));
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user