Add aria-hidden attribute to spacers (#63126)

Author: dariatiurina

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();
     }

src/Components/test/E2ETest/Tests/VirtualizationTest.cs

@@ -40,20 +40,23 @@ 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;");
 
         // 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;");
 
         // 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"));