diff --git a/src/Components/Web/src/Virtualization/Virtualize.cs b/src/Components/Web/src/Virtualization/Virtualize.cs index da5de296d8c6..6ce14ee0952d 100644 --- a/src/Components/Web/src/Virtualization/Virtualize.cs +++ b/src/Components/Web/src/Virtualization/Virtualize.cs @@ -223,7 +223,8 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) builder.OpenElement(0, SpacerElement); builder.AddAttribute(1, "style", GetSpacerStyle(_itemsBefore)); - builder.AddElementReferenceCapture(2, elementReference => _spacerBefore = elementReference); + builder.AddAttribute(2, "aria-hidden", "true"); + builder.AddElementReferenceCapture(3, elementReference => _spacerBefore = elementReference); builder.CloseElement(); var lastItemIndex = Math.Min(_itemsBefore + _visibleItemCapacity, _itemCount); @@ -283,8 +284,9 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) var itemsAfter = Math.Max(0, _itemCount - _visibleItemCapacity - _itemsBefore); builder.OpenElement(7, SpacerElement); - builder.AddAttribute(8, "style", GetSpacerStyle(itemsAfter, _unusedItemCapacity)); - builder.AddElementReferenceCapture(9, elementReference => _spacerAfter = elementReference); + builder.AddAttribute(8, "aria-hidden", "true"); + builder.AddAttribute(9, "style", GetSpacerStyle(itemsAfter, _unusedItemCapacity)); + builder.AddElementReferenceCapture(10, elementReference => _spacerAfter = elementReference); builder.CloseElement(); } diff --git a/src/Components/test/E2ETest/Tests/VirtualizationTest.cs b/src/Components/test/E2ETest/Tests/VirtualizationTest.cs index cb1b221c117d..565dc0190fcd 100644 --- a/src/Components/test/E2ETest/Tests/VirtualizationTest.cs +++ b/src/Components/test/E2ETest/Tests/VirtualizationTest.cs @@ -40,6 +40,7 @@ public void AlwaysFillsVisibleCapacity_Sync() // Wait until items have been rendered. Browser.True(() => (initialItemCount = GetItemCount()) > 0); Browser.Equal(expectedInitialSpacerStyle, () => topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); // Scroll halfway. Browser.ExecuteJavaScript("const container = document.getElementById('sync-container');container.scrollTop = container.scrollHeight * 0.5;"); @@ -47,6 +48,7 @@ public void AlwaysFillsVisibleCapacity_Sync() // Validate that we get the same item count after scrolling halfway. Browser.Equal(initialItemCount, GetItemCount); Browser.NotEqual(expectedInitialSpacerStyle, () => topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); // Scroll to the bottom. Browser.ExecuteJavaScript("const container = document.getElementById('sync-container');container.scrollTop = container.scrollHeight;"); @@ -54,6 +56,7 @@ public void AlwaysFillsVisibleCapacity_Sync() // Validate that we get the same item count after scrolling to the bottom. Browser.Equal(initialItemCount, GetItemCount); Browser.NotEqual(expectedInitialSpacerStyle, () => topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); int GetItemCount() => Browser.FindElements(By.Id("sync-item")).Count; } @@ -200,6 +203,7 @@ public void CanUseViewportAsContainer() // Validate that the top spacer has a height of zero. Browser.Equal(expectedInitialSpacerStyle, () => topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); Browser.ExecuteJavaScript("window.scrollTo(0, document.body.scrollHeight);"); @@ -209,6 +213,7 @@ public void CanUseViewportAsContainer() // Validate that the top spacer has expanded. Browser.NotEqual(expectedInitialSpacerStyle, () => topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); } [Fact] @@ -221,6 +226,7 @@ public async Task ToleratesIncorrectItemSize() // Wait until items have been rendered. Browser.True(() => GetItemCount() > 0); Browser.Equal(expectedInitialSpacerStyle, () => topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); // Scroll slowly, in increments of 50px at a time. At one point this would trigger a bug // due to the incorrect item size, whereby it would not realise it's necessary to show more @@ -234,6 +240,7 @@ public async Task ToleratesIncorrectItemSize() // Validate that the top spacer did change Browser.NotEqual(expectedInitialSpacerStyle, () => topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); int GetItemCount() => Browser.FindElements(By.ClassName("incorrect-size-item")).Count; } @@ -250,6 +257,8 @@ public void CanRenderHtmlTable() Assert.Equal("tr", topSpacer.TagName.ToLowerInvariant()); Assert.Equal("tr", bottomSpacer.TagName.ToLowerInvariant()); Assert.Contains(expectedInitialSpacerStyle, topSpacer.GetDomAttribute("style")); + Assert.Contains("true", topSpacer.GetDomAttribute("aria-hidden")); + Assert.Contains("true", bottomSpacer.GetDomAttribute("aria-hidden")); // Check scrolling document element works Browser.DoesNotExist(By.Id("row-999"));